Using the MailChimp API to Collect Email Signups

MailChimp provides several very simple ways to get a mailing list signup on your website. You can provide a link to users to a signup page in the MailChimp domain, you can trigger a popup with a signup form, or you can embed a form on your site. All of these methods work great and are fairly simple to set up, but have one major drawback — large third-party javascript requests which increase your page load time. If you’re concerned about page speed, you’re going to want to use the off-site link method. If you’re concerned about engagement, you’re going to want to keep users on your page. What if I told you there is a way to avoid third-party javascript requests and build an inline signup form to grow your MailChimp list?

Introducing MailChimp’s API

MailChimp provides a robust and approachable API which all account levels have full access to. There is a lot you can do — manage files, manage subscribers, create lists, start campaigns, trigger automation flows, even run all kinds of reports. However, there isn’t a whole lot of information out there on practical applications of the API. Let’s start simple and use the API to create a form which will collect email addresses and add them to a mailing list.

Building The Form

The rest of this guide assumes two things, that you have a MailChimp account and you know how to FTP a PHP file. If you don’t have a MailChimp account, you can sign up for one here. MailChimp is our top recommendation for an email service provider — it works great for one-person teams, small companies and is even a good fit for some large companies. If you don’t know how to FTP a PHP file, you may have a hard time getting this to work so feel free to leave any questions you have in the comments or email me at cris@nobleintenstudio.com.

Step 1: Create a List

After you log in to your MailChimp account, create a new list.

Step 2: Create an API Key

In order to interact with the MailChimp API, you’re going to need to generate an API key. Follow these instructions to create your API key. Make note of this key because you will need it later. Never ever post your API key on the internet or give it to someone you don’t trust. This API key is as powerful as your MailChimp login credentials.

Step 3: Collect More Variables

You need to figure out what datacenter your account is setup for (don’t worry this part is easy). Just look at the url of your browser while you’re logged in. It should begin with https://usX.admin.mailchimp.com. Whatever that usXX field is for you is your datacenter. Mine is us6.

Now you need to determine the ID of your mailing list. The only way I’ve found to do this is by going to the API playground, entering your API key, then clicking on “Lists”. You should see the list that you created in Step 1. Click on the list, and take note of the “id”.

At this point in the game you should be able to fill out the following list with your own values. I have filled it in with mine, so anytime you see one of my values in the code snippets, substitute it for your own.

Step 4: Create the Necessary HTML

Here is a bare minimum html stucture that will render a simple form. It will validate that the email looks like an email, require that the email field is filled out, and work even if javascript is disabled in the browser. The one piece of the code that you will need to change is the ACTION=”./endpoint” attribute. It should be wherever your PHP will live, covered in the next step.

Step 5: Create the PHP File

The PHP file will talk directly to the MailChimp API and will do the bulk of the work of adding a subscriber to your list. It will also return the JSON which MailChimp returns back to the front-end javascript so that we can provide some rudimentary error handling. You need to upload this file to a webserver. Wherever you upload the file to, you need to change the ACTION=”./endpoint” attribute in your html to point at this php file on your server.

Step 6: Use jQuery to Submit the Form

The form will work without javascript, but it works a whole lot better with a touch of jQuery. With this little javascript snippet we are preventing a page refresh, sending the form data, and then telling the user what happened based on the response from the PHP file.