18

What is a complete jQuery solution to subscribing uses to a list on Mailchimp?

The problem is that most solutions either use a library or require server side code. I want a quick elegant solution, which gives me complete control over the UI, hence UX of the form and it's functionality.

Nagra
  • 1,529
  • 3
  • 15
  • 25
  • 2
    The question *[AJAX Mailchimp signup form integration](https://stackoverflow.com/questions/8425701/ajax-mailchimp-signup-form-integration)* also has some good suggestions. – Simon East Oct 13 '17 at 01:17

2 Answers2

40

@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',
Kevin B
  • 94,570
  • 16
  • 163
  • 180
nneko
  • 770
  • 9
  • 11
  • @danielCrabbe in the example I used a relative url but there will be no issue if you use the full absolute value by specifying the protocol. – nneko Nov 16 '15 at 14:40
  • Thanks. So is // relative to root? i.e. the same as /. – v3nt Nov 19 '15 at 16:32
  • @danielCrabbe yes it is the same as /. However, since the URL string is expected to be in the format :// I think we still need the // but it may work with just / – nneko Nov 20 '15 at 14:36
  • 1
    `type: 'POST'` with `jsonp`? that makes no sense. the `type` is likely getting ignored. – Kevin B Feb 22 '16 at 20:40
  • 2
    @KevinB the solution still holds. However, if you do have a better answer then post it or show where this one could be improved. It is far more useful and educational to others to explain why the type field may be ignored or not applicable with the jsonp datatype than to simply post a one line to say it doesn't make sense – nneko Feb 25 '16 at 21:26
  • JSONP requests are sent by appending a – Kevin B Feb 25 '16 at 21:31
  • @nneko Thanks so much for this explanation, I've been looking for this info all over the internet! i was wondering how come a library I'm using is able to make a client-side request, while Mailchimp claims that it doesn't support it. You summed up everything I wanted to know very nicely! – silvenon Dec 23 '20 at 19:52
8

  1. Obtain the URL for the list by selecting the List > Sign Up forms > (Classic form). You will find it on the 'Copy/paste onto your site' textarea and it will most likely begin with your username.

    $('#your-form').submit(function (e) {
    e.preventDefault();

    $.ajax({
        url: 'YOUR URL',
        type: 'GET',
        data: $('#your-form').serialize(),
        dataType: 'jsonp',
        contentType: "application/json; charset=utf-8",
        success: function (data) {
           if (data['result'] != "success") {
                //ERROR
                console.log(data['msg']);
           } else {
                //SUCCESS - Do what you like here
           }
        }
    });
});
Nagra
  • 1,529
  • 3
  • 15
  • 25