MailChimp Ajax submission doesn't add subscribers to list

Question

I'm trying to let users subscribe to my MailChimp list with ajax, using this solution. The form's behavior works (i.e. error messages display correctly, as do "submitting..." and the confirmation message). However, no subscribers are actually added to my MailChimp list. I'm sure this is very simple to many of you but I can't seem to find the problem. Anyone? Thanks!

    $(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!");
                    }
                }
            });
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">Newsletter form</label>
            <div class="input-group">
              <input type="email" value="" 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>

It seems that the URL you used for the Mailchimp form is no longer valid and the ajax request is returning an error and going to the `error` method which is actually used as opposed to the comment in your code. — Goran Stoyanov, Dec 14 '19 at 19:58

score -1 · Answer 1 · answered Mar 10 '16 at 23:16

-1

Subscribers are not added to the list directly, they first have to confirm that they want to be on the list. If you wish to bypass this double opt-in, you'll need to use the API.

answered Mar 10 '16 at 23:16

TooMuchPete

4,583
2
17
21

MailChimp Ajax submission doesn't add subscribers to list

1 Answers1