How to add a Mailchimp signup form in Webflow

DAte

19 May 2019

Category

Web

Web

Web

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

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

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

Copy the Embedded 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

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

Then, publish the site 🚀!

Test and celebrate 🙌



Test Webflow form with MailChimp integration

Related Articles

Web

Want to take advantage of Google Tag Manager to easily add analytics and tracking codes? Learn how to install and setup Google Tag Manager in Webflow.

Web

Want to take advantage of Google Tag Manager to easily add analytics and tracking codes? Learn how to install and setup Google Tag Manager in Webflow.

Web

Want to take advantage of Google Tag Manager to easily add analytics and tracking codes? Learn how to install and setup Google Tag Manager in Webflow.

Web

Learn how to seamlessly integrate Mailchimp signup forms with Webflow in this detailed guide. This article provides step-by-step instructions to help you enhance your website's functionality and streamline your email marketing efforts with ease.

Web

Learn how to seamlessly integrate Mailchimp signup forms with Webflow in this detailed guide. This article provides step-by-step instructions to help you enhance your website's functionality and streamline your email marketing efforts with ease.

Web

Learn how to seamlessly integrate Mailchimp signup forms with Webflow in this detailed guide. This article provides step-by-step instructions to help you enhance your website's functionality and streamline your email marketing efforts with ease.

Web

Learn how to seamlessly add Adobe fonts to your Webflow projects with this step-by-step guide.

Web

Learn how to seamlessly add Adobe fonts to your Webflow projects with this step-by-step guide.

Web

Learn how to seamlessly add Adobe fonts to your Webflow projects with this step-by-step guide.

©2024 CRAFTED WITH CARE BY STUDIO JC

English

©2024 CRAFTED WITH CARE BY STUDIO JC

English

©2024 CRAFTED WITH CARE BY STUDIO JC

English