Passing multiple fields from WP Contact Form 7 to MailChimp

Written by: Ivan in How-To, Web Technology

How to pass multiple=

Integrating a contact form with a WordPress website into your MailChimp account can be a great step towards creating and increasing your subscribers list.

In my previous post I focused on the integration of Contact Form 7; which is a form generator plugin for WordPress, and MailChimp; a great email marketing service that I am liking more and more . This post will cover the addition of mutlipe fields to your Contact From 7, which you can then pass to you MailChimp list.

in Contact Form 7

Let start by adding the required fields to your Contact Form 7 form.

The additional fields I will add and pass on are: Last Name, Phone Number and City.

<div>
<div>Your Name (required)<br />[text* your-name]</div>
<div>Your Last Name (required)<br />[text* your-last-name]</div>
<div>Your Phone<br/>[text your-phone]</div>
<div>Your City<br/>[text your-city]</div>
<div>Your Email (required)<br />[email* your-email]</div>
<div>Your Message<br />[textarea your-message]</div>
<div>Subscribe to our Newsletter [checkbox subscribe default:1 "yes"]</div>
<div>[captchac captcha-865 size:l] [captchar captcha-865]</div>
 <div></div>
<div>[submit "Contact Us"]</div>
</div>

in MailChimp

Assuming you have completed the steps in my last post and your form has been completed, you can make a few changes to your MailChimp contact list settings.

  1. Login into your account.
  2. Select your list –> press settings –> press List Fields and *|MERGE|* Tags. On this page you can add more fields/tables to your list.
  3. Press add a field, name it, and change the tag label name.
  4. Select the field type – preferebly text.

Note: Contact Form 7 doesn’t seem to treat phone numbers or dates as digits but instead converts them to a string. Mailchimp however expects a numeric value in it’s ‘phone’ field and as a result will not display any of the (string) content you are attempting to pass to it. Fortunately there is an easy fix. When you create the field in MailChimp be sure to select the field type as “text”. Now MailChimp will know what to expect and your form will work.

In the end we should have something like this ( probably different order ):

MailChimp List Settings

Controler.php Part

Now, that we have a form that has those variables and a MailChimp list that is ready to accept them, we need to integrate them.

We will do that in the controler.js file. Follow the previous tutorial on How to Integrate WordPress Contact Form 7 with MailChimp and change/add the $mergeVars.

$mergeVars = array('FNAME'=>$_POST['your-name'],
 'LNAME'=>$_POST['your-last-name'],
 'PHONE'=>$_POST['your-phone'],
 'CITY'=>$_POST['your-city']);

Now when you submit the form; those variables will be past to MailChimp. Send a few tests to yourself and see if it works.


Hope this helps with adding more fields to your MailChimp list. Please let us know if this tutorial was helpful, or if you have any notes and comments.