无法将我的 Mailchimp 列表连接到我的登陆页面

Question

我真的在这里遇到了很多麻烦...我有一个 HTML 登录页面，并且在页面中有一些表单。其中一种形式收集用户电子邮件。我想将这些电子邮件发送到我的 Mailchimp 列表，但我遇到了最困难的时间。

我通过 mailchimp 创建了一个表单并将其嵌入到我的页面中。我做了一些小的样式修改，但留下了 mailchimp 说我需要的信息。

我的问题是，每次我通过表单提交电子邮件地址时，我在 mailchimp 上的列表都不会更新。意思是，我认为在我的 HTML 登录页面端没有任何东西可以“通过”。我是不是做错了什么？

这是我的表单代码：

<div id="mc_embed_signup">
    <form action="http://inspireconversation.us7.list-manage.com/subscribe/post?u=ee86d645c5e94d2c51a62c797&amp;id=07c5091ff0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc-email-field">
            <input type="email" value="Enter your email address" name="EMAIL" class="required email" id="mce-EMAIL">
        </div>
        <div id="mce-responses" class="clear">
            <div class="response" id="mce-error-response" style="display:none"></div>
            <div class="response" id="mce-success-response" style="display:none"></div>
        </div>    
        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;">
            <input type="text" name="b_ee86d645c5e94d2c51a62c797_07c5091ff0" value="">
        </div>
        <div class="clear">
            <input type="submit" value="Send" name="subscribe" id="mc-embedded-subscribe" class="send">
        </div>
    </form>
</div>

我将此添加到样式表中：

#mc-email-field { text-align: center; width: 80%; margin: 0 auto; }
#mc_embed_signup { font: 14px Helvetica, Arial, sans-serif; width: 509px;}

这是登陆页面的 URL：http://contest.realfamilytrips.com（此比赛尚未开始，谢谢 :)

另一个问题是我似乎无法让字段输入区域达到 509 像素，但目前这是一个小问题。我主要关心的是将此表单连接到我的 mailchimp 列表。

感谢大家的帮助。非常感谢。

Answer 1

我检查了链接的登录页面，看起来您正在阻止 mailchimp 表单在 functions.js 中使用此代码提交：

$(document).on('submit', 'form', function (e) {
    // Check email address
    // if email address ok
        $('.step-2').hide();
        $('.step-3').fadeIn(800);
        e.preventDefault();
    // else 
        // alert
        // e.preventDefault();
    // end if
});

e.preventDefault() 调用意味着您正在处理事件。但是，您没有提交表单。因此，表单不会提交给 mailchimp。

我可以看到您在此处尝试执行的操作，即在没有正常 mailchimp 流程的情况下订阅某人（单击订阅、重定向到感谢页面等）。 This answer 展示了如何做到这一点。在您的 e.preventDefault() 调用之后，您将调用一个 ajax 调用，就像该答案在其“注册”函数中所做的那样。我不知道mailchimp是否正式支持，但我刚刚测试过它确实有效。

我认为支持的路线通常是使用服务器端代码中的 mailchimp API。该 API 必须在服务器端调用，因为它使用您的 mailchimp api 密钥，您希望将其保密。