How to connect MailChimp to your Webflow website

As you might know I specialise in Webflow design and development (Haven't heard of Webflow before? You can check it out and sign up for an account here - yes, that's an affiliate link). Just recently after I set up the very blog you’re currently reading, I was asked by a member of the Webflow Designers (Global) Facebook Group if there was a way to receive updates as to when new blog post were released. It turned out that I hadn’t implemented this feature yet, so I checked Webflow’s University on how to do this. It turned out the tutorial video was already a little bit older and MailChimp’s UI had changed since it was recorded. It also looks like a couple of essential steps have been skipped. So here comes an updated version of how to quickly implement a MailChimp subscription form on your (or your client’s) Webflow site.

Step 1: Create your own MailChimp account

Step 2: Connect your Webflow site with MailChimp

After logging into MailChimp, navigate to the “Audience” menu options and choose  “Connect a Site”. Go to “Custom Websites”, enter your website URL (in my case this would be http://www.lauraniebel.com) and press “Get Code”.

‍

‍

Step 3: Copy the code MailChimp generated and copy it into your Webflow site

Got to your Webflow site settings, navigate to “Custom Code” and copy your MailChimp code into the “Header Code” section. Save your changes and return to your MailChimp account. Return to your “Connected Sites” page in MailChimp and press “Check Connection”. If there are no error messages you’re good to move on.

‍

Step 4: Retrieve the MailChimp “Action” code

On the MailChimp site, navigate to the “Audience” menu option once again and access the “Manage Audience” Drop Down menu. Here’s where you’ll find the option “Signup Form”. You can now select “Embedded forms” and copy the code displayed into a text editor. Here you can search for the phrase “form action”. Copy the URL that appears afterwards to your clipboard. You can see an example in the screenshot below.

‍

‍

Step 5: Insert the MailChimp “Action” code into your Webflow form

Build your subscription form in Webflow and make sure there’s a field for an email address and name. Select the form element in your navigator and copy the “form action” code into the action field in your Webflow settings (see screenshot). Make sure you choose “post” as your method.

‍

Step 6: You’re done! Publish your site!

You can then test your form by entering an email address of your choice into your Webflow form on your live site and checking in your MailChimp account under “Audience” → “Manage Contacts” if the email address appears in the list.

That’s it! Need more help? Get in touch if you need a hand setting this up!