Send Webform Submissions to Mailchimp in Drupal

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

Related: Getting Started with Mailchimp in Drupal

The Webform Mailchimp module allows you to send Webform submissions to your Mailchimp list whilst also allowing you to map the Drupal webform fields to MailChimp form fields.

When a user submits the Drupal webform, the submission details are sent directly to MailChimp. When you log into MailChimp you can view the submission details within the MailChimp interface and the fields are mapped accordingly.

This can be easily accomplished using the Webform Mailchimp module (along with its dependencies). The dependencies are:

• Webform module
• MailChimp module
• MailChimp API PHP library (MailChimp module dependency)

You need a MailChimp account (with at least one list).

TIP: On the Mailchimp website, the word “list” is synonymous with “audience” and they are used interchangeably. This can be a little confusing. For all intents and purposes, “list” and “audience” are the same thing.

In this tutorial we’ll cover the following:

• Show how to use the Mailchimp module to connect to your Drupal Webform.
• We will map fields between Drupal Webform and your MailChimp list.
• We will submit the Drupal webform and show how you can view the submission details from within the MailChimp interface.

This tutorial assumes you have the following already set up:

• A Drupal Webform (with first name and last name form elements)
• A MailChimp account with at least 1 list (with first name and last name).

Getting Started

Installing the Webform MailChimp module and its dependencies can easily be done using Composer and Drush. It is highly recommended that you use Composer to install this module as there are a few dependencies which are taken care of automatically.

Using Composer:

composer require drupal/webform_mailchimp

Enable the module with Drush:

drush en webform_mailchimp -y

Clear the cache:

drush cr

Configure MailChimp

Go to the MailChimp configuration screen in Drupal at Configuration >> Web services >> Mailchimp. The default screen will look like this:

Now you need to enter your Mailchimp API key. Click on the “Mailchimp API Dashboard” link (highlighted in the red box), set up your Mailchimp key and copy/paste your API key into the Mailchimp API Key field in Drupal.

TIP: After entering your Mailchimp API key, you may need to clear your Drupal cache a few times for the settings to take effect.

Next, set up your Drupal webform. Setting up a webform is not covered in this tutorial. Watch our Youtube video on How to Create a Simple Drupal Webform for more information.

For this tutorial, we are using the default Contact Webform and have added two custom fields which are “First Name” and “Last Name”. Our webform looks like this:

The 2 highlighted fields in red are the fields that we will use for the mapping. Here is a simple table showing our webform elements and their respective keys:

Form Field Name	Key
First Name	first_name
Last Name	last_name

TIP:  You have to enable the Webform UI submodule to configure your webform field elements.

Add Mailchimp as a Handler to Webform

We must add Mailchimp as a handler to your webform. This will connect your Drupal Webform to your Mailchimp list.

In your Drupal webform, go to Settings >> Emails / Handlers and click on “Add handler”.

After clicking on “Add handler”, click on “Mailchimp” from the given options.

The subsequent screen will be the settings for the Mailchimp handler which looks like this:

Ensure that you select your correct Mailchimp list from the List dropdown and click on “Save”.

If you do not see your Mailchimp list in the “List” dropdown, check your Drupal “Recent log messages” for any Mailchimp connectivity errors, ensure you have the right Mailchimp API key, try clearing your cache a few times and make sure you have a Mailchimp list setup within your Mailchimp account.

Email Field

The email field on the handler is a required field. You’ll need to make sure you have an email element on your Webform. This is the email address that’ll be sent to Mailchimp.

The handler will automatically select the first email element it finds on the form.

Map Mailchimp and Drupal webform fields

At this point, our fields are unmapped. The place to map the fields is on the same form as in the screenshot above. Here it is again and highlighted:

We already know the field keys for our Drupal webform. So let’s find out what the field keys of our Mailchimp form are.

Go to the settings of your Mailchimp list as shown below and click on “Audience fields and *|MERGE|* tags”:

Here we can see the key values for our Mailchimp list as shown below:

Here’s a table showing the Mailchimp form field key values:

Form Field Name	Key
First Name	FNAME
Last Name	LNAME

Now we will do the actual mapping inside of Drupal.

In Drupal, go to your Structure >> Webforms >> Settings (of your webform) >> Emails / Handlers >> Edit (of Mailchimp)

Next, in the “Merge vars” section, manually enter the key values as shown below and click on “Save”:

Notice how we utilized the key values from both the Drupal webform and Mailchimp form.

FNAME: [webform_submission:values:first_name]
LNAME: [webform_submission:values:last_name]

TIP: The “Merge vars” textbox accepts YAML code so ensure there are no typos or unnecessary white spaces.

Test your Webform

Now that we have successfully mapped our fields, it is time to test our webform. Go ahead and submit your webform from within Drupal. After in the Mailchimp interface, go to Audience >> All contacts, and you should see the form submission values in your Mailchimp list.

Summary

We have shown how to use the Mailchimp Webform module to connect your Drupal webform to a Mailchimp list. We have also shown how you can map the Drupal webform fields to your Mailchimp list so that when a user submits a Drupal webform, the data is automatically sent to Mailchimp (via their API) and can be viewed from within the Mailchimp list interface.