Add subscribers to Mailchimp with Webflow Logic

Use Logic’s Make HTTP request block to collect contact information and register new subscribers on Mailchimp.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

With Mailchimp, you can create and send marketing emails, newsletters, and targeted campaigns. Logic lets you register new subscribers on Mailchimp from your Webflow site, seamlessly linking two major parts of your marketing strategy.

Before you get started: If you haven’t already, create a Mailchimp account and a Mailchimp audience. You’ll also need to add a form to your Webflow site and add a required field with Text type: email where site visitors can subscribe. 

In this lesson, we’ll cover: 

  1. How to create your Mailchimp API key
  2. How to set up your Logic flow’s authentication
  3. How to get your Mailchimp audience ID
  4. How to set up your HTTP request
  5. How to test and publish your flow
  6. How to troubleshoot issues with your flow

How to create your 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 your new API key and keep this tab open!

How to set up your Logic flow’s authentication

  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! 
Pro tip: You can also connect your form to a new Logic flow from the Logic panel > Flows tab. Learn more about form submission triggers in Logic
Options to Add a new flow or Browse flows appear in Form block settings when Logic is selected as the source.
The authentication dropdown displays three options: None, API token, or Username & password. 
“Header” is chosen in the Add to dropdown and “Authorization” is entered in the Header input field.
The “New credential” modal window displays fields for the name, description, type, and value of an API credential.

How to 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
IMPORTANT: Take note of the first part of the URL on this page (e.g., us5, us6, etc.), which corresponds to the data center for your Mailchimp account — you’ll need to include this in your HTTP request.

How to set up your HTTP request

Now that you’ve created your Logic flow and Mailchimp authentication credentials, you’ll need to return to Webflow and set up an HTTP request in your flow. The HTTP request you configure in this step will create a new subscriber in Mailchimp each time a site visitor submits your subscription form. 

Note: If you closed the tab where your Webflow site was open, go to Logic panel > Flows tab and choose the flow you set up in the previous steps. Select the Make HTTP request block on the flow editor canvas to open block settings and complete the following steps.
  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": "pending"
}
  1. Place your cursor between the empty quotation marks in the Body field
  2. Click the purple “dot” icon and choose your Email form field 

How to 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: If you receive an error message while testing your flow, follow our troubleshooting steps, then retry the above steps. Learn more about testing HTTP requests.

How to troubleshoot issues with your flow

If you’re receiving an error when testing your flow, try the following:

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top