Can anyone help me with connecting a Mailchimp email form to my Webflow site?

Published on
September 22, 2023

How to Connect a Mailchimp Email Form to Your Webflow Site

If you're looking to connect a Mailchimp email form to your Webflow site, here's a step-by-step guide to help you out:

  1. Set up a Mailchimp account: If you haven't done so already, head over to the Mailchimp website and create an account. Once you're logged in, navigate to the "Audience" tab and create a new audience or select an existing one.

  2. Generate an API key: In order to integrate Mailchimp with your Webflow site, you'll need to generate an API key. To do this, go to your Mailchimp dashboard, click on your profile, and select "Account." Under the "Extras" dropdown, choose "API keys." Create a new API key or copy an existing one if available.

  3. Add the Mailchimp form code: In your Webflow project, open the Designer and select the page where you want to place the Mailchimp email form. Drag and drop a form element onto the canvas or open an existing form element.

  4. Customize the form fields: Edit the form fields based on your requirements. You may want to include fields like name, email address, and any additional information you need from your subscribers. Make sure to add a submit button to submit the form.

  5. Configure the form settings: In the form settings panel, locate the "Action" attribute. This is where you'll have to paste the Mailchimp form action URL. To get the form action URL, go back to your Mailchimp dashboard, select the audience you want to add subscribers to, and click on the "Signup Forms" tab. Choose the "Embedded forms" option, copy the provided code, and extract the form action URL.

  6. Add the Mailchimp API key: To ensure that your Webflow site can communicate with Mailchimp, go to the Webflow Designer, click on the project settings, and find the "Custom Code" tab. Paste the following code into the "Before " section:

<script src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
  1. Publish your site: Once you've completed all the above steps, save your changes and publish your Webflow site. Your Mailchimp email form should now be connected and ready to capture subscriber information.

By following these steps, you'll successfully integrate a Mailchimp email form into your Webflow site, enabling you to collect valuable leads and build your mailing list.

Additional Questions:

  1. How do I style my Mailchimp email form in Webflow?
  2. Can I use Mailchimp automation features with my Webflow email forms?
  3. Are there any alternatives to Mailchimp that can be integrated with Webflow?