Or, how to create your own site-hosted unsubscribe form using the Gravity Forms MailChimp Add-in.
A technical post today, showing how I implemented this on The Buchan Institute’s website.
MailChimp’s basic visual editor forms can be nicely formatted to look like most of your site, and have custom redirects for success pages. If however, like me, you have a single instance where you want to customise the emails based on a subscriber’s source (offer a freebie download), then you have to use the advanced forms. Sadly these are basic, ugly forms that won’t look anything like your site without a lot of work. Even then they will be mostly static.
In most cases, you can get away with a simple HTML redirect to your own page such as the one on my signup thank-you page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Thank You Redirect</title>
<meta http-equiv="REFRESH" content="0;url=http://buchaninstitute.com.au/thank-you-for-signing-up/"></HEAD>
<BODY style="background:#ede9e4 url(http://buchaninstitute.com.au/wp/wp-content/arjuna-x/images/bg/gradient_khaki.png) repeat-x 0 0;">
</BODY>
</HTML>
When the subscribe confirmation link in an email is clicked, it goes to this page which immediately redirects back to a prettier version on my site.
But if you need some interaction, such as with the unsubscribe form, it’s trickier. Here’s my solution. I hope it helps others, or even better still, prompts a superior solution. It assumes you are creating forms in advanced mode within MailChimp.
Step 1: Get a a sample unsubscribe link for your list.
I got mine from a test campaign email for one of my test users. Take a copy when the email arrives. It looks like this.
http://buchaninstitute.us2.list-manage.com/unsubscribe?u=XXXXXXXXXXXXXXXXXXX&id=YYYYYYYYYYYYYY&e=&c=ZZZZZZZZZZZZZZZ
The XXXXXX…, YYYYYY… and ZZZZZZ… strings have been stripped out so you don’t have access to my list. The first two are constant for a list and we’ll take advantage of that later. The last (ZZZZZZ…) is unique to a subscriber and this is why you can’t just call an unsubscribe link on MailChimp. You need this number matched to its email.
Step 2. Replace the unsubscribe form with a javascript redirect to a page on your site.
This time you need javascript to capture the query parameters needed to identify the user to unsubscribe. When a user clicks unsubscribe in their email, they are directed to MailChimp. We want to redirect back to our site, passing through the query parameters containing the ‘c’ identifier.
This code has been inserted on my MailChimp unsubscribe form.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><script type="text/javascript">
<!--
window.location = "http://buchaninstitute.com.au/unsubscribe/?" + window.location.search.substring(1);
//-->
</script>
</head>
<BODY></BODY>
</html>
Point the first part of the window.location string to your unsubscribe page (to be created). Here it is the http://buchaninstitute.com.au/unsubscribe.
Step 3: Create your unsubscribe form
This is my basic form layout.
‘Email address’ is obviously a required field. ‘MailChimp-c’ is a hidden field set to take the ‘c’ parameter from the unsubscribe redirect above.
With this in place, we now finish the form. When submitted, it needs to go back to mail chimp.
Again, I’ve hidden my codes. You will need to insert them for your list. You may also find it’s {MailChimp-2} in your case. I had an earlier field in there during testing which bumped the number up. Importantly, ensure you have the trailing ‘/post’ in the URL or you will loop back to your own unsubscribe page (experience talking).
Step 4: Attach your form to your unsubscribe page
This is basic Gravity Forms stuff so I’m going to assume you can do this.
Step 5: Picking up the pieces
The unsubscribe confirmation email will link back to the MailChimp form. All you need to do here is edit it to point to your unsubscribe form instead.
Closing comments
MailChimp is ever evolving and hopefully it will improve this in the future. Until then, this is the solution I’m going with. It should also be transferable to the ‘Update Profile Form’. Here I want to do the same but hide the field I use to track a subscriber’s source.
