How to Embed a MailChimp Signup Form in WordPress

MailChimp provide a great email marketing service; you can start off for free and only have to start paying as your list, and presumably your profit, grows. But I can’t for the life of me understand why the embedded signup form they provide is so goddam ugly. I just wanted a simple, attractive box for my visitors to enter their name and email address to subscribe to my Confident Man Online confidence-building course. Yet this is the best I could get out of MailChimp’s embedded form generator:

God, that’s ugly. What I really wanted was something more like this:

Ah, now that’s better. So here’s how to fix it:

Firstly, start by setting the fields and colour scheme that you want in the MailChimp form designer under Lists -> Create Forms -> Try Fancy New Forms.

Then go to For Your Website -> Signup Form Embed Code. Disable include form label since the default form label is unappealing, but enable include required fields notice since you’ll modify that to label the form later. Also enable disable all javascript; I’ve never been able to get the javascript-enabled version of the signup form to work; the validation checks work, but it never actually subscribes you to the list.

Make sure you have the Raw HTML plugin installed, otherwise WordPress will mangle MailChimp’s code. Copy and paste the code from copy/paste into your site into the HTML tab of the WordPress editor, surrounding it with the raw comment marker like this:

<!--raw-->
<!-- Begin MailChimp Signup Form -->
...
<!--End mc_embed_signup-->
<!--/raw-->

Now you’re about to start hacking MailChimp’s code to make it look respectable. Here’s what to modify…

I want the form centred, so search for the line saying:

<div id="mc_embed_signup" style="width: 450px;">

And change it to:

<div id="mc_embed_signup" style="width: 450px; padding-left: 105px;">

Adjust the width and padding-left settings to centre the form. It would be nice if “text-align: center” worked here, but I just couldn’t get it to happen and my patience for hacking CSS is limited even on a good day.

[wpsociallock title=”Wait, there’s more! Click here to unlock the rest of the article.”]

To create a nicely centered label at the top of the form, modify the line:

<div style="text-align: right;font-style: italic;
overflow: hidden;color: #333333;margin: 0 9% 0 0;">* indicates required</div>

To:

<div style="text-align: center;font-weight: bold; font-size: 150%;
overflow: hidden;color: #333333;margin: 0;">Your Form Label</div>

I want the field label to the left of the input field, not above it. And I don’t want the pesky “required” asterisk. So change:

<label for="mce-FNAME" style="display: block;margin: .3em 0;
line-height: 1em;font-weight: bold;">First Name:
<strong class="note-required">*</strong>

To:

<label for="mce-FNAME" style="display: block;margin: .3em 0;
line-height: 1em;font-weight: bold;float: left;">First Name:

The input field itself needs to float to the right, and shrink a bit to fit. So change:

<input type="text" value="" name="FNAME" class="required" id="mce-FNAME"
style="margin-right: 1.5em;padding: .2em .3em;width: 90%;float: left;z-index: 999;">

To:

<input type="text" value="" name="FNAME" class="required" id="mce-FNAME"
style="margin: 0 0;padding: .1em .3em;width: 60%;float: right;z-index: 999;">

Repeat those last three changes for each field in your form.

To centre the Subscribe button nicely, go down 5 lines and change:

<div><input type="submit" value="Subscribe" name="subscribe"
id="mc-embedded-subscribe" class="btn" style="clear: both;width: auto;
display: block;margin: 1em 0 1em 5%;"></div>

To:

<div style="padding-left:140px;"><input type="submit" value="Subscribe" name="subscribe"
id="mc-embedded-subscribe" style="clear: both;width: auto;
display: block;margin: 1em 0 0em 5%;" /></div>

Adjust the padding-left: value accordingly to center the button. Once again, I couldn’t work out how to get it to auto-center. Fix the unclosed input tag bug in MailChimp’s code here, to improve your CSS karma. It’s a pity the MailChimp folks aren’t using the W3C XHTML validator religiously.

And that’s it! Leave the rest of the code alone, and watch your subscriber count grow now that you have a pretty sign-up box. Hopefully one day MailChimp will fix their form designer so it generates this by default.