Designing a Cool Mailchimp Signup widget is easy if you know basic CSS coding and also you are aware of customizing widgets in WordPress. But what happens if you have no idea how to code, you search through google with phrases like “customize mailchimp signup forms or widgets etc, well I’ve been there and I could not find even 1 helpful article on how to customize my Subscribe form which was kind of disappointing and so I have decided to write up a tutorial in plain english so everyone using a WordPress platform will have a cool and shiny signup form for their Mailchimp Newsletters.

This tutorial is exclusively for the WordPress platform, in case you are interested for other platforms like blogger, typepad or tumblr we ll make another tutorial within next week.

So I am beginning this tutorial by assuming that you already have a Mailchimp account and that you have created at least the basic forms via their web app. Its really easy to design the first signup web forms through mailchimp website but when you go into the section “for my website” in order to generate your widget you don’t really have many options as I said earlier. So lets start with the basics.

Step 1) Go to Mailchimp.com, Click Lists and then forms check all the mailchimp signup forms.

You ll get through the design application of Mailchimp to design your forms, if you havent yet customized your forms I suggest you do this right away. Be aware that you have to design all the basic forms shown below.

Step 2) Lets assume that you have finished or either you have already designed your basic forms.

Next step is the widget for your website, so from where you are click from the menu “For your Website” and then Signup form Embed Code. Choose the Super Slim Code and then hit Options like shown below in order to set the widget’s maximum width. If you are on a Mac go into your website and press Command+Shift+4 and measure your sidebar’s width). Also write up a title for your widget, a good one would be “Subscribe to my Newsletter” or “Weekly Newsletter”.

Step 3) Click Create Embed Code and copy paste the code given below the form. Go into into your wordpress admin panel and open up the following tabs.

• Create a New Page and turn it into the HTML Version,
• Open up your Style.css or either Custom.css witch is supported in some themes through Appearance/Editor

Step 4) Copy/Paste the code you grabbed from Mailchimp into your New Page’s HTML Section and remove all the styling from your form.

Basically remove all the red marked code from below and change the blue marked text into -> Enter your E-mail <- (it looks much better)

<!– Begin MailChimp Signup Form –>
<link href=”http://cdn-images.mailchimp.com/embedcode/slim-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>
<div id=”mc_embed_signup”>
<form action=”http://smokingdesigners.us2.list-manage1.com/subscribe/post?u=e9a31cc0d67f0402aad18d30f&amp;id=04f1c47140″ method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank”>
<label for=”mce-EMAIL”>Subscribe to our mailing list</label>
<input type=”email” value=”" name=”EMAIL” class=”email” id=”mce-EMAIL” placeholder=”email address” required>
<div class=”clear”><input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”button”></div>
</form>
</div>

<!–End mc_embed_signup–>

Step 4) So your form should be naked by now, the next step is to go over your Custom.css or either style.css and copy paste the following stylings at the bottom of your file.

#mc_embed_signup input.email {
display: block;
padding: 6px 0;
margin: 0 4% 15px 0;
text-indent: 5px;
width: 58%;
min-width: 268px;
margin-left: 6px;
line-height: 14px;
border-radius: 3px;
}

#mc_embed_signup {
background: #282828;
clear: left;
font: 14px;
width: 300px;
max-width: 300px;
border-radius: 3px;
}

#mc_embed_signup input.button {
display: block;
margin: 0 0 11px 0;
width: 264px;
min-width: 279PX;
margin-left: 1px;
}

#mc_embed_signup .button {
clear: both;
background-color: #F60;
border: 0 none;
border-radius: 4px;
color: white;
font-size: 15px;
font-weight: bold;
height: 34px;
line-height: 31px;
padding: 0;
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
}

#mc_embed_signup input {
border: 1px solid grey;
-webkit-appearance: none;
}

#mc_embed_signup form {
display: block;
position: relative;
text-align: left;
padding: 20px 0 8px 3%;
}

#mc_embed_signup label {
display: block;
font-size: 16px;
padding-bottom: 5px;
font-weight: bold;
color: white;
margin-right: 10px;
}

Step 5) Now if you into the page that we have created earlier and copied the code with out the stylings and click “Preview” You should get a similar result to our website’s Widget Look.

(If you dont see anything similar, Empty your browser’s cache or if you are using W3TC or WP-Supercache go to the plugins options and hit Empty Cache)

Step 6) On the example above you can see that I have added some text below the title of the signup form.

If you are interested on adding a similar text you can include the code in blue below into your page’s html section before the input type value. Then if you want to change the colors of the text go ahead and change the marked in pink HTML Colors. To add your own text change the text in bolt.

<div id=”mc_embed_signup”>
<form action=”http://smokingdesigners.us2.list-manage1.com/subscribe/post?u=e9a31cc0d67f0402aad18d30f&amp;id=04f1c47140″ method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” target=”_blank”>

<center><label for=”mce-EMAIL”>Subscribe to our E-mail Newsletter</label></center><font color=”#D0D0D0“>Subscribe today and get a Free copy of the Ebook “Optimize WordPress in 10 Minutes“</font></p>

<input type=”email” value=”" name=”EMAIL” id=”mce-EMAIL” placeholder=”Enter Your E-mail” required>
<div><input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe”></div>
</form>
</div>

Step 7) Customizing your form and applying your website’s colors is vital for your new subscribers.

Go to Developer view or Web Inspector if you are on Chrome or Safari browser while you are on the preview page of the test page that we have created and hit the “Elements tab”

Through the elements tab if you mouse over a few html elements click them to expand the code. In our website’s case you hit Content Holder/Container 12 and then our sidebar’s element and we have selected our whole sidebar. In your case you are testing the signup form into a page so it will be much easier to find the correct element.

When you find the correct element of your page. and select it you will see the styles on the right section of the developer tools. Anything that starts with “MC_” is customizable and all you have to do is to change the values. for example you want to make your box different color.

Simply find the element <div>id=”mc_embed_signup”/> and on the right side of the developer tools you ll see this.

Double click the #282828 and change it to the colors you like. (Check the HTML Colors). When you find the colors that fit to your website go into your style.css or custom.css where you have pasted the css I gave you earlier and find the value #mc_embed_signup and change the HTML colors with the ones you have added previously in the developer tools and click save, now if you refresh the page you ll see your signup form with the colors you have selected.

I am will not go through all the customizations but here are a few examples to make your life easier. Remember that you need to make these changes under your style.css or custom.css file in order to take effect. Changes that you make through your browsers are only visible by you and not your visitors.

Change the title color and font size (bolt)

• #mc_embed_signup label {color: white; } <- Apply color with wording like, black, red etc or with an HTML Code)

Changing the colors of the Subscribe Box

• #mc_embed_signup .button { background-color: white; } <- Apply color with wording like, black, red etc or with an HTML Code)

Changing the border radius of the box and making the corners of the subscribe button more rounded.

• #mc_embed_signup .button { border-radius: 5px }