Mailchimp Forms
Connect Mailchimp Forms with Webflow to capture leads and grow your email list through native form integration.

How to integrate Mailchimp Forms with Webflow
Growing your email list directly from your site requires connecting form submissions to your Mailchimp audience. Webflow supports three integration methods depending on your technical requirements and workflow needs.
You can send form submissions to Mailchimp using native Webflow Form actions for basic newsletter signups, embed Mailchimp's generated form code for Mailchimp-specific features like GDPR fields, or build custom integrations with the Mailchimp Marketing API for advanced automation and multi-step workflows.
Use native Webflow Form actions
Webflow's built-in Mailchimp integration sends form submissions directly to Mailchimp audiences through form actions. This method works for newsletter signups, contact forms, and lead capture without middleware services or custom code. Setup happens entirely in Webflow and Mailchimp's audience settings.
Copy the action URL from Mailchimp's Audience > Signup forms > Embedded forms section and paste it into Webflow's form settings. When visitors submit forms, Webflow sends data directly to your specified Mailchimp audience.
Setup requirements:
- Copy the action URL from Mailchimp's Audience > Signup forms > Embedded forms section
- Configure form method to
POST(notGET) in Webflow form settings - Match field names exactly to Mailchimp merge tags:
EMAIL,FNAME,LNAME(case-sensitive) - Add hidden fields for source tracking or subscription preferences
- Test double opt-in to verify confirmation emails arrive and subscribers appear in your list
Form submissions require exact field name matching between Webflow fields and Mailchimp merge tags. Custom merge fields in Mailchimp need corresponding Webflow form fields with identical names. The native integration handles text inputs, email fields, and hidden fields but doesn't support conditional logic or multi-step forms.
Important: When you add a Mailchimp action URL to your Webflow form, you lose Webflow's native form notification emails. You can't receive both Webflow email notifications and send to Mailchimp simultaneously using this method. To receive form data in both Mailchimp and your email, use a third-party automation tool like Zapier or Make.com.
Embed Mailchimp form code
Mailchimp's form builder generates embeddable code you can place in Webflow using custom Code Embed elements. This method gives you access to Mailchimp's form styling options, conditional fields, and popup templates.
Generate form code in Mailchimp's Audience > Signup forms section, then paste it into a custom Code Embed element in Webflow. This approach works when you need Mailchimp-specific features like built-in GDPR fields or want to use Mailchimp's styling without recreating it in Webflow.
Embed options:
- Classic embed displays form fields vertically with default Mailchimp styling
- Condensed layout reduces spacing and uses compact field arrangements
- Horizontal forms arrange email and submit button side by side for header or footer placement
- Popup forms trigger based on visitor behavior like scroll depth or exit intent
- Landing pages host forms on Mailchimp's domain with your custom branding
Embedded Mailchimp forms include their own CSS, which may conflict with Webflow styles. You can override Mailchimp's default styling by targeting form classes in Webflow's custom code, but native Webflow forms provide more direct styling control.
Use embedded forms when Mailchimp-specific functionality outweighs styling flexibility needs.
Build with Webflow and Mailchimp APIs
The Mailchimp Marketing API enables programmatic audience management, contact updates, and webhook integration for real-time form processing. This approach fits scenarios where you need custom validation, multi-step form flows, or integration with additional services before adding contacts to Mailchimp. The API documentation covers authentication, endpoints, and rate limiting.
API integration requires a middleware layer, typically serverless functions or an external server, because Webflow's frontend can't securely store API keys. When forms submit, your server validates data, calls Mailchimp endpoints, and handles error responses. Webflow's Forms API retrieves form submissions programmatically, while webhooks notify your server in real-time when forms submit.
Add contacts to audiences
Use the Add member to list endpoint (POST /lists/{list_id}/members) to add contacts to specific audiences. This method lets you set subscription status (subscribed, pending, or unsubscribed), add tags, assign interest groups, and include custom merge field data beyond what native integrations support.
Set up a serverless function that receives Webflow form submissions, validates email addresses, and calls Mailchimp's API. The Add member endpoint accepts contact details, merge fields, and marketing preferences in a single request.
Implementation pattern:
- Receive form data via Webflow webhook sent to your serverless function endpoint
- Validate email format and check for required fields before API calls
- Call Mailchimp API with contact details, merge fields, and subscription status
- Handle duplicate contacts using the
update_existingparameter or PATCH requests - Return success/error responses back to Webflow for user feedback
Authentication:
Mailchimp supports two authentication methods. API key authentication uses a server-side key formatted as {key}-{dc}, where dc identifies your data center (visible in your Mailchimp account URL). OAuth 2.0 provides user-level permissions for applications that manage multiple Mailchimp accounts.
Manage tags and segments
Tags organize contacts within audiences without creating separate lists. Use the List member tags endpoint (POST /lists/{list_id}/members/{subscriber_hash}/tags) to add multiple tags in a single request. This enables form-based segmentation where you tag contacts based on form responses, source pages, or hidden field values.
Combine tags with Mailchimp segments to create dynamic groups that update automatically. When you tag new subscribers with "webinar-interested" based on a form checkbox, any segment targeting that tag includes them automatically. The Tags API reference documents batch operations and tag removal.
Use cases:
- Tag with "
homepage-form" or "blog-sidebar" based on form location for source tracking - Add interest tags corresponding to checkboxes selected in Webflow forms for interest categorization
- Assign tags representing engagement levels or qualification criteria for lead scoring
- Target specific subscriber groups with relevant content through campaign segmentation
Process webhooks for real-time sync
Webflow webhooks notify your server when forms submit, enabling immediate processing without polling the Forms API. Create webhooks using POST /sites/{site_id}/webhooks with form_submission as the trigger type. Your endpoint receives form data, validates the HMAC signature, and processes submissions in real-time.
Verify webhook authenticity using the webhook signature validation process. Webflow includes x-webflow-signature and x-webflow-timestamp headers that you hash with your webhook secret to confirm requests originate from Webflow.
Webhook workflow:
- Create webhook pointing to your processing endpoint with
form_submissiontrigger - Validate signature using HMAC SHA-256 with timestamp and request body
- Parse form data from the webhook payload's submitted fields
- Call Mailchimp API to add or update contacts based on form responses
- Log results for debugging and monitoring subscription success rates
Security:
Webhook endpoints need signature validation to prevent unauthorized requests. Attackers could send fake form submissions without validation. The webhook secret generates signatures that only Webflow knows, confirming request authenticity.
What you can build
Integrating Mailchimp Forms with Webflow enables newsletter signups, lead capture forms, event registration systems, and content upgrade downloads that grow your email list directly from your site.
- Newsletter signup forms: Add email collection forms in footers, sidebars, or popups that automatically subscribe visitors to your Mailchimp audience, triggering welcome emails and automated campaigns based on subscription source.
- Gated content delivery: Create resource libraries where visitors exchange email addresses for downloadable guides. Requires setting up Mailchimp automation to send the download link and add contacts to nurture sequences.
- Event registration pages: Build landing pages with registration forms that capture attendee details and segment contacts by event type. Requires configuring Mailchimp automations to send reminders leading up to the event date.
- Multi-step lead qualification: Design forms that collect progressive information across multiple pages, tagging contacts based on responses to route them into specific Mailchimp segments for targeted follow-up campaigns. This requires custom API integration with middleware server—an advanced implementation beyond native form integration capabilities.
Frequently asked questions
Form submissions fail to sync when field names don't exactly match Mailchimp merge tags, the form method uses
GETinstead ofPOST, or double opt-in requires confirmation. Check your form action settings to verify the action URL,POSTmethod, and exact field name matching (EMAIL,FNAME,LNAMEare case-sensitive).Double opt-in means subscribers must click a confirmation link in the email Mailchimp sends before appearing in your audience. This prevents invalid email addresses but adds a step between form submission and list addition. If you don't see subscribers immediately, check whether double opt-in is enabled in Audience > Settings > Audience name and defaults in Mailchimp. Test with your own email address to confirm the confirmation email arrives and contains a working link.
Form submissions fail to sync when field names don't exactly match Mailchimp merge tags, the form method uses
GETinstead ofPOST, or double opt-in requires confirmation. Check your form action settings to verify the action URL,POSTmethod, and exact field name matching (EMAIL,FNAME,LNAMEare case-sensitive).Double opt-in means subscribers must click a confirmation link in the email Mailchimp sends before appearing in your audience. This prevents invalid email addresses but adds a step between form submission and list addition. If you don't see subscribers immediately, check whether double opt-in is enabled in Audience > Settings > Audience name and defaults in Mailchimp. Test with your own email address to confirm the confirmation email arrives and contains a working link.
Embedded Mailchimp forms include default CSS that may conflict with Webflow styles. Target Mailchimp's form classes using custom CSS in Webflow's Site settings > Custom code or in an embed element wrapping the form. The form builder styling options let you adjust colors, fonts, and layouts within Mailchimp before generating embed code.
Native Webflow forms provide complete styling control through the Designer without CSS overrides. Use Webflow form elements instead of embedded Mailchimp forms when visual consistency matters more than Mailchimp-specific features. Native forms let you apply Webflow classes, animations, and responsive behavior directly while still syncing submissions to Mailchimp through form actions.
Embedded Mailchimp forms include default CSS that may conflict with Webflow styles. Target Mailchimp's form classes using custom CSS in Webflow's Site settings > Custom code or in an embed element wrapping the form. The form builder styling options let you adjust colors, fonts, and layouts within Mailchimp before generating embed code.
Native Webflow forms provide complete styling control through the Designer without CSS overrides. Use Webflow form elements instead of embedded Mailchimp forms when visual consistency matters more than Mailchimp-specific features. Native forms let you apply Webflow classes, animations, and responsive behavior directly while still syncing submissions to Mailchimp through form actions.
Each Webflow form can only connect to one Mailchimp action URL, which corresponds to a single audience. To send submissions to different audiences, create separate forms in Webflow with different action URLs pointing to specific Mailchimp audiences. Alternatively, send all submissions to one audience and use tags to segment contacts.
API integration enables dynamic audience assignment based on form field values. Your processing function receives form data through Webflow webhooks, evaluates responses or hidden fields (like page location), and calls the appropriate Mailchimp list member endpoint based on your business logic. This approach centralizes form management in Webflow while maintaining audience separation in Mailchimp.
Each Webflow form can only connect to one Mailchimp action URL, which corresponds to a single audience. To send submissions to different audiences, create separate forms in Webflow with different action URLs pointing to specific Mailchimp audiences. Alternatively, send all submissions to one audience and use tags to segment contacts.
API integration enables dynamic audience assignment based on form field values. Your processing function receives form data through Webflow webhooks, evaluates responses or hidden fields (like page location), and calls the appropriate Mailchimp list member endpoint based on your business logic. This approach centralizes form management in Webflow while maintaining audience separation in Mailchimp.
Add a hidden field to your Webflow forms that captures the page URL or a custom source identifier, then map this field to a Mailchimp merge field. In Webflow's Designer, add a hidden input with a default value like "homepage-hero" or use dynamic values through custom attributes. Create a corresponding merge field in Mailchimp's Audience > Settings > Audience fields and merge tags, then ensure your form includes a field with the exact merge tag name.
Tags provide another tracking method. Use the Mailchimp Tags API in a custom integration to automatically tag contacts based on form source. Your serverless function receives form data via webhook, checks which page sent the submission, and adds tags like "blog-sidebar" or "pricing-page-footer" when creating the contact record. This enables campaign targeting and conversion analysis without cluttering contact profiles with custom fields.
Add a hidden field to your Webflow forms that captures the page URL or a custom source identifier, then map this field to a Mailchimp merge field. In Webflow's Designer, add a hidden input with a default value like "homepage-hero" or use dynamic values through custom attributes. Create a corresponding merge field in Mailchimp's Audience > Settings > Audience fields and merge tags, then ensure your form includes a field with the exact merge tag name.
Tags provide another tracking method. Use the Mailchimp Tags API in a custom integration to automatically tag contacts based on form source. Your serverless function receives form data via webhook, checks which page sent the submission, and adds tags like "blog-sidebar" or "pricing-page-footer" when creating the contact record. This enables campaign targeting and conversion analysis without cluttering contact profiles with custom fields.

Description
Mailchimp Forms is an email marketing forms solution built into Mailchimp's marketing automation platform. It provides form builders, popup templates, and embedded form options for capturing website visitors and adding them to email lists. The platform supports extensive language options, includes SSL encryption and reCAPTCHA security, and connects with numerous third-party platforms for marketing automation workflows.
This integration page is provided for informational and convenience purposes only.

Wufoo
Connect Wufoo's powerful form building capabilities with your Webflow site to create advanced forms with payment processing, file uploads, and complex conditional logic. This integration enables you to collect data through Wufoo while maintaining your Webflow site's design and functionality.

User Detective
User detective makes it easy to run on-site user feedback and research questions.
Typeform
Connect Typeform's conversational forms with Webflow to create engaging surveys, quizzes, and lead capture experiences. Build everything from simple contact forms to complex application workflows while maintaining your brand's design consistency.

SurveyMonkey
Connect SurveyMonkey's powerful survey tools with Webflow to collect feedback, qualify leads, and gather insights directly on your website. Embed surveys seamlessly, automate data workflows, and enhance user engagement without leaving your site.

POWR
Transform your Webflow site with powerful no-code widgets. Add forms, popups, galleries, and 60+ interactive apps to boost engagement, capture leads, and increase conversions — all without writing a single line of code.

Poptin
Connect Poptin's powerful popup and form builder to your Webflow site to capture leads, reduce cart abandonment, and boost conversions with targeted engagement tools.

Paperform
Connect Paperform's dynamic form builder with Webflow to create advanced forms, automate workflows, and enhance data collection. Build everything from simple contact forms to complex e-commerce experiences with conditional logic, payment processing, and seamless design integration.

MightyForms
Connect MightyForms' advanced form builder to your Webflow site for powerful data collection, automation, and payment processing — no coding required.
JotForm
Connect Jotform's powerful form builder with Webflow to create advanced forms with payment processing, file uploads, and automated workflows. Collect submissions that automatically create CMS items, sync data in real-time, and extend beyond Webflow's native form limitations.


