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.