How to Optimise Your MailChimp Signup Process on Your WordPress Site in 30 minutes.

Growing a subscriber’s list is one of the primary goals of almost every website or blog. Whenever a visitor sends you an email or reads your blog or is just about to leave your site, that’s the time when an “opportunity” to sign up to your mailing list should be given.

Wordpress-Mailchimp-Email-Signup-Forms

In this article, I explain a simple and a very quick method of setting up a fully automated Mailchimp newsletter sign up process on your WordPress website. However, this implementation doesn’t have to be limited to an email sign-up function only. In case of a different CTA, you still can create your inline or exit form by using the steps below!

MailChimp Setup

Step 1: Sign up to Mailchimp

I don’t think I need to introduce MailChimp to anyone, but just in case, MailChimp is an email marketing service provider, founded in 2001. It has 6 million of users that collectively send over 10 billion emails through the service each month. Bloggers and companies love it for its awesome flexibility and great features whilst staying completely free for those who just start building their mailing lists!

Step 2: Set up a mailing list, e.g. Monthly Newsletter

If you are not familiar with MailChimp, there are a few things to be aware of:

  • Each list is a separate entity so subscribers’ data on one list is not shared among other lists within the same account.
  • When naming the list, bare in mind that the name of the list is visible to your subscribers, so keep that in mind when choosing a name!

I usually maintain a single list per organization/ website or a client in my account.

Step 3. Decide on data you want to collect.

Less is more. The fewer fields you ask your visitors to fill in, the more subscribers you will get. I usually collect just the first name and an email address if I set up a typical blog form. As a blogger, I really don’t need the surnames to communicate with my subscribers.

 

Integrate Your Contact Forms with MailChimp

Step 4: Install Contact Form 7

Those who use WordPress know that Contact Form 7 to WordPress is like Jesse to Walter- they can live without each other, but what kind of life that really would be?

I prefer to use Contact Form 7 than the MailChimp forms because they are much more flexible and very easy to edit and customise. Contact Form 7 is one of the oldest plugins ever created. I cannot praise enough its simplicity and brilliance. Just install it and test it yourself!

Step 5: Install Contact Form 7 MailChimp Extension

I found Contact Form 7 MailChimp Extension as the simplest way to integrate MailChimp mailing lists with Contact Form 7. It simply allows you to automatically save your subscribers to a proper mailing list in your MailChimp account. In other words, all the data of your contacts and subscribers are integrated into one list.

Step 6: Add every person who contacts you to your mailing list.

In order to make it work, you need to obtain MailChimp’s API key. To do it, open a new tab in your browser and login to your Mailchimp account: https://admin.mailchimp.com/account/

Account MailChimp- API key

Click on “Extras” and then the link highlighted (red) above you will be presented with the API key. Click “Create a key” button and copy the new key to your clipboard.
MailChimp API Keys

Now, go back to your WordPress site (previous tab), go to your contact form and click “Add new”:

Contact Form 7- add new form

Click on Mailchimp tab. It should look like this:
MailChimp Extension- first look

Input your MailChimp API key in the appropriate field.

Now you need to obtain the list ID you want to intergrade the form with. To do so, go back to Mailchimp account (the other open tab) and click on Lists link on the top of the page. Go to the settings of the list you want to intergrade the form with:

MailChimp--Lists-settings-to-get-list-ID

and the ID will be presented on the bottom of the page. Copy it to a clipboard.

MailChimp--List-name-and-list-ID

Go back to the other tab and input your MailChimp list ID in the appropriate field.

To give your visitor an option to opt-in/opt-out to subscribe to your mailing list, add this line: [opt-in] in th  “required field option”, also insert [your-name] and [your-email] functions in the correct fields too.

MailChimp Contact Form 7 WordPress Setup

Then click on the first tab of your form called “Form” and add this line of code above the “Submit” button:
<p>[checkbox opt-in default:1 "Send me a monthly newsletter"]</p>
Contact Form 7- Adding MailChimp opt-in

Now, add a name to the form o the top of the page, e.g. My Fist Form and save the form!

If you want to redirect your users to a thank you page or any other page after contacting with you, in the “Additional” tab of the form add this line of the code and change url part to your landing url:

on_sent_ok: "location = ' http://domain.com/yourdesiredurl';"

and click “Save”.

The shortcode of the form itself will be presented above the form:

Contact Form 7 Shortcode

Copy it and paste to your contact page and publish it. The form should look similar to the one I have on “contact me” page.

Consequently, every visitor who contacts you will be also added to the mailing list you have chosen during this process.

BUILD AN INLINE FORM

Inline forms are very powerful tools to acquire more subscribers. Since your posts might generate traffic coming from Google, the blog post itself is the first thing the new visitors see on your website. If they like the content, they will more likely subscribe to your newsletter- the inline form is a great way to encourage them to do so!

Here is an example of the inline form I use on MagsTags.com site:

Like this post? Sign up for my monthly newsletter!

Learn how to attract a relevant audience to your websites.

 

To create it, go to your Contact Form 7 and below the “Contact” form you’ve just created, click “Duplicate”.

Contact-Form-7--duplicate

Change the name of the form to “Inline form”. Make sure that API and ID are still there, in the MailChimp, if not just copy and paste them from the previous form (as well as other fields- name and email).

Go to the “Form” tab, delete entire content and paste the below code instead:

<div class="postform" style="text-align:center;"><p><h6>Like this post? Sign up for my monthly newsletter!</h6> Learn how to attract a relevant audience to your websites.</p> <div class="postformtext">[text* your-name placeholder "First name"] [email* your-email placeholder "Your email"] [submit "Send"]</div></div>

Adding those additional divs will help your designers to style them or you can do it yourself if you know basic CSS.

Now, copy the shortcode of the form (it is shown just below the name of the form) and paste it to your posts!
You can also add it at the bottom of your posts. Apparently the newsletter signup below a post convert at 2% for some websites.

BUILD AN EXIT FORM

“Exit” has a new meaning in ecommerce world nowadays. Apparently 70% of visitors who abandon your website will never return! The exit-intent technology detects user behavior and prompts them with a targeted campaign at the precise moment they are about to leave. Let’s try to capture that abandons with an exit form!

To do that, you have two options.

OPTION 1.

Installing a Ready to Use Solution (PAID)

There is quite a few solution already there like SumoMe, MailMunch, OptinMonster to name a few! Although some of them can be used also for free, their customisation is very limited.  If you decide to go for the paid version, you will get many advanced settings- not only you can style it but also you can decide on which pages and when the pop up shows etc.

This option is definitely easier and ideal for those without basic html and css skills.

OPTION 2.

Installing a wBounce Plugin (FREE)

This option is completely free and it integrates Contact Form 7 with a great plugin, created by talented Kevin Weber, called wBounce. To create a nice looking form you need to have some basic html and css coding skills, but all the code can be inserted via dashboard directly into plugin’s setting.

Start from installing wBounce in your WordPress.

Now, go to the “Inline form” that you previously built and duplicate it. Change its name to “wBounce” and save it! Make sure that the API and list ID were also copied in the Mailchimp tab, if not, then just copy and paste them from the “Inline form”. 

Also, in the first “Form” tab, I also change the names of ‘divs’ so the form can be styled easier. You can replace your “wBounce” form with the below code:

<div class="wbounce" style="text-align:center;"><p><h6>Like this post? Sign up for my monthly newsletter!</h6> Learn how to attract a relevant audience to your websites.</p> <div class="wbounceform">[text* your-name placeholder "First name"] [email* your-email placeholder "Your email"] [submit "Send"]</div></div>

save the form and copy it’s shortcode.

Now, go to the wBounce plugin:

wBounce- main settings

 

Paste the shortcode in the wBounce content (screenshot above). I also always check the test mode option, so I can see the form when I am logged in.

That’s it. If you followed those steps, you should not only have your contact form integrated with your Mailchimp list, but also a basic inline form and an exit pop up! I hope you have enjoyed this “How to Optimise Your MailChimp Signup Process on Your WordPress Site in 30 minutes” tutorial and I wish you many subscribers!

Do you have questions or comments? If so, feel free to leave a message below!

Mags Sikora

I'm Mags, an SEO Consultant, London