MailChimp Ajax提交不会将订阅者添加到列表中

时间:2016-03-09 10:16:49

标签: javascript jquery ajax mailchimp

我试图让用户使用this solution订阅带有ajax的MailChimp列表。表单的行为有效(即错误消息正确显示,"提交..."以及确认消息)。但是,实际上没有订户添加到我的MailChimp列表中。我相信这对你们很多人来说很简单,但我似乎无法找到问题所在。任何人?谢谢!

HTML

<form id="subscribe-form" action="https://7rueparadis.us12.list-manage.com/subscribe/post-json?u=833b25cd1f45aa6d1901482a1&amp;id=f3e732140d" method="get" id="mc-embedded-subscribe-form" name="subscribe" target="_blank">
        <label for="Email" class="newsletter__label hidden-label">{{ 'general.newsletter_form.newsletter_email' | t }}</label>
        <div class="input-group">
          <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="Enter your email address" name="EMAIL" id="Email" class="input-group-field newsletter__input" autocorrect="off" autocapitalize="off">
          <span class="input-group-btn">
            <button type="submit" class="btn newsletter__submit" name="mc-embedded-subscribe" id="subscribe-button">
              <span class="newsletter__submit-text--large">Subscribe</span>
              <span class="newsletter__submit-text--small"> <span class="icon icon-arrow-right" aria-hidden="true"></span></span>
            </button>
          </span>
        </div>
                 <div class="grid__item one-whole secrets-copy2">
        <p class="newsletterbody" id="subscribe-result">
                   </p></div>
      </form>

JS

<script type="text/javascript">
$(document).ready(function(){
    ajaxMailChimpForm($("#subscribe-form"), $("#subscribe-result"));
    // Turn the given MailChimp form into an ajax version of it.
    // If resultElement is given, the subscribe result is set as html to
    // that element.
    function ajaxMailChimpForm($form, $resultElement){
        // Hijack the submission. We'll submit the form manually.
        $form.submit(function(e) {
            e.preventDefault();
            if (!isValidEmail($form)) {
                var error =  "Please make sure you've inserted a valid e-mail address!";
              $resultElement.html(error);
            } else {
                $resultElement.html("Subscribing...");
                submitSubscribeForm($form, $resultElement);
            }
        });
    }
    // Validate the email address in the form
    function isValidEmail($form) {
        // If email is empty, show error message.
        // contains just one @
        var email = $form.find("input[type='email']").val();
        if (!email || !email.length) {
            return false;
        } else if (email.indexOf("@") == -1) {
            return false;
        }
        return true;
    }
    // Submit the form with an ajax/jsonp request.
    // Based on http://stackoverflow.com/a/15120409/215821
    function submitSubscribeForm($form, $resultElement) {
        $.ajax({
            type: "GET",
            url: $form.attr("action"),
            data: $form.serialize(),
            cache: false,
            dataType: "jsonp",
            jsonp: "c", // trigger MailChimp to return a JSONP response
            contentType: "application/json; charset=utf-8",
            error: function(error){
                // According to jquery docs, this is never called for cross-domain JSONP requests
            },
            success: function(data){
                if (data.result != "success") {
                    var message = data.msg || "Oops! An error is preventing you from subscribing.";
                    if (data.msg && data.msg.indexOf("already subscribed") >= 0) {
                        message = "It seems you have already subscribed. Thank you!";

                    }
                    $resultElement.html(message);
                } else {

                    $resultElement.html("Voilà! Thank you!");
                }
            }
        });
    }
});

1 个答案:

答案 0 :(得分:0)

订阅者不会直接添加到列表中,他们首先必须确认他们想要列在列表中。如果您希望绕过此双重选择,则需要使用该API。