Our Awesome Articles

Mailchimp Logo

Designing a Cool Mailchimp Signup Widget

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 }
I Hope this tutorial will help you a lot with the customization of your Mailchimp signup form. If you need any help please do not hesistate to comment below and I ll help you with whatever customizations you want to make.

Meet Evan Varsamis


Evan Varsamis is driven by his passion for technology, innovation and vision of an ever improving and informative web. The company he founded, Cloudie Co. is a testament of that. Evan is constantly seeking to invest in new startup projects that support his vision.

  • http://campcaya.com/ Nica Mandigma

    Hi there! I used your coding to add a subscribe button to our site. How can I make the form fit the within the size of the header?

    http://campcaya.com/

    Btw, I am using genesis theme.

    Would be so grateful for your help!

    • http://www.smokingdesigners.com/ Evan Varsamis

      hmm, I saw your website and it looks good, now if you want to change the height you should do something like “max-height: 10px;” and play with the number same goes for the width “max-width:10px;”.

      Can you explain me a bit further what exactly are you trying to accomplish?

  • Duncan Hunter

    awesome thanks this worked a treat!

  • Mark

    does anyone know how do you create a web form so that you can insert a widget to the left (just like the pop up one on this blog)? have been trying to find a setting or option for this for the last 4 hours with no luck :(

  • http://www.be-influential.com/ Ben Drake

    Did you ever get around to making one of these for tumblr???

    Thanks,
    Ben

    • http://www.smokingdesigners.com/ Evan Varsamis

      Actually its the same procedure except from the styling part. Instead of writing the css into the style.css of the WordPress website you combine it along with the widget.

  • http://www.smokingdesigners.com/ Evan Varsamis

    #mc_embed_signup input {
    border: 1px solid grey;
    -webkit-appearance: none;
    height: 31px;
    width: 265px;
    margin-left: 8px;
    border-radius: 3px;

    just pump in this code ;)

  • http://twitter.com/cmasonjar cmasonjar

    this so helpful. thank you!

    • http://www.smokingdesigners.com/ Evan Varsamis

      Welcome :)

  • Daniel

    Incredibly helpful post, thank you.

    How do I add a hover state to the button to change color. Right now, nothing happend when the pointer hovers over the submit button. There is no state change and the pointer doesn’t recognize it as a link.

    Any help is appreciated. Thank you!

    • http://www.smokingdesigners.com/ Evan Varsamis

      Hey Daniel, Cant give you the answer for this one since that depends on your theme.

    • Karen Peart

      Hi Evan:

      The code worked like a charm. One problem though….tried testing it and got

      “04 – Page Not Found orry, the page you are looking for does not exist”
      Is there something else I need to do?
      Thanks Karen

  • http://www.smokingdesigners.com/ Evan Varsamis

    Looks good, let me know if you need any help :)

  • Paweł

    Thank you for this tutorial. I have a problem though. How can I modife the width of input box, subscribe button and the bracket containing everything? I tried modifying every width value in the code, but nothing works.

    • Paweł

      I found the answer. It was necessary to edit min-width and max-width values also. They were limiting my range.

    • http://www.smokingdesigners.com/ Evan Varsamis

      Find the div that you are trying to control and copy paste this into the css part


      width: 100% !important;

  • Veer Modi

    Very Helpful Tips, Evan. I implement mailchimp and customize it as your instructions. Really very easy steps you mentioned. Thank you very much.

    • http://www.smokingdesigners.com/ Evan Varsamis

      You are Welcome Veer :) Let me know if you need any help :)

      • Veer Modi

        So nice of you. Thank you, Evan.

  • http://twitter.com/tmcj Colin James

    Very useful and am pleased with the results on the page, but what do I do next? How do I create the widget? the HTML

    • http://CloudieNetwork.com/ Evan Varsamis

      You’ll have to go to mailchimp.com and copy paste your unique URL

  • http://twitter.com/tmcj Colin James

    Copy it back into MailChimp and they ask you to log in at Typepad? before installing the widget or do I use the text widget? Wondering about link back to MailChimp. Thanks.

    • http://CloudieNetwork.com/ Evan Varsamis

      Didn’t get what you mean?:P

  • http://eileenlonergan.com Eileen Lonergan

    Thank you!!!! Fantastic!

    • http://CloudieNetwork.com/ Evan Varsamis

      Welcome!!

  • NeedHelp

    Hello,

    Thanks for this – very helpful!

    I installed it and experiencing one problem:

    I placed the widget in the wordpress sidebar but it is not lined up. It’s off by approx 25px on the left/right

    How do I make it fit the sidebar width?

  • http://www.jeffalytics.com/ Jeffsauer

    Thanks for posting Evan. Very helpful tip and made it super easy to stylize the form. Subscribed to your blog as well to get more good tips.

    • http://CloudieNetwork.com/ Evan Varsamis

      Thanks:) Stay tuned!

  • http://twitter.com/SixEightyOne Six.Eighty.One

    Hello, Evan! You are a Magician! Thank you so much. But I have a question. Can I make two examples of this form, i.e. one for sidebar and one for posts. Oh, one more.. How the hell you have made such a wonderfull categories’ view (the WP default one is just unpleasant)? Again.. thank you deeply from my uneducated in this sphere heart!

    • http://CloudieNetwork.com/ Evan Varsamis

      Hello, in order for it to work in posts you’ll have to create 2 separate css styles with different names so when you call it in posts it will have the same customizations but lets say with bigger width etc.

  • http://www.facebook.com/bradjwnolan Brad Nolan

    I am not actually getting a button at all. Just the email box (which doesn’t look the same) and the background..any ideas? I followed the directions exactly.

    • http://CloudieNetwork.com/ Evan Varsamis

      hmm…something is overwriting the css rules then. Try adding !important; at the end of each css code

  • http://twitter.com/AI_FollowUs Anglo Italian

    Are we still able to find help here Evan for this?

    • http://CloudieNetwork.com/ Evan Varsamis

      Yeap, let me know what do you need!

  • http://www.facebook.com/jen.welzel Jen Welzel

    Just curious… sorry this is my first time doing this. I added the code to the end of my css like you said. But once I customize my form in the page I created, where do I put that code?

    • http://CloudieNetwork.com/ Evan Varsamis

      it depends where your form is located, widget, header, footer…

  • http://twitter.com/MarcusSuperbody Marcus Superbody

    This was exactly what I was looking for, and I can’t thank you enough Evan! Really well explained as well!

    • http://CloudieNetwork.com/ Evan Varsamis

      You are welcome Marcus

  • http://rahulchowdhury.com/ Rahul Chowdhury

    Thanks for this one Evan.

    • http://CloudieNetwork.com/ Evan Varsamis

      You’r welcome ;)

  • Thomas Morley

    I have successfully made the sign up form, very happy thank you. I wonder though when the screen is shrunk to show its responsive layout it sits to the left margin. Is it possible to add some css to keep it central located.

    • http://CloudieNetwork.com/ Evan Varsamis

      To make it responsive you’ll have to to play with the screen size states. for example @media only screen and (max-width: 999px) { /* rules that only apply for canvases narrower than 1000px */

      • Thomas Morley

        sorry not sure I understand

        • http://CloudieNetwork.com/ Evan Varsamis

          Google: css responsive media screen

          • Thomas Morley

            Im not sure you are getting what I am saying. My site is responsive and I have no problem with the plugin.

            Is there a way i can send you a screen shot to show you what I mean?

          • http://CloudieNetwork.com/ Evan Varsamis

            Sure, upload it somewhere and post the link:)

  • http://twitter.com/pepper_ethan Ethan Pepper

    Terrific code especially considering how little effort mailchimp has done to make it easy to create a nice looking form. One problem though I still can’t get the background color on the subscribe button to change it keeps showing up as white. It might be a problem with my Responsive theme any tips would be appreciated. Thanks.

    • http://CloudieNetwork.com/ Evan Varsamis

      add this on each line instead of ; => !important;

      #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;
      }

      • http://twitter.com/pepper_ethan Ethan Pepper

        Thanks but I was playing around with it and found out that by changing “background-color” to simply “background” the problem was solved.

  • joe dough

    Evan, if you’re taking on new projects can you please email info@timberfieldcapital.com for details. Thanks.

  • http://kellymartinspeaks.co.uk/ Kelly Martin

    Hi I just signed up to mailchimp and was wondering how you do what you said above as a gadget in blogger? I would like my sign up to be in my sidebar and am not sure what you say I have to do on step 4? I removed the red but not sure what you mean by CSS? Where does this go? I have a CSS in designer on blogger but do you mean my template of my blog? (novice here so need you to show me how in beginners language). Thanks, at the moment I would love a subscribe widget like above (but with my own colours).

    • http://kellymartinspeaks.co.uk/ Kelly Martin

      Hi again I added the CSS to the CSS section in bloggers designer but nothing changed?

  • http://thedesignhome.com/ The Design Home

    Hi, Thank you very much..I was struggling with the mailchimp sign up widget for last few days…now i have successfully created a beautiful widget that suits my website..thanks again..

    • http://CloudieNetwork.com/ Evan Varsamis

      You are welcome:)

  • http://www.insearchofthecity.com/ Joshua Lawson

    Great post. In fact, this is the first one I’ve come across that clearly spells out what I need to know for my blog, except that I would like to add an eBook cover design to the subscribe form as well.

    I’ve only messed with code once before and I crashed my entire site. Could you recommend someone who will design a form and not charge me an arm and a leg?

    • http://CloudieNetwork.com/ Evan Varsamis

      Get in touch with us=)

  • Tom

    How do you turn this page into a widget?

    • http://CloudieNetwork.com/ Evan Varsamis

      Hey Tom, what do you mean?

  • livehiup

    Thanks for this great tutorial — I am about to attempt it. I’m wondering though if there’s anyway to include a background image in place of background color?

    Thanks!
    Angela

    • http://CloudieNetwork.com/ Evan Varsamis

      Sure, just use this: {background-image:url(‘bgdesert.jpg’);}

  • Karen Peart

    Hi Evan:

    The code worked like a charm. One problem though….tried testing it and got

    “04 – Page Not Found Sorry, the page you are looking for does not exist”

    Is there something else I need to do?

    Thanks Karen

  • sambodhawellness

    Hi, fantastic article, thank you! I was curious, is there a way to eliminate the background of the form, so it’s clear, allowing whatever image lies below the form to come through?

  • sannufinejewelry

    Hi Evan, thank you for your help. By the way, I am getting two different fonts: georgia, on first line where it says “subscribe to our newsletter”; and arial on last line where it says “subscribe”. Please suggest how to fix this.

  • Lenguaje Corporal Admin

    Great work, Thanks!

  • Lindsay Fahey

    I’m wondering if you have adjusted the code so the subscribe button appears next to the email box. Any suggestions you could provide would be really helpful! Thanks.

  • ronaldosantos

    Hello Evan,

    I’m following your tutorial to put in the MailChimp widget on a blog. Everything went well and was even beautiful. I’m just a problem. Not appear the subscribe button. What should I do?