How to style the Mailchimp Plugin Form

Gary Eckstein WordPress 3 , , , , ,

Mailchimp is an awesome email newsletter service. There are numerous other popular email marketing/email list manager services such as Aweber, Constant Contact and iContact however my choice is definitely Mailchimp becaiuse of its brilliant customization options and integration availability with WordPress.

There are numerous means of integrating Mailchimp list signup forms in a WordPress Website including using the Embed code/HTML provided by Mailchimp, publishing a link to a Mailchimp hosted form or by integrating a form using a WordPress Plugin. The Mailchimp team have made available the MailChimp List Subscribe Form WordPress Plugin which does a great job of making it simple to add a list signup form as widget.

Mailchimp Styling Problem

The problem many people seem to have however is that the form styling doesn’t look all that great on many Themes. Often, once the Mailchimp form has been added as a widget there are gaps/spaces between the field label and the field itself. Unfortunately it’s not altogether obvious how to change the styling and some CSS manipulation is required.

For the steps described below you may be able to add the code directly into your Themes style.css file directly however this method may not always work due to the cascading. If your Theme supports a means of adding embedded CSS such as Suffusion then the code provided should work fine as embedded CSS (see an earlier Post of mine describing how to add embedded CSS to Suffusion Theme).

Step 1 – Remove Form White Space

To remove the unwanted white space from below the form labels add the following CSS:

#mc_signup_form .mc_var_label {
    display: inline;
    line-height: 1.6em;
}

Your form will now look something like this:

Step 2 – Style the ‘Required Field’ Text

You may now wish to add some white space around the “* = required field” or change the size or colour of the text. Any applicable styling property may be added to this class and here is an example of the CSS required:

#mc-indicates-required {
    margin: 1em 0 1em 1em;  
    font-size: 0.9em;
}

With this CSS your form will now look something like this:

Step 3 – Add Form White Space

If we want to add some white space above the form labels we just add:

.mc_merge_var {
    padding-top: 1.2em;
}

Your form will now look something like this:

Full CSS

The full CSS used in the examples above is:

#mc_signup_form .mc_var_label {
    display: inline;
    line-height: 1.6em;
}
#mc-indicates-required {
    margin: 1em 0 1em 1em;  
    font-size: 0.9em;
}
.mc_merge_var {
    padding-top: 1.2em;
}

The CSS provided may be amended to suit your Mailchimp form needs. Good luck!