How to Edit the MailChimp Sign Up Form with CSS

7/1/2013 Update: I’m no longer using the mailchimp.css as described below. Instead, I use a plugin called MagicActionBox to create all of my beautiful optin boxes. It has built in integration with Mailchimp, but will work nearly any email service provider that creates HTML based optin box code.

MailChimp is still my favorite Email Service Provider, but the tools they give you to create your optin boxes do leave something to be desired.  The good news is that you CAN make these boxes look just the way you want them to, and I’ll show you how.

Originally, the code you got from MailChimp contained all of the code needed to display the optin box.  Sometime last year (2011), they switched to using standard CSS rules instead. This is good news and bad news:

The Good News: Now you have more control over how the boxes look.

The Bad News: Now you have more control over how the boxes look.

This is both good news and bad news because in order to make the most of these new controls, you have to know a bit about CSS.  The tools as they existed before weren’t great, but you could use them no matter your web design experience.  Now, some basic CSS knowledge is required in order to make the boxes really work for you on your website.

With CSS, you really can do whatever you want.  However, I’m NOT going to show you how to do everything…. just the basics.  I want this tutorial to be doable for everyone, not just the technically inclined, so I’m going to stick with the basic stuff.  If you want to do more fancy customization, go right ahead.

MailChimp does create some HTML for you to embed into your site.  That default HTML will look something like this when you add it to your site:

Mailchimp Optin

Not very pretty, is it?  Let’s see if we can improve that a bit.

When you look closely at the HTML that is in that code MailChimp provides you, you’ll see it starts with this:

<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>

This url http://cdn-images.mailchimp.com/embedcode/classic-081711.css is a link to the stylesheet that MailChimp is using to control the look of the optin box. We’re going to edit this stylesheet to add the ultimate control over how the optin box looks.

And as you can see from the notes included in the code, MailChimp recommends that you either add your own style overrides to your site’s stylesheet, or edit the style block and then move it to the Head section of your HTML file.  I’m going to show you another option, but feel free to do either of the MailChimp suggestions if that will work better for your particular site.

How to Customize the MailChimp Sign Up Box Step-by-Step:

Step 1: Copy the URL to the MailChimp stylesheet into your browser’s address bar (or follow the link above).

Step 2: Copy the code displayed.

Step 3: Paste that code into a HTML editor.  I like Programmer’s Notepad (its free and super easy to use).

Step 4: Save the file to your computer as a .css  I called my file mailchimp.css to make it easy for me to determine what the file contained later.

Programmer's Notepad Step 5: Using FTP, upload it to your server in the public_html/wp-content/themes/your_theme folder.

Step 6: Obtain the Embed Code from MailChimp: Click Create Forms, then Share It, then, Create Form HTML, then Classic Form, then Create Embed Code.  Copy and paste the code into your Page or Post in the HTML view.

Step 7: Edit the code so the URL pointing to the stylesheet points to the stylesheet you uploaded.  Look for http://cdn-images.mailchimp.com/embedcode/classic-081711.css  and replace it with or whatever you called your stylesheet.  Save.

Step 8: On your WordPress Dashboard, click Appearance, then Editor.  Scroll to the bottom and under Styles, click the .css file you uploaded (If you don’t see it, make sure the correct theme is selected at the top under Theme to Edit).

Step 9: Edit the CSS rules to reflect the changes you want to make. Save.  Check to see if they displayed correctly.

Step 10: Keep editing until you get the look you want. Don’t be afraid of a little trial and error here.  If you mess up, going back to the beginning is as simple as copy/paste the original MailChimp stylesheet code back into your custom stylesheet.

What Part of the CSS Controls What?

Here’s a list of the most important aspects of the CSS and what they control:

#mc_embed_signup form  The form that holds the optin boxes.
#mc_embed_signup input  The box that holds the input (where people type their answers)
#mc_embed_signup .button  The Submit or Subscribe button
#mc_embed_signup .button:hover The Submit or Subscribe button when hovered over
#mc_embed_signup .mc-field-group label   Labels on the inputs (Email or Name, for example)

Here’s what my optin box looks like now:



Here’s a link to the stylesheet that I created for it: mailchimp.css.   Feel free to copy it and use it as a guide for your optin boxes.

And here’s the actual code that runs the box:

&lt;!-- Begin MailChimp Signup Form --&gt;&lt;/pre&gt;
&lt;div id=&quot;mc_embed_signup&quot;&gt;&lt;form id=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; action=&quot;http://conversation2sales.us1.list-manage.com/subscribe/post?u=e118c6273e7a07972270410fc&amp;id=0292297aaf&quot; method=&quot;post&quot; name=&quot;mc-embedded-subscribe-form&quot; target=&quot;_blank&quot;&gt;
&lt;div class=&quot;mc-field-group&quot;&gt;&lt;label for=&quot;mce-EMAIL&quot;&gt;Best Email &lt;/label&gt;
 &lt;input id=&quot;mce-EMAIL&quot; class=&quot;required email&quot; type=&quot;email&quot; name=&quot;EMAIL&quot; value=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;mc-field-group&quot;&gt;&lt;label for=&quot;mce-FNAME&quot;&gt;First Name &lt;/label&gt;
 &lt;input id=&quot;mce-FNAME&quot; class=&quot;required&quot; type=&quot;text&quot; name=&quot;FNAME&quot; value=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div id=&quot;mce-responses&quot; class=&quot;clear&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;clear&quot;&gt;&lt;input id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot; type=&quot;submit&quot; name=&quot;subscribe&quot; value=&quot;Subscribe&quot; /&gt;&lt;/div&gt;
&lt;/form&gt;&lt;/div&gt;
&lt;pre&gt;
&lt;!--End mc_embed_signup--&gt;

Note that it’s much shorter than the original code provided by MailChimp.

Here are some hints to make the process easier:

Hint 1: Use the Options button in the MailChimp form editor to limit the created form to only the options you want.  I like my optin boxes clean and free of clutter.

Hint 2: Move the code from the style block in your code to the stylesheet to keep the code on each of your pages/posts as short and clean as possible.  (Move background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; to the stylesheet inside the brackets of #mc_embed_signup form — make sure you separate each attribute with a semi-colon)

Hint 3: All of your optin boxes can now have the same look, even if they send people to different lists: just reference the same stylesheet URL in the code for the new optin box.

Hint 4: Want multiple optin boxes, but want them to look different?  Either create a separate stylesheet for each look, or simply add to the one you already have.  First, copy the stylesheet you have in its entirety and paste it into the stylesheet so that you have two versions of the same information.  Next, go through the second version and change the #mc_embed_signup to #mc_embed_signup2.  Save.  Now, go to the code for your second optin box and change the <div id=”mc_embed_signup”> to <div id=”mc_embed_signup2″>.  All that is left is to edit the stylesheet that applies to your new optin box (all the parts that end in 2).

Hint 5: Once you’ve placed your HTML code into your Page or Post, don’t use the Visual Editor again; stick with the HTML view. The Visual Editor will likely strip out parts of the code, which will eliminate the cool look you just created for your optin.

If you have any questions, let me know in the comments.

© 2008-2014 Lesa R Townsend, LLC. .All Rights Reserved. Copying or resposting this content without written permission is strictly prohibited.


Facebook Twitter Plusone Linkedin Digg Delicious Reddit Stumbleupon Email

Comments

How to Edit the MailChimp Sign Up Form with CSS — 20 Comments

  1. Hi Lesa,
    I tried this out but I can’t seem to link the html with the mailchimp.css here is my code:

    Do you see anything that I need to change?

    Thanks,
    BJ

    • BJ,
      The code was stripped out of your comment, so I can’t reference it. Post it again, but wrap the code [ css ] it will display here (thanks to a very helpful plugin).

      Without seeing the code, I’d guess that your problem is the url that points to the mailchimp.css. To test this, copy/paste the url in your web browser. It should display. If it doesn’t, you’ve found your problem. To fix it, check the file path on your server. The path to my mailchimp.css is http://conversation2sales.com/wp-content/themes/weaver-ii/mailchimp_stylesheet.css You may have an additional folder somewhere that you aren’t accounting for.

      Lesa

  2. Thanks so much for this tutorial — I was tearing my hair out trying to figure out how to get a newsletter signup at the end of every post (I’m using Add Post URL for the WP plugin).

    Quick question: How do I get a bit more white space between my signup form and the end of my post? You can see what I mean here:

    Thanks again!

    • To add more space between your post and your signup form, you’ll have to add the extra space to the end of every post. Unfortunately, there’s no easy way to “code” it in to how the Add Post URL displays.

      Just adding an extra blank line won’t work as WordPress doesn’t seem to like blank lines and has a tendency to remove them, no matter what you do. The one thing that I have found to work, and work consistently, is to put a x on the line that I want to add, and then change the font color to match the background. WP won’t remove it since it is content from an HTML standpoint.

      Incidentally, I use Add Post URL as well for the RSS sign up at the end of my posts. It’s a great tool for adding any type of code — optin, ads, copyright notice, whatever — to the bottom of every post.

  3. That worked a treat. I still think my signup form looks clunky – and I don’t look forward to figuring out how to add a little image of an ebook to the text area, but thank you for writing this tutorial because I couldn’t have done it otherwise!

  4. Still trying to decide between aweber and mailchimp. Cost for a new blog goes to mailchimp. I am concerned that selling affiliate products for monetization could get your mailchimp account banned.
    At this point I have not seen good mailchimp opt in forms. Aweber has hunderds to choose from. Mailchimp only shows a couple. Am I wrong?

  5. Have you had success integrating a MC form on your site with more than just an email field? When I select ‘get embed code’, I’m only offered the markup for a one field, email only form.

    • Matt,
      In the Create Form Embed Code screen, choose “Classic Form” instead of the default Slim form. This will give you more options.

      If you don’t like how the form displays initially, click the “options” button. Here, you can deselect: form title, interest groups, required field indicator, and format options.

      If the fields displayed are STILL not what you want, go back to the List Fields and Merge Tags screen and either add/delete fields or make different fields required. Then, go back to the Create Form Embed code and select the option for displaying either All Fields or only Required Fields so that only those fields that you want are displayed.

      Lesa

      • Fantastic, thanks for the quick and detailed reply, Lisa!

        I had tried the ‘Classic Form’ but missed that I had to deselect ‘only required fields’. It now looks how it should.

        What do you prefer for spam protection with MC?

        thanks again,

        -Matt

        • One of the added benefits of a double optin process is that it filters out spam bot registrations. Only real people who want to hear from you will be on your list.

          Use the double optin (mailchimp makes it difficult to do anything else) and you don’t need extra spam controls.

    • Not that I know of… Is there data in those fields that isn’t getting passed to the confirmation email? Or is it missing in the database as well? If the later, just make those fields required and then no one will be able to complete your registration without filling that information in. If the former, submit a support ticket with Mailchimp because there is something odd going on.

  6. The data is making it to the database; I have access to it. Just the confirmation emails aren’t delivering the values. Will submit a ticket.

    thanks!

  7. Hi I am having such problems. Can you help me?
    i bought a html optin signup form and just need to past mailchimp code.
    I did that and the problem is when someone enters their email address it forces them to opt in. How can I disable it?
    Plus my main problem is that I have no clue where to create the automatic thank you letter that they should get once they put in their email address.
    And my last problem is the code created a link to a website that I dont even own. How did that happen
    Can you help me

    • Eve,
      The ONLY way around the Mailchimp double-optin requirement is to hire a programmer to create a optin sequence for you. If you use the code provided by Mailchimp, you are forced to use the double-optin (it’s good business practices anyway — read my post The Single Optin vs Double Optin for more details as to why.)

      You can find the automatic Thank You letter under Signup Forms -> General Form -> Final Welcome Email. Note that you must check the box to enable sending of this email.

      Without actually seeing the code, I can only guess as to where the link to a site that isn’t yours came from, but my guess is that it is embedded into the html that you bought. I would also bet that the site it links to is spammy and not something you should associate with. For beautiful optin boxes that work with just about any email service provider, I highly recommend Using the Magic Action Box plugin.

      If you are set on using a Single optin (and bypassing the need to have people confirm), I’d recommend you check out Get Response. They are one of the few lower priced email service providers that make the double optin optional (their code works with magicactionbox too). They don’t offer a totally free account like Mailchimp, but their plans are pretty affordable.

  8. Great tutorial, I was going crazy trying to find the location of the css file never thought of just adding it to my style.css and just changing the path. This just gave me so many ideas!

Add Comment Register

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *