Theme images by MichaelJay. Powered by Blogger.

Social Media

Ads

Ads

Go to

About Blog

geeky

Purchase Mores

Follow us on FaceBook

technology

Design

design

Sponsors

lifestyle

How to customize MailChimp subscription form


If you’re writing a blog or running a website, sooner or later you’ll want to create a mailing list. Whether it will be a subscription for a newsletter, access to freebies or a marketing campaign, you’ll need it. Chances are that you’ll be using (or already are) MailChimp as your solution. It’s a great marketing service and even as a non-paying customer you’re getting pretty awesome tools to use. They give you an online creator for your lists and so on as well as embedded form to include on your website. And it’s all great, but the embedded form is kind of...plain. So in order to make it match your website design, you need to customize it. Today I’m going to show you how to do it!
 

Let’s talk about style!

No, not your personal style, which I’m sure is great and unique! :) We need to talk about CSS, so you’ll know what you’re doing while customizing your MailChimp form.
If you’re familiar with CSS, then you can skip this paragraph and move directly to MailChimp specifications.
CSS or Cascading Style Sheets in general describe how elements on your website will be displayed. Using CSS can save you a lot of trouble and work, as you can define style for about anything on your website and then use specific classes accordingly. There are few ways of including CSS in your code:

  • you can store them externally and then link to them in the <head></head> section of your page,

  • you can include them in the <head></head> section by using <style> </style>,

  • or you can use in-line styling for any specific element of your page.

I don’t recommend the latter though, since it can get pretty messy if you’re trying  to customize many elements. Also it forces you to repeat the same part of code if you’ve got elements that should have the same style in different places on your website. It’s best to give them a class or id and specify styles for those.
CSS is a big, wonderful (and sometimes tricky) subject, but I will just highlight few things that we need to know for now.

  • #name – this is how we define id selector in CSS. You can put whatever name you want while writing your own styles. 

  • .anothername – that’s how we define a class in CSS. Again, when you’re writing your own styles, you can give it any name you like.

Both of them will describe the style of an element that you will give specific id or class. So what’s the difference? Well, id’s are unique, which means each element on your page can have only one id assigned to it. Classes on the other hand are not unique – any element on your page can have many classes and these classes can be applied to many parts of your website.
So, when you want to style many elements, you should use classes. If you want to style one thing – give it an id. As you’ll see a little later in that article, using combination of both can be pretty useful when you want to apply a style to a specific element on your page, without affecting others. 
For example – let’s say your page has several buttons – some of them are sitting in the footer, some others are in the text and another one is in the sidebar. If you’ll specify a style for buttons in general, they will all look the same. But what if you want just the one in the footer to have that style? Then you need to specify it in CSS: #footer .button {here goes your style} – this way only the button in the footer will be affected!

General syntax for writing CSS goes like this:

#some_id {
background: #123234;
font-size: 14px;
}
.some_class {
background: #123234;
font-size: 14px;
}

Be careful - always close the brackets and "style" tag after you’re done! As you see, I’ve put pretty basic things inside this sample CSS – color of the background and font-size. There are many others, so you can customize anything you want, even animated transitions (CSS3 rocks!).

MailChimp CSS hooks

Now let’s move to our embedded subscription form from MailChimp. There is a full list of CSS hooks used in their forms available here . In my post I will focus on those that are essential for basic customization. Picture below shows the order of id's and classes in MailChimp subscription form. 


  • #mc_embed_signup – this id comes as first, it wraps around your subscription form and is used to customize its elements later.

  • #mc_embed_signup_scroll – this id contains your actual subscription form – fields to type in and their labels.

  • .mc-field-group – that class is a wrapper containing all the fields you include in your form.

  • #mc_embed_signup .button – you see combined id and a class? This defines style of a button WITHIN the subscribtion form and won’t affect any other buttons on your page.

  • #mc_embed_signup .button:hover – again the same combination, but with “hover” it defines what happens to a button when you move your mouse over it.

  • #mc_embed_signup .mc-field-group input – this defines a style INSIDE the fields where an user will type.

  • #mc_embed_signup div.mce_inline_error – this will define a style of an error message that shows when an user puts incorrect info or no required data in the field.

Let’s customize!

When you’re done making a subscription list in MailChimp, you can get an embedded form code to include on your website. They give you few options, but none of them is REALLY styled, and most likely it won’t match your website look. By default, you’ll get something like this:

Subscribe to our mailing list



And it does look...meh, doesn’t it? So why don’t we make prettier – I’m giving you two basic examples to play with! To use them in your MailChimp embedded form, copy and paste the code below in the "head" section of your page. It might display slightly differently on your website, given the fact that I used percentage values for sizes wherever possible to provide scalability and make forms responsive. You also need to add this little piece of code before styles in the head section:

<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"></link>

And remove this part from the embedded form code you got from MailChimp:

<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"></link><style type="text/css">#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } </style>

1.    Rounded corners & shiny buttons


Subscribe here!




Copy the code below and paste it in the head section of your page between <style></style> tags.

#mc_embed_signup{
background: #0C0C0C;
clear:left;
font:14px Helvetica,Arial,sans-serif;
width: 15%;
min-width: 200px;
height: auto;
min-height: 150px;
border: 3px solid #FF9900;
border-radius: 15px;
color: #f2f2f2;
margin: 0 auto;
padding: 0 1% 1% 1%;
}
.mc-field-group {
display: inline-block;
margin: 0 auto;
width: 100%;
padding-bottom: 3%;
}
#mc_embed_signup .mc-field-group input {
display: inline-block;
vertical-align: middle;
text-indent: 2%;
width: 100%;
border-radius: 5px;
}
#mc_embed_signup div.mce_inline_error {
background-color: #ff7f04;
color: #fff;
font-weight: bold;
margin: 0 0 1em;
padding: 5px 10px;
z-index: 1;
}
#mc_embed_signup input.mce_inline_error {
border-color: #ff7f04;
}
#mc_embed_signup .button{
display: inline-block;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffb76b+0,ffa73d+50,ff7c00+51,ff7f04+100;Orange+Gloss */
background: rgb(255,183,107); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
vertical-align: middle;
border: 2px solid #FF9900;
border-radius: 5px;
padding: 2% 6% 2% 6%;
float: right;
font-weight: bold;
cursor: pointer;
}
#mc_embed_signup .button:hover {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f59f+0,e4e592+50,f8b500+51,f8b500+100 */
background: rgb(249,245,159); /* Old browsers */
background: -moz-linear-gradient(top, rgba(249,245,159,1) 0%, rgba(228,229,146,1) 50%, rgba(248,181,0,1) 51%, rgba(248,181,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(249,245,159,1) 0%,rgba(228,229,146,1) 50%,rgba(248,181,0,1) 51%,rgba(248,181,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(249,245,159,1) 0%,rgba(228,229,146,1) 50%,rgba(248,181,0,1) 51%,rgba(248,181,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f59f', endColorstr='#f8b500',GradientType=0 ); /* IE6-9 */
border: 2px solid #F8B500;}

2.    Modern design & flat buttons





Copy the code below and paste it in the head section of your page between <style></style> tags.

#mc_embed_signup {
background:#F23D6D;
clear:left;
color: #ffffff;
width: 50%;
min-width: 220px;
height:auto;
max-height: 150px;
text-align: center;
}
#mc_embed_signup div.mce_inline_error {
background-color: #e6ac00;
color: #fff;
font-weight: bold;
margin: 0 0 1em;
padding: 5px 10px;
z-index: 1;
}
#mc_embed_signup input.mce_inline_error {
border-color: #e6ac00;
}
#mc_embed_signup .button {
background-color: #10B08B;
clear: both;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: 'Oswald', sans-serif;
font-weight: normal;
font-size: 14px;
height: auto;
margin: 7px 5px 10px 0;
padding: 0 22px;
text-align: center;
text-decoration: none;
white-space: nowrap;
width: auto;
border-radius: 0px;
border: 0px;
}
#mc_embed_signup .button:hover {
background-color: #02AEF2;
}
#mc_embed_signup .mc-field-group {
height: auto;
position: relative;
min-width: 200px;
display: inline-block;
width: 30%;
padding: 0;
margin: 7px 1% 2% 0;
vertical-align: top;
}
#mc_embed_signup .mc-field-group input {
display: inline-block;
vertical-align: middle;
text-indent: 2%;
width: 100%;
height: auto;
}
.clear {
display: inline-block;
height: auto;
vertical-align: middle;
}
#mc_embed_signup_scroll {
height: auto;
padding-top: 1%;
font-family: 'Oswald', sans-serif;
text-align: middle;
}
#mc_embed_signup form {
margin-top: 1vh;
}

So now you have few examples of subscription form that you can use and adjust to your needs! I hope you'll enjoy playing with them as much as I enjoyed making them ;) If you'll encounter any problems implementing the code, let me know - I'll do my best to help you!

Have fun customizing your embedded subscription form!


37 comments:
Write comments
  1. This is an awesome tutorial! I really need to figure out mailchimp and jump on the bandwagon. I have an account, but have not customized it or anything, yet. This will be very helpful!

    ReplyDelete
    Replies
    1. I'm pretty new to MailChimp too! I decided to finally register, because it looks like it's going to be useful for me :)

      Delete
  2. This was such a great read! I have struggled with how to better customize my mailchimp sign up forms, so this was so helpful! www.alwaysalldressedup.com

    ReplyDelete
    Replies
    1. Thank you! I hope it will help you, when I was customizing mine I couldn't find any manuals with actual examples for MailChimp, so decided to make my own :D

      Delete
  3. This was so helpful! The original looks so boring!! But my biggest issue has been trying to move the "close" button into the actual BOX and not outside of it. Do you know how to customize button??? Please share if you do!!

    THANKS!!
    xo, N

    ReplyDelete
    Replies
    1. Sure, I just checked your website :) You need to modify class .mc-closeModal in CSS. Here's what you need to put there to make it sit inside the box:

      .mc-closeModal {
      position: relative;
      right: 40px;
      top: 10px;
      z-index:2000;
      height: auto;
      float:right;
      }

      Good luck! :)

      Delete
  4. I need to use this to further grow with my website. Mailchimp looks like a good one to use.

    ReplyDelete
    Replies
    1. So far I like it, it's popular, easy to use and free up to 2000 subscribers - which means it gives a pretty good start :)

      Delete
  5. This is so helpful, even for more experienced bloggers! Love that you included copy & paste code, makes it so easy for non-tech savvy people :)

    ReplyDelete
    Replies
    1. Thank you! I wanted to make it as easy as possible to use :)

      Delete
  6. This is a wonderful tutorial! I have been wanting to move to mail chimp and you have pushed me over the ledge with your post:)

    ReplyDelete
    Replies
    1. Go for it! Millions of users cannot be wrong (said in my best commercial voice ;) )!

      Delete
  7. Thanks for this, it's really helpful and will be useful for me when I change to self hosted :)

    ReplyDelete
    Replies
    1. You're welcome! I'm glad you liked it and good luck with self-hosting! :)

      Delete
  8. This post is filled with so much awesome information. Wahoo! I really appreciate you sharing CSS copy and paste code. You rock!

    ReplyDelete
    Replies
    1. Thanks! I thought it's important to make it simple to use for everyone :)

      Delete
  9. I've been thinking about starting my newsletter, so this is a great resource! Thanks!

    ReplyDelete
  10. This is very informative. Thanks for sharing!

    Mhaan <3 | Mommy Rockin' In Style Blog

    ReplyDelete
  11. This is really worth to read :) This is very helpful. Thanks for sharing :)

    ReplyDelete
  12. I'm pinning this! I barely started to use Mailchimp an know I will need this info for later. I'm barely sending my first newsletter tomorrow!

    ReplyDelete
    Replies
    1. I'm new to MailChimp too - but I think it's going to be a very useful thing in the future :)

      Delete
  13. Do you know if mailchimp works on Wix as that is the site I host on! Great post

    ReplyDelete
    Replies
    1. I've never worked on Wix hosted websites, but I'm sure it does - as long as you can edit your website code, you're able to use it :)

      Delete
  14. This is really helpful info for those that use mail chimp. It looks simple enough and customized is always better in my opinion.

    ReplyDelete
    Replies
    1. Exactly my thought - customized is much better! It adds a little bit of personal touch and allows you to match the style :)

      Delete
  15. Great tutorial! I have been using Mailchimp for some time now but just basic in just about everything.

    ReplyDelete
  16. This is so amazing. I only recently figured out how to set up Mailchimp subscription! I want to be able to customize mine too!

    ReplyDelete
    Replies
    1. I'm sure you can do it! All it takes is to read basics about CSS and a little time spent on playing with the code :)

      Delete
  17. This is a great tutorial. I have heard about the Mailchimp. I should start emailing newsletters.

    ReplyDelete
    Replies
    1. I just started using their services - I didn't create a newsletter yet, but I offer freebies for subscribers :)

      Delete
  18. Thank you sooooo much for posting this guide I am trying to grow my list and want to really get the most out of mailchimp.

    ReplyDelete
  19. Super great tips! I need to work on my email list more.

    ReplyDelete
  20. That is some good and helpful info. I dont have this, but I like the ideas.

    ReplyDelete
  21. This is very helpful. Thank you

    ReplyDelete
  22. Great tips! I didn't know any of this!

    ReplyDelete
  23. This is a very detailed account and I am saving it for going through with a fine tooth comb

    ReplyDelete
  24. Thank you for this. Very useful for newbie and for those who need this in their biz.

    ReplyDelete

Want to get updates and occasional freebies?
Sign up to my newsletter!