Mailchimp Forms

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

Install app
View website
View lesson
A record settings
CNAME record settings
Mailchimp Forms

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 (not GET) 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_existing parameter 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_submission trigger
  • 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 GET instead of POST, or double opt-in requires confirmation. Check your form action settings to verify the action URL, POST method, and exact field name matching (EMAIL, FNAME, LNAME are 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 GET instead of POST, or double opt-in requires confirmation. Check your form action settings to verify the action URL, POST method, and exact field name matching (EMAIL, FNAME, LNAME are 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.

Mailchimp Forms
Mailchimp Forms
Joined in

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.

Install app

This integration page is provided for informational and convenience purposes only.


Other Forms & surveys integrations

Other Forms & surveys integrations

Wufoo

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.

Forms & surveys
Learn more
User Detective

User Detective

User detective makes it easy to run on-site user feedback and research questions.

Forms & surveys
Learn more
Typeform

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.

Forms & surveys
Learn more
SurveyMonkey

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.

Forms & surveys
Learn more
POWR

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.

Forms & surveys
Learn more
Poptin

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.

Forms & surveys
Learn more
Paperform

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.

Forms & surveys
Learn more
MightyForms

MightyForms

Connect MightyForms' advanced form builder to your Webflow site for powerful data collection, automation, and payment processing — no coding required.

Forms & surveys
Learn more
JotForm

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.

Forms & surveys
Learn more

Related integrations

No items found.

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Get started — it’s free