Search code examples
htmlruby-on-railsformspageload

Rails form on landing page cause page refresh to go to bottom of page


I added a form to the bottom of my landing page using partials

<body id= "page-top" data-spy="scroll" data-target=".navbar-fixed-top">
    <%= render "layouts/header" %>
    <%= render 'product' %> 
    <%= render 'people' %>
    <%= render 'contact' %>

  </body>

<div class="section landing-section">
  <div class= "container">
    <div class="row">
      <div class="col-md-8 ml-auto mr-auto">
        <h2>Keep in touch?</h2>
        <%= render "contacts/form" %> 
      </div>
    </div>
  </div>
</div>

I rendered the form from my contacts folder My contact form is below and added to my static pages controller in

def home 
@contact = Contact.new 
end

<%= form_for @contact, class: "contact-form"  do |f| %>
  <div class="form-group">
      <%= f.label :name %><br />
      <%= f.text_field :name, autofocus: true, required: true, class: "form-control", placeholder: "name" %>
    </div>
    <div class="form-group">
      <%= f.label :email %><br />
      <%= f.email_field :email, autofocus: true, required:true, class: "form-control", placeholder: "email" %>
    </div>
    <div class="form-group">
      <%= f.label :message %><br />
      <%= f.text_area :message, autofocus: true, rows:4, required:true,  class: "form-control", placeholder: "send us your thoughts and feelings" %>
    </div>
   <div class="btn-group">
        <%= f.submit "Send Message", class: "btn btn-danger btn-lg btn-fill" %>
    </div>
<% end %>

The form works but every time I refresh the landing page or load it in a browser, the page lands on the contact form (the bottom of the page)

Any ideas what I need to do to get the page to load normally (to the top of the page)


Solution

  • You should remove the autofocus: true for all fields.