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:

* indicates required

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

Join The Confident Man Online Course



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.


Graham

I'm the creator of BuildYourBlog.net.

12 Comments

Rebecca · February 1, 2012 at 5:33 am

this was helpful, thanks! Do you know how to change the size of the form? I need it narrower (see the form I have now – http://www.theuncagedlife.com – I want it that size). Any ideas?

Thanks!

Lee · January 25, 2012 at 7:39 pm

yep that’s good alright cheers for the code. To Jonathan above these 2 videos I did show you how to change the submit button color and where to find the handles that control it

cheers

Lesley · January 2, 2012 at 5:07 am

Do you know how to place the submit button NEXT to the field vs under the field on the mailchimp sign up forms?

    Graham · January 4, 2012 at 12:31 pm

    I haven’t done it myself, but try shrinking the width of the input field, and using “float: right” for the style of the div with the Subscribe button. Good luck!

Miley · December 11, 2011 at 2:37 am

Mailchimp is great!

Jack | bmw 116 · November 29, 2011 at 1:16 am

Graham, thanks for sharing this. I have tried on one of my blogs to set up a mailchimp function but I ended up outsourcing the form creation task.

I’ll have to follow your instructions in detail and see what it can be done as I wanna change my outsourced form.

    Graham · November 29, 2011 at 11:09 am

    Yes, it took me ages to work out. Glad you found it helpful!

Jer · September 8, 2011 at 11:09 pm

Thanks! All I needed was the Raw HTML plugin from WordPress, and my form looks great.

Jonathan · August 20, 2011 at 4:33 am

Hi Graham. I just wanted to say a big thank you for your post. I spent literally hours last night trying to style my MailChimp signup form so it didn’t look like garbage. It’s still not perfect (I can’t figure out how – or if I even can – change the background color of the button. Thus far, I’ve only been able to modify the font color), but it’s a heck of a lot better than the stock form. Thanks again.

mg · July 14, 2011 at 3:53 am

I wonder, how would you make it just a simple one line form, like an input field with the text “your e-mail” in it, then the submit button on the right, but maybe not the ugly mailchimp one, something more html/css.
what do you think?

    Graham · July 14, 2011 at 11:44 am

    It’ll take some tweaking and I haven’t done this myself, but I’d start by turning off “required field” for all fields other than “Email Address” in the MailChimp form designer, then follow the instructions in my article but make the Subscribe button “float: right” and adjust the widths to suit your template and make everything fit. I’m not sure how to put the text in the input field; this is the way MailPress does it but I’m not crazy about it. Good luck!

Juan · July 9, 2011 at 8:40 am

I have some issues with mailchimp form in my wp site.

Can’t get to fit nice and clean.

I’m not sure if your post will help me with that.

I’ll try

Thanks

Juan

Leave a Reply

Avatar placeholder

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.