C00 - Adding a form with MailChimp - Webflow Academy 大師班

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

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.

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

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 Webflow form with Mailchimp integration