如何防止自定义 Mailchimp 表单在提交时重定向？答案

【问题标题】：How to prevent custom Mailchimp form from redirecting on submit?如何防止自定义 Mailchimp 表单在提交时重定向？
【发布时间】：2017-09-15 21:28:29
【问题描述】：

我在我正在处理的网页上创建了一个自定义 Mailchimp 注册表单。一切都很好，除了我不喜欢提交时，表单重定向到一个新选项卡，其中包含来自 Mailchimp 的消息，说明您已加入邮件列表。我想知道是否有可能阻止这种重定向，也许最多只显示一些感谢弹出消息。

HTML：

<form action="//gohrvst.us11.list-manage.com/subscribe/post?u=b96980cf3047250aab16b3c44&amp;id=e6441c7cba" id="subscribe" method="POST" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <label for="mail">SIGN UP FOR OUR MAILING LIST</label>

            <p class="form-status-text"></p>
            <!-- /.form-status-text -->

            <div class="form-controls no-border">
              <div class="form-group no-border">

                <input type="hidden" name="side" value="creativeagency" class="no-border" />
                <input type="email" id="mail" name="MERGE0" value="ENTER EMAIL ADDRESS" class="subscribe-field no-border" required data-validation-type="['presence', 'email']" onblur="if (this.value == '') {this.value = 'ENTER EMAIL ADDRESS';}"
 onfocus="if (this.value == 'ENTER EMAIL ADDRESS') {this.value = '';}">  

              </div><!-- /.form-group -->

              <button type="submit" class="subscribe-btn" id="subscribe-button">
                <div class="subscribe-btn-svg">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 64.57" class="subscribe-btn-svg"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Asset 9</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M4,36.28H66.34L44.89,57.74a4,4,0,1,0,5.66,5.66L78.83,35.11h0a4,4,0,0,0,.5-.61c.07-.1.11-.21.17-.31a3.85,3.85,0,0,0,.2-.37,3.65,3.65,0,0,0,.13-.41c0-.11.08-.22.1-.33a4,4,0,0,0,.08-.79h0a4,4,0,0,0-.08-.77c0-.12-.07-.23-.1-.35a3.58,3.58,0,0,0-.12-.4,4,4,0,0,0-.21-.4c-.05-.1-.1-.2-.16-.29a3.88,3.88,0,0,0-.5-.61L50.54,1.17a4,4,0,1,0-5.66,5.66L66.34,28.28H4a4,4,0,0,0,0,8Z"/></g></g></svg>
                </div>
              </button>
           </div>
          </form>

【问题讨论】：

我不熟悉 MailChimp，但在我看来，您应该能够通过 JavaScript 函数发送 POST 数据并避免重定向。但这会违反 MailChimp 的服务条款吗？
用ajax和jquery函数制作
请出示minimal reproducible example（包括您的JS代码）
@ochi 此表单来自我正在处理的自定义 shopify 商店，据我所知，这是与表单有关的所有代码。
您是否可以访问mailchimp 界面来修改自定义表单？ - 如果不是，那么您无能为力，因为这是由表单生成的 JS 代码控制的（并在表单的 action 属性中调用）

标签： jquery html ajax forms mailchimp

【解决方案1】：

也许你可以在 jQuery 中使用 Ajax 来实现，试试这样的方法

$(document).ready( function () {
    var $form = $('#mc-embedded-subscribe-form2');
    if ( $form.length > 0 ) {
        $('form input[type="submit"]').bind('click', function ( event ) {
            if ( event ) event.preventDefault();
            register($form);
        });
    }
});

function register($form) {
    $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: $form.serialize(),
        cache       : false,
        dataType    : 'json',
        contentType: "application/json; charset=utf-8",
        error       : function(err) { alert("Could not connect to the registration server. Please try again later."); },
        success     : function(data) {
            if (data.result != "success") {
                // Something went wrong, do something to notify the user. maybe alert(data.msg);
            } else {
                // It worked, carry on...
            }
        }
    });
}

【讨论】：

感谢您的回复。今天晚些时候我会试试这个。不过，我会将 Mailchimp 表单操作放在哪里？
@SpencerM。只要让你的html。脚本 jquery 获取表单的方法和操作。所以 ajax 查询转到 Mailchimp 表单操作

【解决方案2】：

我在这里遇到的问题分为两部分 - 首先，按钮无限地输出错误消息，然后 mailchimp 在 one() 运行并触发窗口后接管

$( "#mc-embedded-subscribe-hp" ).one( "click", function(event) {
    let subscriptor = email.value;
    
    filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (filter.test(subscriptor)) {
        // Yay! valid
        // Mailchimp wil auto complete from here
    }
    else
    {
        event.preventDefault();
        $('.newsletter-wrapper__column').append('<div class="subscription-error">Fill in your Email Address to receive Exclusive discounts</div>');
        window.stop();
    }
});

【讨论】：