MailChimp JSON API

Not many people know you can request JSON from the MailChimp API in order to show different status messages on your own site, rather than being redirected to one of MailChimp's pages. If you use one of their embed forms, a successful sign up is taken to a thank you page away from your site. The same happens for an email address already on the marketing list, you get taken to a MailChimp hosted page.

Here, I'll show you how to change the embed code MailChimp gives you to request their JSON API instead.

Requesting the JSON endpoint

First we must update the URL parameters to get a different response. The final URL should look something like this:

http://xxxxx.us#.list-manage1.com/subscribe/post-json?u=xxxxx&id=xxxx&c=?

The key differences being:

Change /post?u= to post-json?u=
After the ID, add &c=?

And that's it! Now you can send an AJAX request to that endpoint and get JSON back to display however you like on the page.

MailChimp ES6 Class

Here's a simple ES6 Class for you to use now you're getting data back from MailChimp.

class MailChimpForm {
    constructor(form) {
        this.form = $(form)
        $(form).on("submit", this.submit)
    }

    submit = (e) => {
        e.preventDefault()
        // Validation to go here
        this.register(e)
    };

    register = (e) => {
        $.ajax({
            type: $(e.currentTarget).attr("method"),
            url: $(e.currentTarget).attr("action"),
            data: $(e.currentTarget).serialize(),
            cache: false,
            dataType: "jsonp",
            jsonp: "c",
            success: function (data) {
                if (data.result != "success") {
                    $(".message").html(data.msg)
                } else {
                    $(".message").html(data.msg)
                }
            },
            error: function (err) {
                alert(
                    "Could not connect to the registration server. Please try again later."
                )
            }
        })
    }
}

$('[name="mc-embedded-subscribe-form"]').map((i, form) => {
    new MailChimpForm(form)
})

Things to be aware of

It's probably worth noting, you'll have to do your own validation on the frontend now that MailChimp doesn't do it for you.

The response will also send back error messages for things like 'not an email address' or 'This user is already subscribed'. The 'Already subscribed' response will come with a link for the user to manage their communication preferences. Just be sure this opens in a new tab so you're not taking people away from your site.