Question

我正在使用我根据需要编辑的Shopify主题。我选择将简报订阅表从页面底部移到顶部，这样我就可以将其嵌入到英雄形象中。当用户提交表单时，页面跳转到底部（表单曾经是）。以下是表格的网站和代码。

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>

我认为行window.scroll（0,1000000）会对此负责，但即使我删除该行或将值更改为（0,0），屏幕仍会在提交时跳转，所以我＆＃39我想知道这是否被某些地方覆盖了。

如果有人对如何使页面滚动到顶部而不是底部有任何想法，那将非常感激。

谢谢你的时间！

Answer 1

从表单元素中的#contact_form中删除action="/contact#contact_form"，生活将再次美丽。

#contact_form告诉浏览器滚动到表单。删除它将没有其他影响。

要明确这是要改变的形式：

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

应该是：

<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

我知道这很旧，但是今天我遇到了同样的问题。我必须回答，因为我还不能发表评论。另外，基于O_Z答案：

您应该替换这段代码：

 {% form 'customer' %}

这个人

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

我猜这是正确的方法。 Shopify中没有很好地记录（或根本没有记录），但是您可以直接从html文件中添加元素（动作，类，数据类型等），就像上面的示例一样。就我而言，提交表单后，默认情况下页面位于顶部，并且不再滚动。

如何在表单提交后阻止页面跳转？

2 个答案: