Step by Step Mailchimp Webflow Integration

Integrating Mailchimp with Webflow can help streamline your email marketing and website design workflow.

In this guide, I’ll walk you through the step-by-step process of connecting your Mailchimp and Webflow accounts and setting up forms to collect emails through your website.

Mailchimp Webflow Integration: Overview

Linking Mailchimp and Webflow allows you to create sign up forms, landing pages, and more within Webflow, with the emails collected automatically sent to selected Mailchimp lists.

This makes it easy to grow your mailing lists and customize subscription forms without any code.

There are a few key steps we’ll cover to get everything connected:

• Connecting Webflow and Mailchimp accounts
• Installing the Mailchimp integration
• Creating forms in Webflow
• Adding forms to Mailchimp lists
• Embedding forms on pages

Once the accounts are linked and forms set up, you can start collecting emails through your Webflow site and managing subscribers within Mailchimp.

Step 1: Connect Webflow and Mailchimp Accounts

First, you need to connect your Webflow account to Mailchimp. Here is the process:

1. Log in to your Webflow account and go to Integrations in the main menu.
2. Find Mailchimp and click Connect.
3. Enter your Mailchimp login credentials when prompted.
4. Allow access to connect the two accounts.

And that’s it! Webflow and Mailchimp will now be integrated. Any forms you create can be synced with your Mailchimp mailing lists.

Step 2: Install the Mailchimp Integration

While your accounts are now connected, you still need to install the Mailchimp integration on any Webflow site you want to use it on.

To install the Mailchimp integration:

1. Open the Webflow site you want to add forms to.
2. Go to Settings > Integrations.
3. Find the Mailchimp integration and click Install.

This makes the integration available specifically for this site. You’ll need to repeat this process for any other Webflow sites you want to use Mailchimp with.

Step 3: Create Forms in Webflow

With the accounts linked and integration set up, it’s time to create a form. Webflow provides an easy drag-and-drop form builder to work with.

Here are the key steps in creating a form that can sync emails with Mailchimp:

1. Go to the Webflow site pages and open the CMS.
2. Add a new form element to the desired page.
3. Give the form a name to easily identify it.
4. Build out the fields you want to include such as Name, Email, Phone Number, etc. Make sure Email is marked as required.
5. Customize additional options like form layout, styling, labels, placeholder text, etc.
6. Click the Mailchimp integration icon in the menu.
7. Select the Mailchimp list you want form entries sent to.
8. Publish the form.

You can create as many different forms with customized fields and layouts as you need. Each one can be connected to any of your Mailchimp lists simply by adjusting the integration settings.

Step 4: Add Forms to Mailchimp Lists

When you connect a Webflow form to a Mailchimp list, there are a couple of ways emails can be added:

Instant Add: As soon as someone fills out the form, they are subscribed to the list. Their info doesn’t require any manual review first.

Double Opt-In: People who fill out the form will receive an opt-in confirmation email. Once they confirm, their info is added to the list. This helps prevent false signups.

Most of the time Double Opt-in is preferred. You can manage these two choices within Mailchimp:

1. In Mailchimp, go to Audiences and select the desired list.
2. Click Settings.
3. Go to Signup forms.
4. Find the corresponding Webflow form and choose Signup Settings.
5. Select between Instant Add or Double Opt-in.
6. Save your changes.

Now when people submit that Webflow form, it will follow the opt-in method you selected for seamless list growth.

Step 5: Embed Forms on Pages

The form builder allows you to fully design forms right within Webflow sites. But you still need to actually add them to pages where visitors will see them.

Embedding a form is simple:

1. Open the page you want the form on in the Webflow CMS.
2. Delete or move any existing page elements to make room for the form.
3. Click the plus icon to add an element.
4. Select Form Embed.
5. Choose the form you created.
6. Customize sizing and positioning on the page.
7. Publish changes.

You can embed forms on multiple pages like “Contact Us” or landing pages dedicated specifically to email signups. Feel free to customize where forms appear to match your site goals.

And that covers the complete process of creating Webflow forms connected to Mailchimp!

Collecting Subscribers

With the accounts linked up and forms designed and published live, you are now ready to start easily growing your mailing lists directly from your website.

Every time someone fills out one of your embedded Webflow forms, their information will automatically be added to the connected Mailchimp list depending on the opt-in settings selected.

No more manually exporting CSV files or copying-and-pasting subscriber emails. The integration handles it instantly and seamlessly every time.

Mailchimp Webflow Integration: Key Benefits

Connecting Mailchimp with Webflow forms provides a variety of benefits:

1. Easy form building: Quickly design custom sign up forms without coding right within Webflow.

2. Seamless list growth: Form entries directly sync with target Mailchimp audiences.

3. Double opt-in: Helps prevent spam signups for better list quality.

4. Mobile responsiveness: Forms look great on all devices thanks to Webflow.

5. Design flexibility: Fully customize form appearance and pages they embed on.

6. Automated workflows: Set up email automations, segments, tags, and more in Mailchimp.

Bringing these two powerful platforms together can really enhance your overall email marketing and website results.

Next Steps

And there you have it – a complete walkthrough on integrating your Webflow website with Mailchimp for streamlined email list growth!

To recap, we covered:

• Connecting accounts
• Installing site integrations
• Building forms
• Syncing forms with lists
• Embedding forms
• Growing your lists

From here, you can start sending campaigns through Mailchimp to the lists powered by your new Webflow sign up forms.

Some next steps to boost results even further:

• Add forms to additional high traffic pages
• A/B test different form layouts
• Personalize confirmation messages
• Send welcome email series to subscribers
• Segment lists for targeted messaging
• Monitor campaign analytics

Setting this up provides the foundation, while continually optimizing forms and emails will ensure your new integration sees maximum impact.

Have you connected Mailchimp with your Webflow website? What other integrations or automations have you found useful? Let me know in the comments!