How to add a Mailchimp signup form in Webflow

18
May
2019
How to add a Mailchimp signup form in Webflow

Are you launching a new product or service? If so, you should consider email marketing. For the last 10 years, email still generates the highest ROI for marketers. For every $1 spent, email marketing generates as high as $38 in ROI.

If you are looking for the best solution for email marketing and how to integrate with Webflow, Mailchimp is one of the most straightforward tools to use in the market.

In this article, I am going to walk you through how to integrate Mailchimp and Webflow.

Add a form in Webflow

Open Designer and add a Form Block into your artboard like below.

Add a Form Block in Webflow
Add a Form Block in Webflow

Make sure that at least the email input field is set to Required and the form field name matches what Mailchimp uses.

In this example, we make both Name and Email fields compulsory. The first name field is set to FNAME, and email field name to EMAIL.

Note: Input names can be case-insensitive. For example, the names could be fname or email.

Name email field to EMAIL and select Text Type to Email
Name email field to EMAIL and select Text Type to Email

Grab the form action link

Head to Mailchimp website and log into your account.

Navigate to Audience page and select the list you want to connect to your form.

Select Signup forms from the Manage Audience dropdown menu.

Select Signup forms from the Manage Audience dropdown menu
Select Signup forms from the Manage Audience dropdown menu

Copy the Embedded forms code and paste it into your text editor.

Copy the forms code and paste it into your text editor

Search for "form action" to find the form action URL. In this example, the action URL starts with https://joechiang.us2...

Search "form action" to find the form action URL
Search "form action" to find the form action URL

Configure the form

Head back to Webflow and open your project.

Select the form and open the settings.

Paste the action URL into the Action field, also select POST from the Method dropdown.

Configure the mailing form in Webflow
Configure the mailing form in Webflow

Then, publish the site 🚀!

Test and celebrate 🙌


Test Webflow form with MailChimp integration
Test Webflow form with Mailchimp integration