Home » Web Tutorials » WordPress » How to Add Mailchimp Email Subscription Widget in WordPress?

How to Add Mailchimp Email Subscription Widget in WordPress?

There are a lot of benefits to gain as a website owner by adding an email subscription widget or growing an email list. Apart from building a relationship with your audience or customers, email communication help increase traffic and sales in any business. WordPress offers different ways to integrate email subscription widget in your site. In this article, we will explain with the popular Mailchimp service and show how to add email subscription widget using Mailchimp signup form and a plugin. If you want to show email subscription widget as a pop-up based on user exit, check out the list of plugins that can help you with that.

Email Subscription for WordPress

The first step is finding an email subscription service that matches your business. There are a lot of them like Constant Contact, AWeber, Mailchimp, but we prefer using Mailchimp as the case study. Then adding the signup or subscribe form and sending an email comes as the final setup.

1. Create a MailChimp Account

Go to the official website of MailChimp and click on the “Sign Up Free” button. Fill in the details of an email, username and password for the account. Mark the checkbox if you won’t like to receive promotional emails of Mailchimp products and services. Then, tap the “Sign Up” button to submit the form.

Mailchimp Account Creation Form
Mailchimp Account Creation Form

A message pops up pointing you to check your email for an activation of your account. On checking your email (inbox and spam folder) and you didn’t receive any mail, click the “Re-enter your email and try again” text link. The email message would have a title like “Activate your Mailchimp account” and the sender as “Mailchimp Client Services”. Open the mail and click on the “Activate Account” message button. A dashboard will appear where you run a confirmation that you are a human. You may need to click on the “I’m Not A Robot” button to deal with the reCAPTCHA puzzle. Immediately, there should be a redirection to choose a plan for your account.

Then, choose a suitable plan that matches your business needs. Each plan comes with the number of email subscribers you are projecting for business and the number of emails to send per month. We chose the “Free” plan for illustration here. Also, select the currency you want to pay from the Billed in the “US Dollars” dropdown button and click on the “Next” button once done.

Choosing Mailchimp Account Plan
Choosing Mailchimp Account Plan

You can now fill in your account personal details having in mind that the first name and last name are mandatory fields. Check the boxes if you find the need for them and click the “Continue” button once you are okay with your inputs.

Filling In MailChimp Personal Details
Filling In MailChimp Personal Details

This will take you through a wizard and you need to fill bunch of details for address, contacts, etc. When you are in the final step, mark the checkboxes to select optional promotional mail you wish to receive from Mailchimp. And click the “Continue” button to finish your account setup. Thus, there is a display of your account dashboard.

Finish Up MailChimp Account Setups.
Finish Up MailChimp Account Setups.

2. Setup Tags in MailChimp

Now that you have successfully created a Mailchimp account, the next step is to create your signup form. Before that you need to create tags, which help segment, organize or identify a specific audience. So, click on the “Tags” left sidebar menu and tap the “Create Tag” button. Enter the tag name (we are using “Customer”) and click the “Create” button.

Creating Audience Tags in Mailchimp
Creating Audience Tags in Mailchimp

3. Create Sign Up Form in MailChimp

Click on the “Signup forms” menu from the “Audience” menu in your account dashboard. Scroll down and then select “Embedded Forms” from the list of options.

Creating Signup form in Mailchimp
Creating Signup form in Mailchimp

You will have a display page where you can make all configurations. Select the “Form Fields” menu to add more labels to your sign up form as you need.

Editing Form Fields in Mailchimp Signup Form
Editing Form Fields in Mailchimp Signup Form

Use the back arrow once done and tap the “Setting” menu afterwards. Change the “Form Title” to whatever you need, set the form “Width” size in pixels or leave it empty (much preferable).

Make Settings for the MailChimp SignUp Form
Make Settings for the MailChimp SignUp Form

Hit the back arrow and now select the “Tags” drop menu. Click on the column drop arrow and choose the tag(s) for this form (we created “Customers” in our illustration). Then, click the “Save” button and tap the back arrow.

Selecting Tags in Mailchimp Signup form
Selecting Tags in Mailchimp Signup form

You can further click the “Referral Badge” drop menu and change its color style. Removal of Mailchimp badge comes with the upgraded plan, and tap the back arrow once done with selection. Now, click the “Continue” button after all these edits to proceed. On the page that appears, click the “copy code” button to have the form embed snippet for your WordPress website, and that’s all.

Mailchimp Signup Embedded Form Code Snippets
Mailchimp Signup Embedded Form Code Snippets

4. Embed MailChimp Signup form in WordPress

Switch to your WordPress admin dashboard and go to “Appearance > Widgets” menu. Add a “Custom HTML” block then paste the code snippets you copied from the Mailchimp signup form into it.

Pasting MailChimp Signup Form Code Snippets into WordPress widget
Pasting MailChimp Signup Form Code Snippets into WordPress widget

Finally, hit the “Update” button to save changes. Further, go to your website URL to see the display of the Mailchimp signup form.

WordPress Website Display of Mailchimp Signup form
WordPress Website Display of Mailchimp Signup form

At least enter one form detail (for instance, use your personal own) to populate your audience for a test run on how to create and send your first campaign (email) for subscribers.

5. Create & Send Campaign (Email) to Subscribers

Go to your Mailchimp account dashboard, click on the “Campaigns” drop menu, and by default, it highlights the “All campaigns” sub-menu. Click the “Create Campaign” button on the right top of the page.

MailChimp Create Campaign Dashboard
MailChimp Create Campaign Dashboard

Click on “Email” menu and choose one of the available options that matches your intent for sending an email. You can choose regular, plain text or template option and we will select plain text option as an example. After that enter the campaign name and then click the “Begin” button.

Crafting an Email Campaign in Mailchimp
Crafting an Email Campaign in Mailchimp

Proceed to select the option for the set of subscribers you want to receive the email.

Selecting Campaign Audience in Mailchimp
Selecting Campaign Audience in Mailchimp

Then, click the “setup” text link showing at bottom of the page and fill in the details that you would require to send an email on the page that appears.

Setting Campaign Info in Mailchimp
Setting Campaign Info in Mailchimp

Next, go to the “Plain-Text” link to view the email message. Clear the “— ENTER YOUR CONTENT HERE —” text you find on the page and write your email message. Afterwards, click the “Confirm” link below the page.

Customizing Email Message with Mailchimp
Customizing Email Message with Mailchimp

Do further editing if necessary on the confirmation page displayed and click the “Send” button beneath once done.

Confirming Mailchimp Campaign Setup
Confirming Mailchimp Campaign Setup

Then comes a pop to inform you of the message you are trying to send to subscribers, so click the “Send now” button.

Confirmation to sending Mailchimp mail
Confirmation to sending Mailchimp mail

A redirection occurs to the confirmation dashboard that your email is on its way to the subscribers. You can also check your mail if you opted in as a subscriber to verify it’s working.

Mailchimp Email Confirmation Dashboard
Mailchimp Email Confirmation Dashboard

Integrating MailChimp with WordPress Using Plugin

Using Mailchimp signup form is an easy way though it has lots of limitations. For example, you can’t integrate the subscription widget to default WordPress comment form or your contact form. To handle this and get detailed reporting within your WordPress dashboard, you can use a third-party plugin like MC4WP: Mailchimp for WordPress. Note that this is an unofficial plugin and not developed by Mailchimp.

You can use this plugin to add email subscription widget in WordPress without the Mailchimp logo, allow category wise subscription and integrate with contact form. When you are in WordPress dashboard, install and activate “MC4WP: Mailchimp for WordPress” plugin. Hover on the “MC4WP” menu and click on the “Mailchimp” submenu in the admin dashboard. A page requesting an API key comes up, so you have to click the “Get your API key here”. And this redirects you to log into your MailChimp account.

MailChimp API Settings Dashboard
MailChimp API Settings Dashboard

Click the “Create A Client Key” from the dashboard that appears. Set the default audience, the label name and a developer mail for the key. Then mark the terms and conditions checkbox and click the “Create Key” button.

Setup Mailchimp Mobile Client Key
Setup Mailchimp Mobile Client Key

A success message pops up with your key, and now click the “Copy To Clipboard” button below Your Client Key title. Head over to where you left off in your WordPress API settings dashboard.

Successful Creation of MailChimp Client Key
Successful Creation of MailChimp Client Key

So, paste the text into the “API Key” field and click the “Save Changes” button to finish the setup. Your status now changes to connected in green color.

Pasting Mailchimp Client Key into WordPress dashboard
Pasting Mailchimp Client Key into WordPress dashboard

Now that you have connected your Mailchimp account, you can use the shortcode [mc4wp_form] anywhere on your posts to show the signup form. Alternatively, go to “Appearance > Widgets> section and add “Mailchimp for WP Form” widget to your sidebar or footer area if you want to show the signup form there.

Automatically Synchronizing WordPress Users to Mailchimp List

Though you can easily display the Mailchimp widget and collect emails from users as explained above, there is also another option available. You can sync any WordPress user role like subscriber, customer, contributor, etc. to the desired audience list in your Mailchimp account using FuseWP Lite plugin. The advantage here is that you can integrate Mailchimp with Contact Form 7 and other popular form plugins in addition to the default WordPress user registration. The premium version of FuseWP allows integrating with ecommerce plugins like WooCommerce or Easy Digital Downloads and enable double opt-in. That will cost you $119 / year for a single site license with full support and updates. 

The process has two steps:

Step 1 – Configure Mailchimp in FuseWP

  • Navigate to “Plugins > Add Plugin” section in your admin dashboard.
  • Search for “fusewp” to find the plugin.
  • Click the “Install Now” and then “Activate” button.
Install FuseWP Plugin
Install FuseWP Plugin
  • Go to “FuseWP > Settings” menu and scroll down to “Integrations” section under “General” tab.
  • Find Mailchimp option and click the “Configure” button.
Configure Mailchimp
Configure Mailchimp
  • Click the “Connect to Mailchimp” button on the pop-up that appears.
Connect to Mailchimp Account
Connect to Mailchimp Account
  • Login with your Mailchimp account to link FuseWP.
Authorize FuseWP in Mailchimp
Authorize FuseWP to Access Mailchimp
  • After linking, make sure to turn on double opt-in option which enables users to confirm their email address for subscribing. Since this is a premium feature, you should activate the license by adding the key under “FuseWP > Settings > License” section.  
Enable Double Opt-in
Enable Double Opt-in

Step 2 – Sync WordPress Users to Mailchimp List

  • Go to “FuseWP > Users Sync” menu and click “Add Sync Rule” button.
Add New Rule
Add New Rule
  • Select the “Source” as “User Roles” and click on the “Add Destination” button.
Add Destination
Add Destination
  • Now, select the relevant “User Role” from the dropdown (for example, Subscriber).
  • Choose Mailchimp for “Select integration” and then add relevant audience and tags from your Mailchimp account.
Sync Role to Mailchimp List
Sync Role to Mailchimp List
  • You can follow the same steps to add multiple user roles and map the audience list.
  • Make sure to save your change and publish the rules.

This will allow FuseWP plugin to automatically sync any WordPress user roles to Mailchimp audience list. You can create campaigns and send emails to them easily. Whenever the user role changes, the plugin will automatically reassign the user to corresponding Mailchimp list as per your synchronization setup. 

Wrap Up

If you do not want to use an additional plugin, then it is easy to go with the default Mailchimp signup form. However, you need to upgrade to premium plan for removing the logo and get additional features. Otherwise, the simpler option is to use MC4WP plugin and add email subscription widget in WordPress within few minutes. Alternatively, you can use FuseWP plugin to automatically add WordPress users to Mailchimp subscription list.

Leave a Comment

Your email address will not be published. Required fields are marked *