Mailchimp

Webflow handles site design, CMS content, and hosting, but it lacks built-in email marketing, audience management, and automated campaign delivery. Form submissions stay locked in Webflow's database with no native way to route them into an email list, apply subscriber tags, or start a drip sequence.

Connecting Mailchimp closes that gap by flowing submissions into audiences that can trigger welcome sequences, apply segmentation tags, and feed behavioral automations. This integration fits marketing teams running newsletter signups, e-commerce operators building post-purchase flows, SaaS founders automating trial onboarding, and agencies shipping Webflow sites with email capture built in.

How to integrate Mailchimp with Webflow

What is Mailchimp? Mailchimp is an email and SMS marketing platform owned by Intuit. It provides audience management, signup forms, marketing automations, campaign builders, and analytics for over 300 third-party app integrations. Mailchimp supports subscriber tagging, behavioral event tracking, and Customer Journey automations that trigger based on contact activity.

Teams connect Mailchimp with Webflow when they need form submissions to feed into an email list automatically. A blog might collect newsletter signups through an inline form. An e-commerce store might tag customers by product interest after purchase. A SaaS company might route trial signups into a multi-step onboarding sequence. The right integration method depends on how much control you need over subscriber data and automation triggers.

The Mailchimp-Webflow integration supports 3 approaches:

• Mailchimp signup forms let you embed forms, connect Webflow's native forms to Mailchimp's subscribe endpoint, or add popup forms without writing backend code.
• Automation platforms like Zapier and Make route Webflow form submissions to Mailchimp with tagging, conditional logic, and field mapping through a visual interface.
• The Webflow and Mailchimp APIs give you full control over subscriber syncing, CMS-triggered campaigns, and behavioral event tracking, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Add Mailchimp signup forms to your Webflow site

Mailchimp does not have an official app in the Webflow Apps Marketplace. The most direct way to connect the two platforms is to add Mailchimp's signup forms to your Webflow pages. This covers three sub-methods: embedding Mailchimp's generated HTML form, pointing a Webflow native form at Mailchimp's subscribe URL, and injecting a Mailchimp popup script. Each method costs nothing beyond your existing Webflow and Mailchimp plans, and none require backend code. All three require a paid Webflow site plan for access to custom code features.

Embed a Mailchimp signup form with a Code Embed element

Mailchimp generates a complete HTML form block for each audience. You paste that HTML into a Code Embed element in Webflow. The form posts directly to Mailchimp's subscribe endpoint, and Mailchimp handles validation, confirmation emails, and subscriber creation. This method works well when you want Mailchimp to control the form structure and validation behavior.

To embed the form:

1. In Mailchimp, go to Audience > Signup Forms > Embedded Forms.
2. Customize fields, tags, and settings, then copy the generated HTML.
3. In Webflow, drag a Code Embed element onto your page from the Add Elements panel.
4. Paste the Mailchimp HTML into the code editor and click Save & Close.
5. Publish your site. Custom code does not run in Webflow's preview mode.

The embedded form includes a hidden anti-bot field (the b_ field) that must stay in the code. Removing it breaks spam protection. Mailchimp's embed code also includes jQuery-based JavaScript for inline validation and success messages.

One common issue is CSS class collisions between Webflow's global styles and Mailchimp's form markup. If the subscribe button disappears, find div class="clear" in the embed code and replace it with class="show". Prefix all custom CSS selectors with #mc_embed_signup to prevent Webflow styles from overriding form elements. Full troubleshooting steps are available in Mailchimp's embedded form guide.

These steps keep Mailchimp in control of validation while letting you place the form directly inside your Webflow layout.

Connect a Webflow native form to Mailchimp's action URL

Instead of embedding Mailchimp's HTML, you can build the form in Webflow using a native Form Block element and point its action attribute at Mailchimp's subscribe endpoint. This gives you full design control over the form's appearance while still sending data to Mailchimp on submit.

To set up the connection:

1. In Mailchimp, go to Audience > Signup Forms > Embedded Forms and locate the action URL in the generated HTML. It starts with https://[youraccountname].us1.list-manage.com/subscribe/post?....
2. In Webflow, select the form container and open the Settings panel.
3. Change the form destination from Webflow to Custom action and paste the Mailchimp URL in the Action field. Confirm the URL begins with https://.
4. Set the form Method to POST.
5. Click each input element and set its Name attribute to match Mailchimp merge tags exactly: EMAIL, FNAME, LNAME.

Field name matching is case-sensitive. If names do not match Mailchimp's merge tags, the form appears to succeed but subscriber data arrives incomplete or empty. Always verify new subscribers in Mailchimp > Audience > All Contacts after setup.

When using a custom action URL, Webflow's built-in success and error form states do not display. Remove existing Webflow email notification destinations, since built-in submission storage cannot run simultaneously with a custom action URL.

This method is best when design control matters more than keeping Webflow's native success and error states.

Add a Mailchimp popup form with custom code

Mailchimp's popup signup forms appear as overlays triggered by timing, scroll depth, or exit intent. You add the popup by pasting a JavaScript snippet into your Webflow site's footer custom code (before </body>), accessed via custom code in head and body tags.

To add the popup:

1. In Mailchimp, go to Popup Forms, create a new popup, customize the design and targeting triggers, and click Publish to generate the JavaScript snippet.
2. For a site-wide popup: in Webflow, go to Site Settings > Custom Code and paste the script in the Footer Code field.
3. For a single-page popup: open the target page's settings, scroll to Custom Code, and paste the script in the Before tag section.
4. Save and publish your site.

Popup form design is controlled entirely within Mailchimp's editor. Popup forms delivered via iframe cannot be styled from Webflow's custom code due to browser same-origin policy. Google reCAPTCHA and GDPR consent fields cannot be enabled on popup forms.

This option works best when you want Mailchimp to manage targeting and popup behavior without changing your page layout.

Connect with Zapier or Make

Automation platforms sit between Webflow and Mailchimp, receiving form submissions from Webflow and routing them to Mailchimp with tagging, field mapping, and conditional logic. The key advantage over the action URL method: your Webflow form still submits to Webflow first, so native success and error states display correctly. Subscribers then sync to Mailchimp in the background.

Zapier and Make support direct Webflow-to-Mailchimp connections.

Zapier offers nine pre-built templates for Webflow and Mailchimp. The most popular is Update Mailchimp lists with new Webflow form data, which maps form submissions to Mailchimp audience fields in a few clicks.

To set up a Zapier connection:

1. In Webflow, open the Apps panel, search for Zapier, and click Add to Site.
2. In Zapier, create a new Zap with the trigger Webflow > New Form Submission. Connect your Webflow account and select your site and form.
3. Add the action Mailchimp > Add/Update Subscriber. Connect your Mailchimp account, select the target audience, and map Webflow form fields to Mailchimp audience fields.
4. Test the Zap and turn it on.

Zapier's Mailchimp action exposes additional fields not available in the native action URL method:

• Double opt-in toggle
• Tag assignment based on form responses
• Group management
• Update existing subscriber records matched by email
• Language code assignment

These options make Zapier a better fit when you need more than basic list signup behavior.

Make can handle the same routing pattern when the scenario uses explicit modules: Webflow > Watch Form Submissions to capture Webflow submission data, then Mailchimp > Add/Update a Subscriber to add that Webflow submission to your Mailchimp audience. This setup keeps the flow centered on direct Webflow-to-Mailchimp submission syncing while allowing field mapping and subscriber updates.

Automation platforms add submission latency of 30 seconds to 3 minutes between form submission and Mailchimp sync. For most email marketing use cases, this delay is not noticeable to the subscriber.

These tools are the best fit when you want no-code routing, tagging, and automation without building server-side infrastructure.

Build with the Webflow and Mailchimp APIs

For use cases that go beyond form-to-list syncing, the API path gives you full control. You can subscribe contacts in real time via webhooks, tag subscribers based on CMS content interactions, trigger Customer Journey automations from Webflow events, and sync e-commerce order data into Mailchimp's audience profiles. This approach requires server-side development because Mailchimp explicitly blocks client-side API calls via CORS. You need a serverless function or middleware server to proxy requests.

The relevant APIs are:

• The Mailchimp Marketing API handles subscriber management, tagging, segments, campaigns, automations, and behavioral events
• Webflow's Data API handles Webflow CMS collections and form submissions
• Webflow webhooks trigger real-time events between systems when forms are submitted, CMS items are published, or orders are placed

Together, these services let you capture events in Webflow and turn them into subscriber updates, tags, and automation triggers in Mailchimp.

All Mailchimp API calls use the base URL https://<dc>.api.mailchimp.com/3.0/, where <dc> is the data center from your API key. Authentication uses HTTP Basic Auth with the API key as the password. Webflow's API uses Bearer token authentication.

Sync form submissions to Mailchimp via webhooks

Register a Webflow webhook for the form_submission event. When a visitor submits a form, Webflow sends a payload containing all field data to your server endpoint. Your server then calls the Mailchimp API to create or update the subscriber.

To implement this:

1. Register the webhook using the Webflow API:

curl -X POST "https://api.webflow.com/v2/sites/:site_id/webhooks" \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "triggerType": "form_submission",
    "url": "https://your-server.com/webhook/mailchimp-subscribe",
    "filter": { "name": "Newsletter Form" }
  }'

The optional filter parameter limits webhook notifications to a specific form by name.

2. Extract the email and merge fields from the webhook payload's payload.data object.
3. Call Mailchimp's upsert endpoint to add or update the subscriber. The PUT method avoids 400 errors when the email already exists:

curl --request PUT \
  --url "https://<dc>.api.mailchimp.com/3.0/lists/{list_id}/members/{subscriber_hash}" \
  --user "anystring:YOUR_API_KEY" \
  --header "content-type: application/json" \
  --data '{
    "email_address": "user@example.com",
    "status_if_new": "pending",
    "merge_fields": {
      "FNAME": "Jane",
      "LNAME": "Doe"
    }
  }'

The subscriber_hash is an MD5 hash of the subscriber's lowercase email address. Set status_if_new to "pending" for double opt-in or "subscribed" for immediate addition.

Verify each webhook delivery using the x-webflow-signature header and a timing-safe HMAC-SHA256 comparison against your client secret. Reject payloads with timestamps older than 5 minutes to prevent replay attacks.

This pattern gives you reliable real-time syncing without relying on periodic polling.

Tag subscribers by form source or page

After upserting a subscriber, apply tags to segment them by which Webflow form or page they submitted from. Tags are the key capability that separates the API method from the basic action URL approach.

To add tags:

1. Compute the subscriber_hash (MD5 of the lowercase email) and upsert the member first.
2. POST to the tags endpoint:

curl --request POST \
  --url "https://<dc>.api.mailchimp.com/3.0/lists/{list_id}/members/{subscriber_hash}/tags" \
  --user "anystring:YOUR_API_KEY" \
  --data '{
    "tags": [
      {"name": "webflow-signup", "status": "active"},
      {"name": "pricing-page", "status": "active"}
    ]
  }'

Setting "status": "active" applies the tag. Setting "status": "inactive" removes it. You can derive tag values from the form name or page URL in the Webflow webhook payload.

With tagging in place, one Mailchimp audience can support multiple signup sources and automation paths.

Trigger Mailchimp automations from CMS events

When a Collection List item is published in Webflow, you can trigger a Mailchimp Customer Journey to notify subscribers about new content. This requires a Webflow webhook for the collection_item_published event and a Mailchimp Customer Journey with an API trigger starting point.

To implement this:

1. In Mailchimp, create a Customer Journey with a "Customer Journey API condition" starting point. Note the journey_id and step_id values Mailchimp generates.
2. Register a Webflow webhook for collection_item_published.
3. In your server-side handler, verify that isDraft is false and isArchived is false in the payload before proceeding.
4. POST to the Customer Journey trigger endpoint:

curl --request POST \
  --url "https://<dc>.api.mailchimp.com/3.0/customer-journeys/journeys/{journey_id}/steps/{step_id}/actions/trigger" \
  --user "anystring:YOUR_API_KEY" \
  --data '{ "email_address": "subscriber@example.com" }'

The CMS webhook payload contains content metadata, not subscriber emails. Your middleware must maintain the mapping between CMS content and the subscriber emails that should receive notifications.

For bulk subscriber operations, use Mailchimp's Batch endpoint (POST /batches) to subscribe hundreds of contacts in a single API call instead of hitting connection limits with individual requests.

This approach is most useful when Webflow content changes need to drive Mailchimp journeys or larger sync jobs.

What can you build with the Mailchimp Webflow integration?

Integrating Mailchimp with Webflow lets you turn site visitors into segmented email subscribers without managing separate data pipelines or manual exports.

• Newsletter signup with automated welcome series: Add an inline signup form to your Webflow blog or homepage that feeds subscribers into a Mailchimp audience. New subscribers receive a multi-step welcome sequence with links to your best content, product overview, or onboarding steps.
• Event registration with confirmation and reminders: Build an event page in Webflow with a registration form that syncs attendee data to a tagged Mailchimp audience. Zapier or Make routes each submission and triggers automated confirmation emails, event reminders, and post-event follow-up sequences.
• Segmented lead capture across landing pages: Create separate Webflow landing pages for different audiences (enterprise, startup, agency) with individual forms. Using Zapier or the API, apply different Mailchimp tags per form so each segment receives a targeted nurture campaign from the same Mailchimp audience.
• Content-triggered campaigns from CMS updates: Publish a new blog post or product in the Webflow CMS and trigger a Mailchimp campaign automatically via webhook. Your server-side handler reads the CMS item data, populates the campaign content, and sends to the relevant subscriber segment.

If you need more control over e-commerce order syncing, behavioral event tracking, or multi-step automation triggers, the API integration path covers those cases with full flexibility.