Styling a MailChimp Form

Last week, Nick Reese wrote an article detailing the ins and outs of list building. Its an excellent article, and I’d highly recommend you read it. I’d also highly recommend you use MailChimp. However, it leaves you with one small problem: How can you place a sign up form for your list on your blog?

mailchimp

Like Nick said in his article, you can use Gravity Forms, but that’s a bit of overkill. Let’s take a look at a much simpler alternative. Basically, we’re going to grab the embed code from MailChimp, strip out all of the excess, and apply our own styling.

Grabbing the Code

First, you need to login to your MailChimp account, and click the “lists” tab. Then, find the list you want to display a sign-up form for, and click “forms” as seen below:

By default, your form contains a submit button along with two fields – one for first name and one for email address. If you would like to add to or subtract from that you can, but this tutorial is just going to cover the default form since that is what the overwhelming majority of bloggers will probably do. The default form should look something like this:

Next, click “create embed code for small form.” This will take you to the embed code creation page.

On the right side of the page you see something that looks like the image to the right. You’ll need to do several things here:

  1. select “include all fields”
  2. uncheck “include form label”, “include required field notice”, and “include interest groups”
  3. don’t enter a width for your form
  4. under “Form Colors” select “I’m a pro”

Once you’ve done all of that, grab the code from the window in the bottom left portion of the page. It should look something like this:

Make sure you grab your own code from MailChimp. Using the code below will not work!

<!-- Begin MailChimp Signup Form --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script><script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script><script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script><script type="text/javascript">// <![CDATA[
// delete this script tag and use a "div.mce_inline_error{ XXX !important}" selector
// or fill this in and it will be inlined when errors are generated
var mc_custom_error_style = '';
// ]]></script>
<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="http://yoursite.us2.list-manage.com/subscribe/post?u=541ad12c9ffc49f5929b53aa6&id=2d9d4c2327" method="post" name="mc-embedded-subscribe-form" target="_blank">
<fieldset>
<div class="mc-field-group"><label for="mce-FNAME">First Name </label> <input id="mce-FNAME" type="text" name="FNAME" value="" /></div>
<div class="mc-field-group"><label for="mce-EMAIL">Email Address </label> <input id="mce-EMAIL" class="required email" type="text" name="EMAIL" value="" /></div>
<div id="mce-responses"></div>
<div><input id="mc-embedded-subscribe" class="btn" type="submit" name="subscribe" value="Subscribe" /></div></fieldset>
<a id="mc_embed_close" class="mc_embed_close" href="#">Close</a>

</form></div>
<script type="text/javascript">// <![CDATA[
var fnames = new Array();var ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email';var err_style = '';
try{
    err_style = mc_custom_error_style;
} catch(e){
    err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: ERROR_BGCOLOR none repeat scroll 0% 0%; font-weight: bold; float: left; z-index: 1; width: 80%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: ERROR_COLOR;';
}
var mce_jQuery = jQuery.noConflict();
mce_jQuery(document).ready( function($) {
  var options = { errorClass: 'mce_inline_error', errorElement: 'div', errorStyle: err_style, onkeyup: function(){}, onfocusout:function(){}, onblur:function(){}  };
  var mce_validator = mce_jQuery("#mc-embedded-subscribe-form").validate(options);
  options = { url: 'http://themebig.us2.list-manage1.com/subscribe/post-json?u=541ad12c9ffc49f5929b53aa6&id=2d9d4c2327&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
                beforeSubmit: function(){
                    mce_jQuery('#mce_tmp_error_msg').remove();
                    mce_jQuery('.datefield','#mc_embed_signup').each(
                        function(){
                            var txt = 'filled';
                            var fields = new Array();
                            var i = 0;
                            mce_jQuery(':text', this).each(
                                function(){
                                    fields[i] = this;
                                    i++;
                                });
                            mce_jQuery(':hidden', this).each(
                                function(){
                                    if ( fields[0].value=='MM' && fields[1].value=='DD' && fields[2].value=='YYYY' ){
                                        this.value = '';
                                    } else if ( fields[0].value=='' && fields[1].value=='' && fields[2].value=='' ){
                                        this.value = '';
                                    } else {
                                        this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
                                    }
                                });
                        });
                    return mce_validator.form();
                },
                success: mce_success_cb
            };
  mce_jQuery('#mc-embedded-subscribe-form').ajaxForm(options);

});
function mce_success_cb(resp){
    mce_jQuery('#mce-success-response').hide();
    mce_jQuery('#mce-error-response').hide();
    if (resp.result=="success"){
        mce_jQuery('#mce-'+resp.result+'-response').show();
        mce_jQuery('#mce-'+resp.result+'-response').html(resp.msg);
        mce_jQuery('#mc-embedded-subscribe-form').each(function(){
            this.reset();
        });
    } else {
        var index = -1;
        var msg;
        try {
            var parts = resp.msg.split(' - ',2);
            if (parts[1]==undefined){
                msg = resp.msg;
            } else {
                i = parseInt(parts[0]);
                if (i.toString() == parts[0]){
                    index = parts[0];
                    msg = parts[1];
                } else {
                    index = -1;
                    msg = resp.msg;
                }
            }
        } catch(e){
            index = -1;
            msg = resp.msg;
        }
        try{
            if (index== -1){
                mce_jQuery('#mce-'+resp.result+'-response').show();
                mce_jQuery('#mce-'+resp.result+'-response').html(msg);
            } else {
                err_id = 'mce_tmp_error_msg';
                html = '
<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>
';

                var input_id = '#mc_embed_signup';
                var f = mce_jQuery(input_id);
                if (ftypes[index]=='address'){
                    input_id = '#mce-'+fnames[index]+'-addr1';
                    f = mce_jQuery(input_id).parent().parent().get(0);
                } else if (ftypes[index]=='date'){
                    input_id = '#mce-'+fnames[index]+'-month';
                    f = mce_jQuery(input_id).parent().parent().get(0);
                } else {
                    input_id = '#mce-'+fnames[index];
                    f = mce_jQuery().parent(input_id).get(0);
                }
                if (f){
                    mce_jQuery(f).append(html);
                    mce_jQuery(input_id).focus();
                } else {
                    mce_jQuery('#mce-'+resp.result+'-response').show();
                    mce_jQuery('#mce-'+resp.result+'-response').html(msg);
                }
            }
        } catch(e){
            mce_jQuery('#mce-'+resp.result+'-response').show();
            mce_jQuery('#mce-'+resp.result+'-response').html(msg);
        }
    }
}
// ]]></script>
<!--End mc_embed_signup-->

Yeah…its an insane amount of code. I know. Most of it is there for tracking purposes, or for handling errors.

Parsing the Code

The first thing you need to do is move the scripts to the bottom of the your markup. The scripts should be inserted into your page just above the closing </body> tag. Here is the code what that looks like:

If you are a Thesis user you need to add add_action('thesis_hook_after_html', 'mailchimp_scripts'); after the function and paste the whole bit in custom_functions.php.

function mailchimp_scripts() { ?><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script><script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script><script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script><script type="text/javascript">// <![CDATA[
// delete this script tag and use a "div.mce_inline_error{ XXX !important}" selector
// or fill this in and it will be inlined when errors are generated
var mc_custom_error_style = '';
// ]]></script><script type="text/javascript">// <![CDATA[
var fnames = new Array();var ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email';var err_style = '';
try{
    err_style = mc_custom_error_style;
} catch(e){
    err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: ERROR_BGCOLOR none repeat scroll 0% 0%; font-weight: bold; float: left; z-index: 1; width: 80%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: ERROR_COLOR;';
}
var mce_jQuery = jQuery.noConflict();
mce_jQuery(document).ready( function($) {
  var options = { errorClass: 'mce_inline_error', errorElement: 'div', errorStyle: err_style, onkeyup: function(){}, onfocusout:function(){}, onblur:function(){}  };
  var mce_validator = mce_jQuery("#mc-embedded-subscribe-form").validate(options);
  options = { url: 'http://themebig.us2.list-manage1.com/subscribe/post-json?u=541ad12c9ffc49f5929b53aa6&id=2d9d4c2327&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
                beforeSubmit: function(){
                    mce_jQuery('#mce_tmp_error_msg').remove();
                    mce_jQuery('.datefield','#mc_embed_signup').each(
                        function(){
                            var txt = 'filled';
                            var fields = new Array();
                            var i = 0;
                            mce_jQuery(':text', this).each(
                                function(){
                                    fields[i] = this;
                                    i++;
                                });
                            mce_jQuery(':hidden', this).each(
                                function(){
                                    if ( fields[0].value=='MM' && fields[1].value=='DD' && fields[2].value=='YYYY' ){
                                        this.value = '';
                                    } else if ( fields[0].value=='' && fields[1].value=='' && fields[2].value=='' ){
                                        this.value = '';
                                    } else {
                                        this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
                                    }
                                });
                        });
                    return mce_validator.form();
                },
                success: mce_success_cb
            };
  mce_jQuery('#mc-embedded-subscribe-form').ajaxForm(options);

});
function mce_success_cb(resp){
    mce_jQuery('#mce-success-response').hide();
    mce_jQuery('#mce-error-response').hide();
    if (resp.result=="success"){
        mce_jQuery('#mce-'+resp.result+'-response').show();
        mce_jQuery('#mce-'+resp.result+'-response').html(resp.msg);
        mce_jQuery('#mc-embedded-subscribe-form').each(function(){
            this.reset();
        });
    } else {
        var index = -1;
        var msg;
        try {
            var parts = resp.msg.split(' - ',2);
            if (parts[1]==undefined){
                msg = resp.msg;
            } else {
                i = parseInt(parts[0]);
                if (i.toString() == parts[0]){
                    index = parts[0];
                    msg = parts[1];
                } else {
                    index = -1;
                    msg = resp.msg;
                }
            }
        } catch(e){
            index = -1;
            msg = resp.msg;
        }
        try{
            if (index== -1){
                mce_jQuery('#mce-'+resp.result+'-response').show();
                mce_jQuery('#mce-'+resp.result+'-response').html(msg);
            } else {
                err_id = 'mce_tmp_error_msg';
                html = '
<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>
';

                var input_id = '#mc_embed_signup';
                var f = mce_jQuery(input_id);
                if (ftypes[index]=='address'){
                    input_id = '#mce-'+fnames[index]+'-addr1';
                    f = mce_jQuery(input_id).parent().parent().get(0);
                } else if (ftypes[index]=='date'){
                    input_id = '#mce-'+fnames[index]+'-month';
                    f = mce_jQuery(input_id).parent().parent().get(0);
                } else {
                    input_id = '#mce-'+fnames[index];
                    f = mce_jQuery().parent(input_id).get(0);
                }
                if (f){
                    mce_jQuery(f).append(html);
                    mce_jQuery(input_id).focus();
                } else {
                    mce_jQuery('#mce-'+resp.result+'-response').show();
                    mce_jQuery('#mce-'+resp.result+'-response').html(msg);
                }
            }
        } catch(e){
            mce_jQuery('#mce-'+resp.result+'-response').show();
            mce_jQuery('#mce-'+resp.result+'-response').html(msg);
        }
    }
}
// ]]></script>

Now that we’ve pulled the scripts out, we need to reduce the HTML. You can chop it all the way down to this:

Next, we add classes, values, and get rid of more excess MailChimp stuff. We also add onfocus="" and onblur="" properties so that the text in each field will disappear when the field is active:

You can place that code where ever you like. I’d recommend placing the form at the top of the sidebar, in the post footer, or both. Typically you’ll want to add an <h3> heading and a paragraph (<p>) above your form.

Adding Style

The only thing left to do is add style! This is highly dependent upon your particular design, but here is a decent starting point based on the classes used in the HTML above:

.mailchimp_form .form_field { background: #fff; border: 1px solid #888; padding: .7em 1em; margin-bottom: .5em; }
.mailchimp_form .button { background: #888; color: #fff; border: 1px solid #000; font-weight: bold; }
.mailchimp_form .button:hover { background: #000; }

Obviously, you will want to change colors, etc., but that should give you a great starting point!

Thesis Bonus

If you’re a Thesis user, here is code to place in custom_functions.php that will place your form at the top of the sidebar! Obviously You’ll need to insert your own form code ;)

function mailchimp_form() { ?>
<ul><li class="widget mailchimp_form">
<form class="mailchimp_form" action="http://yoursite.us2.list-manage.com/subscribe/post?u=541sfasddf6asddf8976f5929b53aa6&id=2d9d4c2327" method="post" name="mc-embedded-subscribe-form" target="_blank">
<input class="form_field" onfocus="if (this.value == 'First Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'First Name';}" type="text" name="FNAME" value="First Name" /> <input class="form_field" onfocus="if (this.value == 'Email Address') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Email Address';}" type="text" name="EMAIL" value="Email Address" /> <input class="form_button" type="submit" name="subscribe" value="Get Started!" />
</form></li>
</ul>

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Adam Baird

Adam is a Wordpress designer, Thesis specialist, and blogger from Indianapolis, Indiana. He writes web design tutorials and resources on Theme Big. Check out his custom work here.

Leave a Reply

Comments

  • Jim Munro says:

    Great tutorial. This is timely since I am migrating from Aweber over to Mailchimp. Plus I use Thesis, so double-win!

    This will save me some time. Thank YOU!

  • Can we see the finished form?

  • Mark says:

    This is absolutely STUNNING timing. Last night I was trying to do exactly the same thing.

    I was hoping to put put an mailchip form, that used a list id from a custom field, and only displayed on the sidebar if the custom field had a value?

    Any ideas?

  • Mark says:

    Hi, followed tutorial, and no luck.

    CSS not working and form not processing. Have placed scripts in correct places etc, seems as form code is not activating javascript?

    Mark

  • Thanks! This worked great! I appreciate your detailed tutorial.

  • Cathy says:

    Awesome tutorial…thank you! I was curious if you could post an example of what the final form looks like? Would be nice to see a jazzy form 100% completed, not just the code. Thanks!

  • Noah says:

    This was very helpful. Helped me do exactly what I couldnt figure out how to do.

    Thank you.

  • Tinh says:

    The most important thing I love Mailchimp is that it offers free account forever with 1k subscribers and free 6k emails per month. That is excellent for newbie who would like to get used to email marketing like me. Thanks

  • William says:

    Thanks so much for this post. I have tried what you demonstrated but it doesn’t seem to be working. Can you take a look at my site and tell me what I’m doing wrong…
    Thanks

  • Hi. 1st off, thank you for one of my fav Thesis Tuts! :)

    I am currently trying to get this to run in a shortcode but get the following error…

    Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /xxxx/custom_functions.php on line 275

    any idea how to fix?

    Cheers Dude!

  • I am trying to set the form now and I wish I could see how this form looks before I put the code in :)

    Is there a way to create a form in an image, so the image would be background and not just the plain color?

  • Jeff says:

    I’ve been looking for a way to create a decent Mail Chimp form. I’ve heard so many good things about them and their service, I’m really surprised they don’t have an easier, user-friendly way to create forms that don’t look like they’re from 1999. Thanks for sharing!

  • Cam Collins says:

    This is a great post. I found a slight problem in the Thesis Bonus. In the line:

    “class” should be equal to “button” or the CSS should be changed to “form_button”.

    Other than that, this helped me tremendously on my Thesis site.

    Best,

    Cam

  • steve says:

    On the thesis theme, where do you put the css?

    .mailchimp_form .form_field { background: #fff; border: 1px solid #888; padding: .7em 1em; margin-bottom: .5em; }
    .mailchimp_form .button { background: #888; color: #fff; border: 1px solid #000; font-weight: bold; }
    .mailchimp_form .button:hover { background: #000; }

  • Kyle says:

    Great post! You have saved me much time, effort and frustration! Thanks.

  • Rob says:

    Just wanted to let you know that your article is still helping people out! I’m a real HTML amateur and was having a terrible time figuring out which parts of the code could safely be stripped out, so finding this post saved me SO much time. Thank you!

  • Jamie says:

    Great informative post that helped me nail this really quickly, thanks :)

  • Jon Griffith says:

    The form works wonderfully, but is there a method to re-direct after submission? The text “E-mail Address” pops back into the form field when it takes the submission, but no other visual confirmation occurs (besides e-mail to subscriber.)

  • Sajt Tim says:

    Thank you for great post about styling a mailchimp form. That helped me to personalized form for my website.

  • I spent about an hour trying to get the short form integrated into my Thesis WordPress site last night. Wish I had found this post earlier! Thanks

  • Lisa says:

    Cheers for this been trying to find a newsletter solution for days now, i really need to implement this into my footer and this has worked a charm with mailvhimp. Thanks again

  • Man, Mailchimp must have changed in this meantime, because I’m not being able to create a big code like yours, that responds on the same page. Now they only give me a short one which takes me to another page.

    I’m trying to make one just like yours but, I keep sending subscription to yours and not to mine. (because I’m using your code).

    Whould you know which parts should I change on your code to make it work with my list? (ID’s, Url’s or something?)

    Much appreciated.

  • Peter | Web Services For Business says:

    Thanks, Adam.

    I hit a couple snags while styling up Mailchimp in a client’s Thesis-based site and your easy to follow breakdown helped me find the issues.

    Appreciate it.
    Peter

  • Dan says:

    Any pointers on getting the Ajax success message to show up? It seems as though you’ve stripped that out of your code.

  • Koundeenya says:

    Cool one Adam! I’ve been using Mailchimp from an year. I hate its custom form for websites. Now this can help in designing an uber cool one.

  • Celine says:

    I think this post needs updating, no? Since this was written, Mailchimp has changed its layout somewhat… Also, could you give clearer instructions about how to take the script out and add style? thanks!

  • Hafis says:

    Thank you, Just looking forward to Mailchimp…

  • Jim says:

    Adam,
    I’m using the MailChimp WordPress plugin but its not bringing the styling from MailChimp to my site. Is copying the code the best way to accomplish this? Thanks, love the site.

  • Althea says:

    This is great information. Unfortunately, Mailchimp has changed their layout rendering you post out dated. Would you mind setting up a new tutorial??

  • Erica says:

    Thank you for this excellent tutorial, the ONLY one like it I found on the web.