Create a Mailchimp signup form using Webflow Logic

Mailchimp allows you to create and send marketing emails, newsletters and targeted campaigns and this guide is going to show you how to use Webflow Forms and Webflow Logic to create a newsletter signup form.

‍

Prerequisites

You will need to have a current Mailchimp account and a Mailchimp audience as well as a form on your Webflow site with a required Email field.

‍

Create a Mailchimp API key

1. Go to your Mailchimp dashboard

2. Click on your profile icon and click Account & billing

3. Go to Extras > API keys

4. Click Create a key

5. Copy and save the API key for later.

‍

Get your Mailchimp audience ID

1. Return to your Mailchimp dashboard

2. Go to Audience > All contacts

3. If you have more than one Mailchimp audience, click the Current audience dropdown and choose the audience you want to connect to your Webflow site

4. Click the Settings dropdown and choose Audience name and defaults

5. Copy your Audience ID

‍

Create a Webflow Logic flow

1. Open your site in the Webflow Designer in a new tab

2. Select your form block on the Designer canvas and open Form block settings

3. Click the Source dropdown and choose Logic

4. Click Add new flow

5. Give your new flow a name (e.g., “Add subscriber to Mailchimp newsletter”) in the Name field and add a description to the Description field if you’d like

6. Drag a Make HTTP request block to the flow editor canvas and give it a name (e.g., “Send request to Mailchimp”)

7. Choose API token from the Authentication dropdown

8. Choose Header from the Add to dropdown

9. Enter “Authorization” in the Header field

10. Click Select a credential > Add new credential

11. Give your API token a name (e.g., “Mailchimp API token”) in the Name field and add a description to the Description field if you’d like

12. Enter “Bearer {API key}” in the Token field, replacing the {API key} with the API key you copied from Mailchimp

13. Click Create to save your new credential and keep this tab open!

‍

Setup the HTTP request

The HTTP request you configure in this step will create a new subscriber in Mailchimp each time a site visitor submits your subscription form.

1. Click the Request method dropdown and choose POST

2. Paste https://{dc}.api.mailchimp.com/3.0/lists/{list_id}/members in the URL field, replacing the {dc} with the data center from your Mailchimp URL and the {list_id} with the audience ID you copied from Mailchimp

3. Paste the following in the Body field:

{
	"email_address": "",	
    "status": "subscribed"
}

4. Place your cursor between the empty quotation marks in the Body field

5. Click the purple “dot” icon and choose your Email form field

‍

Test and publish your flow

1. Click Run test to complete setup

2. Enter a sample email address in the corresponding input field

3. Click Run test

4. Click Cancel or Apply data to exit the test modal

5. Click Publish

6. Click Stage flow for publish

7. Publish your site

‍

Note: This how-to guide was originally posted on Webflow Support.