Webflow and Mailchimp: The Ultimate Guide (2024)

In today's digital age, the right tools can make or break the success of your online presence. Webflow and Mailchimp stand out as two powerful platforms that, when combined, can transform your digital marketing strategy. This ultimate guide for 2024 aims to unpack how you can leverage Webflow's robust website building capabilities alongside Mailchimp's sophisticated email marketing tools to create a seamless, impactful online presence. Whether you're a seasoned marketer or a small business owner stepping into the world of online marketing, this guide will walk you through integrating these platforms to enhance your outreach, engagement, and conversion rates. Stick with us to unlock the full potential of Webflow and Mailchimp, and take your digital strategy to the next level.

‍

What is Mailchimp?

Mailchimp is a comprehensive marketing automation platform and an email marketing service that allows users to send marketing emails, automated messages, and targeted campaigns to their email list subscribers. Founded in 2001, it has grown to become one of the world's leading marketing platforms, offering a wide array of tools designed to help small businesses grow and manage their marketing efforts more efficiently. With its user-friendly interface, Mailchimp enables users to create, execute, and analyze email and advertising campaigns. The service includes features for email design, subscriber list management, performance tracking, and analytics. Over time, Mailchimp has expanded its offerings to include landing pages, social media integration, and CRM features, making it a versatile tool for digital marketing strategies.

‍

Pros and Cons of Using Mailchimp

Pros

1. User-Friendly Interface: Mailchimp's interface is intuitive, making it easy for beginners to create professional-looking emails and manage campaigns without extensive technical knowledge.
2. Comprehensive Free Plan: For small businesses or startups with a limited budget, Mailchimp offers a robust free plan that includes basic email marketing features, making it accessible to everyone.
3. Automation Features: The platform provides advanced automation capabilities, allowing businesses to send targeted emails based on subscriber behavior, significantly improving engagement and conversion rates.
4. Integration Options: Mailchimp can be integrated with a wide range of services and platforms, including Webflow, ensuring a seamless workflow between your website and email marketing efforts.
5. Analytics and Reporting: Users can access detailed reports and analytics on their campaigns, helping them understand performance and make informed decisions to optimize their strategy.

Cons

1. Pricing Can Escalate: As your subscriber list and feature requirements grow, the cost of using Mailchimp can increase significantly, which might not be ideal for every business.
2. Complexity With Advanced Features: While Mailchimp is easy to use for basic tasks, leveraging its more advanced features and customization options can have a steep learning curve.
3. Limited Design Customization in Lower Plans: The more affordable plans have limitations on design customization, which could restrict creative freedom for some campaigns.
4. Strict Compliance Policies: Mailchimp has strict policies for list management and content, which, while intended to maintain high deliverability rates, can sometimes lead to account suspension or email delivery issues for legitimate users.
5. Customer Support Limitations: Users on the free or lower-tier plans may find the customer support options limited, potentially leading to delays in resolving issues that can impact their marketing efforts.

‍

The complete process to integrate Webflow and Mailchimp

1) Make form in webflow project

To create a form in your Webflow project, follow these steps:

• Access the Designer: Open your Webflow project and switch to the 'Designer' mode.
• Elements Panel: Navigate to the 'Elements Panel' on the left side of the screen.
• Add Form Block: Scroll down to the 'Forms' section and drag the 'Form Block' element into your project canvas where you'd like the form to appear.
• Customize Form Elements: Inside the form block, you will find default form elements like 'Name', 'Email', and 'Message'. You can customize these elements, add new ones, or remove unnecessary elements based on your needs.
• Add Form Fields: To add new fields, go back to the 'Elements Panel', find the specific form field element you need (e.g., Text Field, Text Area, Checkbox), and drag it into the form block on the canvas.
• Set Field Names: Click on each form field to open its settings. Set a unique 'Name' for each field. This is crucial for identifying the data once the form is submitted.

• Configure Form Settings: Select the Form Block, and in the settings panel, you can configure the form's actions, methods, and success/error messages. This might include setting up a 'Thank You' message or redirecting users to a new page upon submission.

Ok, that gets your house in order. Now, let's connect it to Mailchimp

‍

2) Opening MailChimp Account

First, open your MailChimp account.

On the left side menu, click on "Audience." Then, inside "Audience," click on "Sign Up Forms." By the way, they have different plans but on the free plan, you can sent 1000 emails out so quite a generous free plan.

‍

3) Accessing Embedded Forms

Within "Sign Up Forms," click on "Embedded Forms." Hit the "Select" button. You can ignore everything else and click "Continue" until you reach the page displaying a code snippet.

‍

4) Extracting the Action URL

We only need one specific thing from this code snippet: the action URL, which is located at the top, where it says "form action." Copy everything in between the double quotes until the very end, ensuring you copy the entire link.

‍

5) Pasting the Action URL in Webflow

Go back to Webflow, click any form element, and go to the settings panel. Inside the "Form Settings," there's a field called "Action." Paste the action URL here and change the method from "Get" to "Post."

‍

6) Connecting Form to MailChimp

Now, the form is connected to MailChimp. The next step is to connect the individual fields to MailChimp.

Go back to MailChimp, click on "Exit" at the top or "Back to Edit" then "Finish Later." On this page, click on "Settings" and then "Audience Fields and Merge Tags."

Inside this section, identify the column that says "Put this tag in your content." This is crucial for the next steps.

‍

Connecting First Name Field

To connect the first name field to Webflow, copy the tag for the first name, which is "FNAME" in this case.

Back in Webflow, click on the input field for the first name and set the name to this tag, "FNAME."

NB. If you want to add more fields or have different fields, simply add them in your Webflow form and then you can add the text field setting exactly like

‍

13) Connecting Email Address Field

Finally, for the email address, the tag is simply "EMAIL," written in capital letters. Copy it, select the email address field in Webflow, and paste "EMAIL" inside of the text field settings as the name of the field.

14) Basic Setup Completion

Verify the setup by publishing the project and testing with dummy data. Upon submission, a "thank you" message should confirm the successful integration with MailChimp.

Check in Mailchimp to see if it works. If the data is there on refresh, you're done!

‍

15) Adding Additional Fields

For new fields, such as a phone number, replicate the setup process by creating the field in Webflow and linking it to MailChimp through audience fields and merge tags.

‍

16) Custom Fields Integration

For unique or specific data collection, add a custom field in MailChimp and then mirror this addition in Webflow’s form settings, ensuring proper connection.

‍

17) Utilizing MailChimp Tags

Assign tags (e.g., American Company) to new signups through the embedded forms' settings in MailChimp, allowing for targeted communication and segmentation.

Click on "American Company" to select it as a tag. Though it's possible to add multiple tags simultaneously, we'll focus on adding just the fitness tag for now.

You can ignore parts of the process that are not crucial for our integration.

Click "continue" repeatedly until you reach the page displaying the code snippet.

‍
‍
18) Selecting the Essential Code

Locate the specific line in the middle of the code snippet that begins with `div hidden = "true". Copy this entire line, including the closing `div` tag, to ensure functionality.

19) Embedding in Webflow

Go to Webflow, navigate to the form, and add an HTML embed element onto the page.

Inside the custom code area of the embed element, paste the copied line of code.

Save and close.

20) Ensuring Correct Placement:

Make sure the embed element is placed inside the form, not just within the form block, for the integration to work.

‍

21. Testing the Integration:

Publish the page and perform a test by filling out the form with sample information.

Submit the form to see if the fitness tag gets assigned correctly.

‍

Need some help setting this up? Get in contact today

‍

Conclusion

In conclusion, integrating a signup form into your Webflow project and setting up tags for new submissions is a straightforward process that can significantly enhance your marketing and operational strategies. By following the outlined steps, from creating the form to adjusting tags and testing the integration, you can ensure a seamless experience not only for yourself but also for your users. Remember, constant testing and adjustment can lead to better performance and a more personalized user experience. Finally, don't hesitate to explore further learning resources or seek professional assistance if you encounter complexities. With your form now successfully integrated and published, you're set to engage more effectively with your audience and grow your project.

‍

Extra resources

Although this uses the old Mailchimp UI, this is still a really informative video!