Jack Watson Jack Watson - 2 months ago 6
HTML Question

How can I prevent page from jumping after form submit?

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!

O_Z O_Z
Answer

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>
Comments