Last month I shared a quick tutorial on customizing the Jetpack Subscription opt-in form. While I’m a big fan of using this widget, I think we can all agree that MailChimp is the most well-known email marketing service there is. Whether you’re sending a unique newsletter to readers each week or simply sending RSS-based emails, MailChimp makes it extremely easy to send emails that are highly customized to fit your brand.
Aside from your actual MailChimp newsletter, an important element to customize is your opt-in form! Here’s a step-by-step guide on beautifying your opt-in form so that it grabs your readers’ attention but also blends in with your current brand.
First thing’s first – you need to create a MailChimp account and start a list. We haven’t built a newsletter following through MailChimp yet, so we’ve got zero subscribers. Woo!
When you’ve created your list, click the dropdown arrow next to Stats and choose Signup forms.
You’ll have your choice of four different signup forms option, but for this specific tutorial we’re going to go with Embedded forms.
On this page, choose the Naked option which will give you a really basic/boring form so we can customize it from scratch. You’ll see a lot of settings on the left side of the page, so configure those as you wish. Then copy the HTML code for your signup form.
Now open up your WordPress dashboard, go to Appearance > Widgets, and drag a text widget to your primary sidebar. Paste your HTML code in there, and check out your site. Depending on what your current theme is (I’m using the Genesis Sample Theme), your sidebar should look something like this:
The first thing we’ll do is put the labels Name and Email inside of the fields instead of above them. Go back to the HTML code in your widget and find this set of codes:
<div class=”mc-field-group”>
<label for=”mce-FNAME”>Name </label>
<input type=”text” value=”” name=”FNAME” class=”” id=”mce-FNAME”>
</div>
<div class=”mc-field-group”>
<label for=”mce-EMAIL”>Email Address </label>
<input type=”email” value=”” name=”EMAIL” class=”required email” id=”mce-EMAIL”>
</div>
And replace it with this:
<div class=”mc-field-group”>
<input type=”text” value=”Name” name=”FNAME” class=”” id=”mce-FNAME”>
</div>
<div class=”mc-field-group”>
<input type=”email” value=”Email” name=”EMAIL” class=”required email” id=”mce-EMAIL”>
</div>
All we’re doing is deleting the labels and adding a “value” to each input field.
Now we’re going to add some CSS! I recommend editing your CSS through the Jetpack plugin, but if you’re experienced enough you can edit your stylesheet directly.
Feel free to copy and paste the codes below but remember to tweak the colors, fonts, sizing, etc. to fit the vibe of your own website. Visit our intro to CSS for a list of styling options.
Customizes Widget Title:
#mc_embed_signup_scroll h2 {
font-size: 15px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}
Creates a Margin Between Fields:
.mc-field-group {
margin-bottom: 8px;
}
Customizes Input Fields:
input#mce-FNAME, input#mce-EMAIL {
border: 1px solid #ffb2a0;
padding: 12px;
font-size: 14px;
}
Customizes Subscribe Button:
#mc-embedded-subscribe {
background: #ffb2a0;
width: 100%;
font-size: 15px;
letter-spacing: 2px;
margin-top: 8px;
}
Adds Hover Effect to Subscribe Button:
#mc-embedded-subscribe:hover {
opacity:0.7;
}
Want to add a background color with padding? Just add this code and change the color code and padding size to fit your website’s style:
#mc_embed_signup {
background: #F9F8F6;
padding: 30px;
}
Pretty! That’s all there really is to it. In the next few weeks I’ll be sharing a tutorial on how to make your optin form vertical, so keep a lookout for that.
Don’t feel like coding it yourself? Email me at jennifer@earlgreycreative.com for an estimate!
Eliannah says
I was so excited when I saw the title of this post in my inbox this morning! I’ve been searching for a straight forward post on mail chimp opt-in customization. I tried following a long another one and it didn’t work for me at all. I went straight home today and implemented it on my site. Thank you!
Jennifer says
Awesome! Your opt-in form looks great :) glad this worked for you!
Kellie says
Super helpful!! This is exactly what I was looking for, thank you :)
Kelly Misbin says
Any suggestions on how to customize for Squarespace!? Thank you!
McKinzie says
I am with Kelly! I would love a Squarespace tutorial.
Megan | Balancing The Baby says
Wow, thank you, thank you, thank you for this post! I have been trying to figure this out forever, and since I’m a total blogging amateur, I thought I’d never finally get a good looking opt-in form on my blog. I’ll be trying this tomorrow for sure.
Angelica says
Hi! I just want to THANK-YOU! Your site has been a huge lifesaver! I just had my website completely remodeled. My website designer asked me to provide the “naked HTML” for the Mailchimp list and I had no idea what she was talking about! I googled it and your AMAZING website came up! You are such a fantastic resource! Thank-you so much for providing this amazing website!!
Sincerely,
Angelica
CLARENDONMOMS.COM
Jennifer says
Hi Angelica! Wow, that means so much to us! So happy you were able to find out site. :) Also, your website looks beautiful!!
kiki says
Thank u so much lovely!
Just want to mention, because I was having a hard time (was too lazy to use the jetpack plugin, idk if it would make a difference)
When I copied and pasted your code, it would mess up because I have to edit the quotation marks!! The quotation marks in the first code you gave had to be edited since it came out under your font ? So just deleted it and replacing it with regular quotations (“”) would work !
Thanks a lot – Kiki