Damian ConnollyDamian Connolly

Dealing with double signups on MailChimp

MailChimp is great. If you need to have an email list for whatever reason, its features and ease of use make it a no-brainer. It's also free for up to 2000 subscribers, so its even better when you're starting out and every penny counts.

One of the downsides of MailChimp is that, while it's great for sending emails and creating a list of subscribers, it's not really made for managing subscribers.

Ever put your email into a site and get faced with something like this?

The error presented when you're already subscribed to a list

While it's not actually an error, it doesn't look good. It's hard enough trying to get people to signup to your list without making them feel bad when they do it.

Or perhaps you're giving users an incentive for signing up. Multiple incentives mean multiple signups, and each time someone tries to access what you're giving them, they're getting a big, red error in the face.

Enter the API

MailChimp, like all awesome web companies, provide an API so that if you feel the need, you can get down and dirty and tinker with the innards, getting the flow that you're looking for.

The MailChimp API is really powerful, giving you full access over pretty much everything possible (I haven't gone all the way through it, so give me the benefit of the doubt here). If you wanted to, you could make your own signup flow, from start to finish, meaning users would never have to leave your site at all.

But there's no need for all that, we just need to know if someone's already on your list.

The flow

For this to work, we're using the assumption that you can redirect the user to the content in question if they're already signed up. Of course, you could probably just trigger an email to be sent with the content, but this post doesn't cover that.

The previous signup flow was something like this:

  1. User enters details and submits form
  2. MailChimp page opens
  3. If they haven't signed up, then they see the message to check their email, otherwise they get the error above

Our new flow:

  1. User enters details and submits form
  2. We stall the form submission and query the MailChimp API to see if the user is already signed up
  3. If yes, we redirect them to the content, if no, we submit the form as normal

As an added bonus, we can also return their status - if they're a confirmed subscriber or if they still have to confirm their email. In the latter case we can show them up a message telling them so. In the code, I've chosen to allow them access to the content anyway, but you can change that if you wish.

The only snag to the above plan, is popup blockers. If you're not technically minded, or you don't care, then you can skip the rest of this section.

Basically when the form is submitted, by default we have it open a new tab/window. This is allowed because a form submission (with a click) is a trusted event. Trying to open a window from outside of a click, or trusted event, means that you'll almost certainly get blocked by your browser's popup blocker.

So why is this a problem?

Because checking with the API to see if a user is already signed up takes time. Which means by the time we get the answer back, we're no longer in the click event, and so when we submit the form, it'll get blocked.

Not good.

We could have the form submit on the same page, but this brings the user away from our site, and is pretty sucky UX.

So our new flow goes like this:

  1. User enters details and submits form
  2. We stall form submission, and immediately open an intermediate page. As we're in a trusted event, this doesn't trigger the popup blocker
  3. On this new page is another, hidden, form, and a message telling the user that we're doing some work.
  4. We fill the hidden form on page2 with our data from page1
  5. Query the MailChimp API to see if the user is already signed up
  6. If yes, then we simply redirect page2 to the content. If no, then we submit the hidden form on page2, this time setting it to submit on the same page

It's a little more complicated, but I'd rather complicate the process a bit to get a better user flow.

The code

You'll find everything you need as a proof of concept attached at the end of the post. The grunt work is in the PHP and JS files.

To make this work, you'll need a few bits of info:

To get your API key, log into MailChimp, click on your image in the top right, and go to Account. Click on the Extras dropdown, then API keys. Then, simply click Create A Key to get your API key.

NB! Do NOT give your key to anyone! This keys gives full access to your lists, meaning that someone can add/remove or delete the entire thing. Keep it safe at all times!

Once you have your API key, the last 3 characters are also your data center.

To get your list ID, simply go to the list in question, then click on the Settings dropdown and go to List name and defaults. There, in red, on the right hand side, under List ID is the ID that you want.

Fill these in the PHP file.

You'll also need to update the forms so that they match the forms for your particular list. You can get the relevant info from your List > Signup forms > Embedded forms and copying the relevant parts from the embed code provided.

There's a README in the zip file with more details, but if you've any questions, get in touch!

Share this

Share
Get all the code to make this work

Get all the code necessary to make this work

HTML, CSS, JS, and PHP are waiting for you. Everything you need to never get a double-signup error again

Download