提交表单后，如何防止页面跳动？

Question

I'm using a Shopify Theme which I've been editing as required. I have chosen to move the newsletter subscription form from the bottom of the page to the top so I can embed it into the hero image. When the user submits the form the page jumps to the bottom (where the form used to be). Below is the website and the code for the form.

www.hoo-gah.co.uk

<div class="signup-form">
           {% if settings.footer_signup_action == empty %}
               {% form 'customer' %}
             {% if form.posted_successfully? %}
               <h4>{{ 'layout.signup.post_success' | t }}</h4>
               <script>window.scroll(0,1000000)</script>
             {% else %}
                   <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter"/>
                   <span class="input-block">
                     <input type="email" placeholder="{{ 'layout.signup.email' | t }}" class="required" value="" id="mailinglist_email" name="contact[email]" /><input class="compact" type="submit" value="Subscribe" />
                   </span>
             {% if form.errors %}
                   {% for field in form.errors %}
                   <p class="error">{{ field | capitalize }} - {{ form.errors.messages[field] }}</p>
                   {% endfor %}
             {% endif %}
            {% endif %}
           {% endform %}
           {% else %}
           <form action="{{ settings.footer_signup_action }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
            <span class="input-block hero-input">
              <input type="email" class="required email" placeholder="{{ 'layout.signup.email' | t }}" value="" id="mce-EMAIL" required name="EMAIL" /><input class="compact" type="submit" name="subscribe" value="Subscribe" />
            </span>
           </form>
          {% endif %}
</div>

I thought that the line window.scroll(0,1000000) would be responsible for this, but even when I delete the line or change the values to (0,0) the screen still jumps upon submit, so I'm wondering if this is being overridden somewhere.

If anyone has any ideas on how to make the page scroll to the top instead of to the bottom, it would be much appreciated.

Thanks for your time!

Answer 1

Remove the #contact_form from action="/contact#contact_form" in your form element, and life will be beautiful again.

The #contact_form tells the browser to scroll to the form.Removing it will have no other affect.

Just to be clear this is the form to change:

<form method="post" action="/contact#contact_form" id="contact_form" class="contact-form" accept-charset="UTF-8"><input type="hidden" value="customer" name="form_type"><input type="hidden" name="utf8" value="✓">

                       <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter">
                       <span class="input-block">
                         <input type="email" placeholder="Enter your email..." class="required" value="" id="mailinglist_email" name="contact[email]"><input class="compact" type="submit" value="Subscribe">
                       </span>


                       <p class="error">Email - can't be blank</p>



                </form>

Should be:

<form method="post" action="/contact" id="contact_form" class="contact-form" accept-charset="UTF-8"><input type="hidden" value="customer" name="form_type"><input type="hidden" name="utf8" value="✓">

                       <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter">
                       <span class="input-block">
                         <input type="email" placeholder="Enter your email..." class="required" value="" id="mailinglist_email" name="contact[email]"><input class="compact" type="submit" value="Subscribe">
                       </span>


                       <p class="error">Email - can't be blank</p>



                </form>

Answer 2

I know this is old but I encountered the same issue today. I have to answer because I can't just comment yet. Also, based on O_Z answer :

You should replace this piece of code :

 {% form 'customer' %}

by this one

{% form 'customer', action:'/contact' %}

That's the proper way to do it I guess. It is not well (or at all) documented in Shopify, but you can add elements (action, classes, data-type etc.) directly from your html file, just like the above example. In my case, after the form is submitted, the page stays on top by default and no longer scrolls.