Laura Niebel Headshot | Laura Niebel Web Design

How to connect MailChimp to your Webflow website

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”.

Integrating MailChimp into your Webflow site - Screenshot 1
First choose "Custom Code" to do retrieve your individual code snippet

Integrating MailChimp into your Webflow site - Screenshot 2
Then enter your website URL to connect MailChimp and your Webflow site


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.

Integrating MailChimp into your Webflow site - Screenshot 3
Go to the Webflow site settings and copy the code in the "Head Code" section


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.

Integrating MailChimp into your Webflow site - Screenshot 5
Copy the URL that appears after the "form action" element


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.

Integrating MailChimp into your Webflow site - Screenshot 6
Select your form element in Webflow, go to the form settings and enter the URL you copied previously. Also select "POST" as the 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!


Back to all blog posts

This might also interest you...

Tuesday, October 8, 2019

Four great newsletters by and for designers and creatives

Email newsletters are dead! No, they're not! There are heaps of great newsletters out there to keep you reading and learning. In this article I have collected four of my favorite newsletters that land in my inbox regularly.

Read more...

Join the newsletter for Webflow & Web Design updates.

Thanks for subscribing! Your first newsletter will arrive in your inbox soon.
Oops! Something went wrong! Try again or get in touch via the form below, so I can add you manually!

Have questions or want to talk about a project idea?

Just send an email to laura.s.niebel@gmail.com or fill out the form below. I'm looking forward to hear from you!

Thanks! I'll get back to you as soon as possible!
Oops! Something went wrong while submitting the form. Please try again or contact me via email.