How to add a stylish mailchimp signup form to blogger blog

Breaking News

How to add a stylish mailchimp signup form to blogger blog

mailchimp signup form blogger
Mail-chimp is a very good alternative to Google Feed burner service. In the default mail-chimp service you can handle up to 2000 subscribers and 12,000 mails/ month completely free. So definitely a good option to have a professional and self controllable email newsletter service. As a starter you can always opt for mail-chimp  But the main problem in mail-chimp is, they don't have enough resource to customize the subscription form design. Even on internet when I tried to find out some subscription form or sign up form, I did not find anything rigid. There is so many options for blogger or word-press in case feed-burner subscription forms. But I found a source where couple of very beautiful and professional looking forms are available for mail-chimp sign up. But implementation procedure is not that clear.

But I have gone through the steps and successfully implemented 2 forms in this blog with mail-chimp service. You can see that I have implemented one in the right side bar and another below post. Just before related post widget. These forms look very cool. Let's explore how to add such stylish and professional looking mail chimp sign up forms in blogspot blog.

First visit diythemes website and download all the forms to your desktop. Then extract the folder and open the folder. You can see the folders with numbers. We will implement the below form in the right side bar.

In that link, this is the 4th form. So open the 4 number folder. You can find out the instructions text file. If you are patience enough to extract the code, then go ahead. Otherwise simply follow what I did. I have done some adjustments to fit in the sidebar. Anyway the other thing you have to do is to upload all the images and keep their URL at one place, as you have to provide the URLs at respective places.

Now Go To Blogger website >> Login to your account.
Then Template >> Edit HTML >> Proceed

Search for ]]></b:skin> and just before that paste the below code.


#optin { margin: 0 auto 2em; overflow: hidden; text-align: center } #optin input { background: #fff url( 6.png url ) repeat-x bottom; border: 1px solid #ccc; float: center; font-size: 14px; margin: 0 10px 10px 0; padding: 8px 10px; width: 200px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 2px 2px #ddd; -moz-box-shadow: 0 2px 2px #ddd; -webkit-box-shadow: 0 2px 2px #ddd } #optin input.name { background: #fff url( input.png URL ) no-repeat 10px center; padding-left: 35px } #optin input.email { background: #fff url( input.png URL) no-repeat 10px center; padding-left: 35px } #optin input[type="submit"] { background: #217b30 url( green.png URL) no-repeat 10px center; border: 1px solid #137725; color: #fff; cursor: pointer; float: center; font-size: 14px; font-weight: bold; padding: 3px 5px; text-shadow: -1px -1px #1c5d28; text-transform: uppercase; width: auto } #optin input[type="submit"]:hover { color: #c6ffd1 } #optin span { background: url( lock.png URL ) no-repeat center left; float:center; margin-left: 15px; padding-left: 20px }

Replace the red marked places with individual image urls.

Next you have to paste the below code into the sidebar of your blogger template. Simply click on Add a gadget and select HTML widget and paste the code below.


<!-- Begin MailChimp Signup Form --><div id="optin1"> <form action=" Your mailchimp form unique ID " method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="email" size="30" value="Enter your email" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="text" size="30" value="Enter your name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" /> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div>
<div class="clear"> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" /> </div> </form></div><!--End mc_embed_signup-->

Replace your mail chimp id in that form and save the template. You are done with that. Hope you will find this useful. You can easily find that id when you get the default mail chimp form code from your mail chimp account. Just copy that and place in the above code.
Designed By