I’m going to show you how easy it is to add a Mailchimp email capture form to your WordPress site, or any site for that matter. Read on to learn how!
What is a Mailchimp Email Capture Form?
If you aren’t aware of what Mailchimp is, or are new to the world of email marketing, Mailchimp lets you capture contacts and send emails to them.
I use Mailchimp to power email marketing for SitesMonster because they offer a free plan up to 2,000 contacts.
An email capture form is a simple form situated somewhere on your website where interested readers can enter their email address.
For example, take a look at my email capture form that is at the bottom of every tutorial I post on SitesMonster:
It’s clean, simple, and explains exactly what the reader is signing up for.
Notice how there’s also one field: a single input for the reader’s email address.
There’s no additional first name, last name, or address fields.
That’s because an email capture form some be friction-less. They shouldn’t have to spend long filling out the form, and or question whether or not the data they are providing is too personal enough to be stored in some database somewhere.
Create the Mailchimp Email Capture Form
Sign in to your Mailchimp account, or create a new account if you haven’t already done so.
From the menu in the top left-hand corner, click Create and then Signup form from the drop-down that appears.
Once clicked, you should now see a modal window (a floating window) with the Embedded form tab option selected.
Choose the Mailchimp audience list that this email capture form will populate when your readers enter their email address and click submit.
Once you’ve selected an existing audience or created a new audience, click the Begin button.
You will now see the Embedded forms customize page within Mailchimp. From here, you can modify the title of the form, what fields are displayed, as well as adjust the style of the form.
Create a Custom HTML form and Connect it to Mailchimp
Now, you can by all means use the style and design that Mailchimp provide to you from that page, however I use Bootstrap on SitesMonster, and I want to use my own custom styling.
To do so, copy the form action string from the Copy/paste onto your site section on the Mailchimp Embedded forms page.
It will look something like this:
Don’t use that line of code above! That’s specific to SitesMonster and you will only be sending me email addresses if you do so.
Then, copy and paste the following HTML code somewhere on your WordPress pages:
<form action="YOUR_MAILCHIMP_FORM_ACTION_STRING_HERE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" validate> <div class="input-group mb-3"> <input type="email" class="form-control form-control-sm" name="EMAIL" id="mce-EMAIL" placeholder="Your Email Address" required> <div class="input-group-append"> <button class="btn btn-sm btn-primary" type="submit">Sign Me Up!</button> </div> </div> </form>
Replace the part where it says YOUR_MAILCHIMP_FORM_ACTION_STRING_HERE with the actual form action string in your own Mailchimp.
Test out Your New Mailchimp Email Form in WordPress
Save any changes, load up the page in your web browser and enter your email address, then click Sign Me Up!
Now, jump back over to Mailchimp, click on the Audience navigation item in the top menu, and you should see the email address you just entered.
And that’s it! You will now have a working Mailchimp email form in your WordPress site.
If you want to make the most of your Mailchimp account, learn how to add a Mailchimp popup to WordPress.