Skip to content

Instantly share code, notes, and snippets.

@darnocer

darnocer/webflowmailchimp.md

Last active July 22, 2023 18:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save darnocer/d716c41677cca964bf4a22edba8173a8 to your computer and use it in GitHub Desktop.
Save darnocer/d716c41677cca964bf4a22edba8173a8 to your computer and use it in GitHub Desktop.
Download ZIP
Guide to MailChimp Integration in Webflow
Raw
webflowmailchimp.md

Guide to MailChimp Integration in Webflow

This guide covers in detail the implementation of a custom contact or sign up form on your Webflow website that subscribes users and adds data to your contact list in MailChimp, including the configuration in MailChimp. It goes over the options to actually implement the integration and the advantages and limitations of each option.

This guide is for beginners to MailChimp, but assumes proficiency in Webflow. This content is intended to be searchable for details that you need in case you get stuck :)

MailChimp Configuration

Overview of Audience Segmentation in MailChimp

  • Audience Fields - The fields in MailChimp that map to the form fields to collect contact data (eg. name, email, etc)
  • Groups - A contact-facing way to categorize audience; contacts "self-identify" which group they belong to when they subscribe (eg. categorizing client vs volunteer inquiries)
  • Tags - Can be added to contacts to store additional information about the contact (eg. add a tag for an event they attended)
  • Segments - Rather than adding data to a contact (unlike groups and tags), segments filter the audience based on their existing data

Create a New Audience Field

  1. Create the Audience Fields needed for your form: Audience Dashboard > Settings > Audience Fields and |MERGE| Tags
  2. Go to Audience > Sign Up Forms > Embedded Form and add the fields how you wish for them to appear, marking as Required as necessary

Create a new Group

  1. Go to Audience > Sign Up Forms > Form Builder
  2. Add a Field
  3. Select a supported Group Option:
    • Checkboxes - can select more than one
    • Radio - can select only one
    • Dropdown - can select only one
  4. Mark the field as "Visible" and "Required," if applicable
  5. For Radio Buttons and Dropdowns, click Convert to Groups (Checkboxes are automatically a group)

You can also create groups directly instead of converting them in Form Builder from Audience Dashboard > Manage Audience > Manage Contacts > Groups > Create Group

Webflow Setup

Build the form

You'll need to build the front-end form elements in Webflow, unless you choose the embed option below.

Link Form Fields to an Audience Field or Group

❗️ The name field (or name attribute) in Webflow on each input field must EXACTLY match the field tag in MailChimp.

Locating the Field Tag for Audience Fields

There are a few ways to find the field tag for regular Audience Fields:

  • Audience Dashboard > Settings > Audience Fields and |MERGE| Tags
  • Go to Audience > Sign Up Forms > Form Builder and select the field
  • Go to the Action URL and use dev tools to inspect the elements for their name attribute

Connecting a Form Field to a Group

Groups function similarly to regular audience fields but do not have Field Tags so need to be mapped to MailChimp by their group name.

  1. Go to Audience > Sign Up Forms > Embedded Form
  2. Add the Group as a field to the form > Continue
  3. Check the Form Embed code for the name and value attributes of each input
  4. On the input element in Webflow, add the Group Name and Value. The `Group Name' for all input options should be the same. The values will be unique identifiers (an integer)

Example - All options have group[384357] as the Group Name and their values are different, eg. 8

<input type="radio" value="8" name="group[384357]" id="mce-group[384357]-384357-0">

To make Radio or Checkbox inputs required, at least one option should have the required attribute, and ALL group options must have the same name

Integration Options

OPTION 1: MAILCHIMP INTEGRATION

Build the front-end form elements in Webflow and use a POST method to subscribe the contact to Mailchimp Audience

After the Audience Fields and Groups have been configured and the form has been built in Form Builder:

Grab the Action URL

  1. From Audience > Sign Up Forms > Embedded Forms
  2. Verify form fields are configrued and click Continue (this form code won't actually be embedded so you don't need to style the form here)
  3. From the embedded form code, grab the Action URL from within the first set of quotation marks:
<form action="https://example.us1.list-manage.com/subscribe/post?u=329a4665730d583e05682ed10&amp;id=1ab3dc8109&amp;f_id=004e0fe2f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self">

Action URL:

https://example.us1.list-manage.com/subscribe/post?u=329a4665730d583e05682ed10&amp;id=1ab3dc8109&amp;f_id=004e0fe2f0

Configure the form in Webflow

  1. Build out the form elements in Webflow to match how you have the form in Form Builder
  2. On the form element > Settings > Form Block Settings > Action: paste the Action URL you copied
  3. Set the Method to POST
  4. On each input element > Settings > Text Block Settings
  5. Ensure the Name field matches the Field Tag from MailChimp EXACTLY

See also: https://university.webflow.com/integrations/mailchimp-form-integration

Considerations for this method:

  • You can build and style the form with Webflow elements rather than embedding code
  • You can utilize native on-page Webflow success and error messages instead of redirecting to a Subscription confirmation page
  • A tag is not applied to the contact on form submission even if configured in the settings of the Embedded Form 
    (this is possible with custom code)
  • The native Webflow form notification email (in Project Settings) will not send when connected to MailChimp or other third party platform

OPTION 2: EMBED THE FORM

Use Embedded Forms builder in Mailchimp and embed the HTML elements in Webflow

Build the Form

  1. Go to Audience > Sign Up Forms > Embedded Form
  2. Add the Audience Fields to the Form as needed > Continue
  3. In Webflow, naviagte to the section for your contact form (ensure global elements clas)
  4. Add an HTML Embed element. This element will be where the form element would be
  5. Paste the code and style the form as needed
  6. Pull the CSS out from the <style></style> tags and add to the <head> tag in the Project Settings as a best practice

If you have styling requirements, you can edit this and add styles and classes in a code editor before adding to Webflow. Doing it directly in Webflow also works fine, you can save the code and see the update in the Preview.

Webflow classes will work in the styles, but it is a good idea to use classes specific to the embed to avoid unexpected conflicts. For instance, pre-fixing each class with mc-.

Considerations for this method:

  • From the Embed Form Settings, a tag can be applied to the contact on form submission
  • You can't use Webflow elements so it requires manually styling with CSS
  • The contact will be redirected to a MailChimp Subscription Confirmation on Form Submission (this can be edited from Form Builder)

OPTION 3: THIRD-PARTY AUTOMATION TOOL (ZAPIER)

Use the native Webflow Form elements and functionality and post the form data to Mailchimp via Zapier

Configure Form Settings in Webflow

  1. In Webflow, Go to Project Settings > Forms
  2. Ensure there is an email to receive the form submission notifications
  3. Configure the email template as needed

Build the Form in Webflow After the Audience Fields and Groups have been configured and the form has been built in Form Builder:

  1. Follow the steps to build out the audience fields in MailChimp form builder, and build the form in Webflow that matches exactly including the field tags as you would for Option #1, but do not add the Action URL
  2. Name the form element (eg. contact-form)
  3. Submit a test form submission to your Webflow form so there is test data for Zapier
  4. Verify the form submission worked

You will get a success message in Webflow if it submitted correctly. This will NOT go to MailChimp yet. You can also verify the form submission data can be seen from Project Settings > Forms and that you received an email confirmation.

Configure the Zap

  1. Login to Zapier and start a Zap to connect Webflow to MailChimp apps
  2. Set the Trigger as Form Submission and the Action as Find or Create a Subscriber
  3. Test the Trigger - it should pull in data from your most recent form submission
  4. Setup the action by mapping test data to the MailChimp Audience Fields
  5. Test the action and verify the test data was added as a contact in Mailchimp*

IMPORTANT: If you want to have the contact's group/interest update on form submission, you will need to add a code step. In you will need to add a Zap for each Group Option. Otherwise, you will see all group options applied to the contact.

Create a Zap for Each Group option (if applicable) For example, if you have an "Tech Interests" group with "AI", "Blockhain," and "Analytics," you will create 3 identical zaps, but link the Group Options separately in each group: a zap for "AI" group, "Blockchain" group, and "Analytics" group.

It is recommended to set the Replace field to Replace All.

Considerations for this method:

  • Third party integration introduces an additional point of failure and if you need to add group options, there will be multiple zaps and potential points of failure
  • This will use Webflow's native Success Message instead of confirmation subscription

This option enables BOTH adding the data to MailChimp and using Webflow's native form submission notifications. However, the Form Submission data will return the name attributes of each field. So if you're using groups, you can't easily identify the value selected from the Form Data without custom code.

Example Form Data with Groups:

384357: 8
384361: true
FNAME: John
LNAME: Doe
EMAIL: gambits.hickory-0i@icloud.com
MESSAGE: fdgdfgd

Troubleshooting Steps

  • If the field element exists in the HTML, then the field should exist in Mailchimp
  • The name of the input field must match the field tag in Webflow
  • If the field is required in MailChimp it must be required in the HTML attribute
  • All input fields in the HTML must be marked as Visible in MailChimp
  • Ensure the input type is the same as in MailChimp, and if it is marked Required in MailChimp it must be marked Required on the form
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment