Ajax Mailchimp Signup Form Integration

AJAX Mailchimp signup form integration

You don't need an API key, all you have to do is plop the standard mailchimp generated form into your code ( customize the look as needed ) and in the forms "action" attribute change post?u= to post-json?u= and then at the end of the forms action append &c=? to get around any cross domain issue. Also it's important to note that when you submit the form you must use GET rather than POST.

Your form tag will look something like this by default:

<form action="http://xxxxx.us#.list-manage1.com/subscribe/post?u=xxxxx&id=xxxx" method="post" ... >

change it to look something like this

<form action="http://xxxxx.us#.list-manage1.com/subscribe/post-json?u=xxxxx&id=xxxx&c=?" method="get" ... >

Mail Chimp will return a json object containing 2 values: 'result' - this will indicate if the request was successful or not ( I've only ever seen 2 values, "error" and "success" ) and 'msg' - a message describing the result.

I submit my forms with this bit of jQuery:

$(document).ready( function () {
    // I only have one form on the page but you can be more specific if need be.
    var $form = $('form');

    if ( $form.length > 0 ) {
        $('form input[type="submit"]').bind('click', function ( event ) {
            if ( event ) event.preventDefault();
            // validate_input() is a validation function I wrote, you'll have to substitute this with your own.
            if ( validate_input($form) ) { 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 subscribe using jQuery AJAX?

@Nagra's solution is good but it will throw an error when executed from the client's browser due to the Same-Origin Security Policies in effect. In essence, these security measures are there to prevent cross site requests that occur when the originator and the sender are on different domains.

If you see errors like the below in the javascript console it is a clear indication.

XMLHttpRequest cannot load http://YOUR-MAILCHIMP-URL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin http://BROWSER-LOCATION is therefore not allowed access.

To overcome this problem the script needs to be rewritten to utilize CORS or JSONP. As the MailChimp API does not support CORS the only option is the undocumented JSONP interface.

Change the URL to utilize the /subscribe/post-json? version and also append &c=? to the end. Once the URL is updated you will also need to modify the dataType in the JSON hash to be jsonp

The updated first few lines of the function should resemble the below.

$.ajax({
    url: '//YOUR URL&id=YOUR LIST ID&c=?',
    data: $('#YOUR FORM').serialize(),
    dataType: 'jsonp',

Mailchimp via jQuery Ajax. Submits correctly but JSON response is returned as a separate page

The whole issue was the $(document).ready(function () {}); part. For some reason unbeknownst to me that causes the event.preventDefault(); method from running and the form submits regularly. If you remove the $(document).ready(function () {}); part it'll work as intended.

My final code for anyone looking in the future:

Form:

<form class="footer-newsletter-form" method="POST" id="footer-newsletter" action="https://xxxxxxxxxxxxx.us1.list-manage.com/subscribe/post-json?c=?">
   <input type="hidden" name="u" value="xxxxxxxxxxxxxxxxxxxxxxxxxxx">
   <input type="hidden" name="id" value="xxxxxxxxxx">
   <input id="email" name="EMAIL" type="email" class="input-text required-entry validate-email footer__newsletter-field">
   <button type="submit" title="Subscribe" class="button button1 hover-white footer__newsletter-button">SUBSCRIBE</button>
   <div id="subscribe-result"></div>
</form>

And the JS:

<script>
    function register($form) {
      $.ajax({
        type: "GET",
        url: $form.attr('action'),
        data: $form.serialize(),
        cache: false,
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        error: function (err) {
          console.log('error')
        },
        success: function (data) {
          if (data.result != "success") {
            console.log('Error: ' + data.msg);
          } else {
            console.log("Success");
             $($form).find("div#subscribe-result").html("<p class='success-message'>Almost finished... We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you!</p>"); 
             setTimeout(function() {  $($form).find("div#subscribe-result").hide(); }, 7000);
          }
        }
      });
    }

    $(document).on('submit', '#footer-newsletter', function (event) {
      try {
        var $form = jQuery(this);
        event.preventDefault();
        register($form);
      } catch (error) {}
    });
</script>

---

Related Topics