How to Create a Sales Funnel with WordPress, Contact Form 7, and MailChimp

This is a step-by-step tutorial designed to help you create a sales funnel using WordPress, the Contact Form 7 plugin, and the Contact Form 7 MailChimp Extension plugin. Both plugins are free and will not require additional PHP programming. You will need to have a MailChimp account and an active MailChimp list to proceed.

This article assumes that you have already installed WordPress and Contact Form 7 and that you have a basic understanding of how to use both.

The7 theme was used to create the sales funnel in this tutorial.

Introduction: Create a Sales Funnel with WordPress, CF7, and MailChimp

Recently a client hired me to create a sales funnel using WordPress. The sales funnel needed to run independently of the client’s established business website, as well as be set up on a sub-domain.

I needed a solution that was cost-effective (free) and that would connect to the MailChimp API to use its autoresponders. There are several free WordPress plugins that create a form that connects to MailChimp, but unfortunately, some of these plugins are only usable as a widget. And using a widget was not an option for this application.

Also, a form that would integrate into the theme seamlessly was ideal, as I didn’t want to spend time rewriting CSS to match the website’s design. The Contact Form 7 plugin was a great solution because many themes support it, including The7 theme that my client had already purchased.

Just using Contact Form 7 was not a final solution, though, as I still needed a way to connect to MailChimp. Fortunately, I found a free little gem called Contact Form 7 MailChimp Extension. This tutorial will show you how to set up this plugin.

Table of Contents

1. Install the Contact Form 7 MailChimp Extension
2. Get the API key from your MailChimp account
3. Get the List ID from your MailChimp account
4. Create the Sales Funnel form in Contact Form 7
5. Create the form redirect in Contact Form 7
6. Set up the Contact Form 7 MailChimp Extension
7. Set up the optional Advanced Settings for the Contact Form 7 MailChimp Extension
8. Add the form to your WordPress Sales Funnel page
9. Final Thoughts

Step 1: Install the Contact Form 7 MailChimp Extension

Contact Form 7, by itself, is not capable of connecting to the MailChimp API. You will need to install the Contact Form 7 MailChimp Extension plugin. You will also need the Mailchimp API key and List ID from your MailChimp account.

Step 2: Get the API Key from Your MailChimp Account

You will find your MailChimp API key by logging into your MailChimp account at the URL:

https://admin.mailchimp.com/account/

and visiting:

Step 3. Get the List ID from Your MailChimp Account

The next item you will need is your List ID from MailChimp. You can find this by logging into your account at the URL:

https://admin.mailchimp.com/lists/

Click on the list that you want to use. On the next page choose from the drop-down:

You will find the List ID in red towards the top right of the page.

Step 4. Create the Sales Funnel Form in Contact Form 7

In your WordPress admin dashboard, go to:

and edit the form you want to use in your sales funnel.

Make sure to include the Name and Email tags in your form.

NOTE: It is not necessary to set up the options on the “Mail” tab unless you want an email notification sent to you when the form is submitted.

Step 5. Create the Form Redirect in Contact Form 7

In the sales funnel, you will want to redirect to a new page after the form is filled out and the submit button is clicked. This used to be accomplished by adding the following to the Additional Settings options tab:

The newest version of Contact Form 7 has deprecated the on_sent_ok as of version 5.0. The easiest way to implement the redirect after submit feature is to use the Contact Form 7 Redirection plugin.

Redirection for Contact Form 7

Install the plugin and configure it appropriately.

Step 6. Set up the Contact Form 7 MailChimp Extension

In Steps 2 & 3 you located the MailChimp API key and List ID. You will need to put both into the Contact Form 7 MailChimp Extension plugin settings. Click on the MailChimp tab. This is where you will add the API key and List ID. You will also want to include the Name and Email tags from your contact form.

Step 7. Set up the Optional Advanced Settings for the Contact Form 7 MailChimp Extension

If you’ve created a contact form that has fields other than Name and Email, you can match the tags with the Custom Field Name you have created on the MailChimp website. Otherwise, skip this step.

1. First, click on the Show “Advanced Settings” button.
2. Second, check the “Custom Fields” option box.
3. Third, add the tags to the Contact Form Value fields and match each one with the corresponding MailChimp Custom Field Name.

On the MailChimp website, you can find the Custom Field Name page by going to:

NOTE: When you use a Full Name field in your contact form, the tag is sent to MailChimp through the API, it is automatically separated into a First Name and Last Name, and then added to your list. But, if you create a contact form with the First Name and Last Name fields, you will need to use the Advanced Settings example above.

Step 8. Add the Form to Your WordPress Sales Funnel Page

Now that you have created your new form and saved it, copy and paste the shortcode into your sales funnel page. The shortcode will look similar to the following:

NOTE: If you are using a theme with Visual Composer installed, add the Contact Form 7 element to the page and choose your form from the drop-down.

Final Thoughts: Create a Sales Funnel with WordPress, Contact Form 7, and MailChimp

You may want to install the Contact Form DB plugin to save the submitted form information to your WordPress database. This can be used as a backup to MailChimp, especially if something breaks and MailChimp doesn’t receive the form submission.

For information about Mailchimp’s double opt-in, take a look at our article How to disable the Mailchimp double opt-in using WordPress.

Using AWeber

If you are going to use AWeber instead of MailChimp, there is a plugin by the same author named Contact Form 7 Aweber Extension. The setup process is similar to the steps in this tutorial, but in order to get it to work, you have to select Use Custom Fields in the settings. Then you need to map out the CF7 tags to each AWeber Custom Field Name.

You should also leave the Required Acceptance Field blank. It is primarily used to confirm a newsletter subscription as a checkbox in your form. This option is not necessary for the sales funnel to work.

Need Help Setting up a Sales Funnel?

Fill out the form below if you have questions or need assistance setting up a sales funnel in WordPress.

For quicker response give us a call at (602) 633-4758.