So reveling you from these boring-ness with sign up form here I publishing a homemade professional looking mailchimp sign up/subscription form. It's easy to configure and flat designed and it will easily match with any blogsites/websites. Let's see how it looks like and how to add it to your Blogger blog and wordpress sites and how to configure.
Professional Mailchimp Sign-up/Opt-in Form for Wordpress/Blogger
Live Preview-(Click Here)
Codes-
<!-- Begin MailChimp Signup Form -->
<!-- crawlist.net form starts -->
<div id="optin">
<h4>Subscribe for Newsletter</h4>
<p>Join our mailing list, recieve new post update, learn pro tricks weekly</p>
<form action="http://blogspot.us3.list-manage.com/subscribe/post?u=0b55fc18f7e81c4baff2c9e57&id=857e43dd4c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="text" size="30" value="Enter your name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<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='';" onblur="if(this.value=='')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>
<h5><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKqDofrRM_NLU_BVBQEClUAmSsImDI2rklBfOUr0jQ4ZuM4c7WP2Gopis2bjPkG994vfcB69F3D2BooLkB1I1_zn51i2PN1yDm30_VYaqwH1dQJxhUsKCprN52UQoHQgOV9PrKf3KoKx8/s1600/lock.png' alt='privacy' width="9" height="12"/> We'll never spam or sell your email, 100% privacy gurrenty</h5>
</div>
<!-- crawlist.net form ends -->
<!--End mc_embed_signup-->
<style>
#optin {
background: #f5f5f5;
border: 3px solid #ccc;
height:300px;
width:280px;
text-align: center;
padding:8px 8px;
}
#optin h4 {
font-family:"Segoe UI"; font-size:18px; font-weight:bold; margin-top:10px;}
#optin p {font-family:Georgia, "Times New Roman", Times, serif; }
#optin h5 {font-family:Georgia, "Times New Roman", Times, serif; font-size:10px; margin-top:7px; padding-left:42px; padding-right:42px;}
#optin input {
background: #fff;
border: 1px solid #ccc;
font-size: 15px;
margin-bottom: 10px;
height:34px;
width:220px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO1ovPPEP7_NhdAlLkoV1-iQxKjAQn2DuQ-AwLsrYJ6nRWaJMA5s1erCG1R39K0HqfApEZy9culnudOITed0lu2gVh_KO44JNVZq569jL5Ttz0FQd5EvSF8yD0BexRubrfmZttDf4iNHE/s1600/name.png) no-repeat 10px center; padding-left: 35px }
#optin input.email { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdraH2Ztdcd17gBk4d2-8rYt1sSsJN6x2Tcu70Wku3b4S_TZHDFXn0OjihF-txHwR3GkWmH3iAFGGykrPqdOrzT4adw9ARMvQoV5nnp0cc3dwMNByidP-VVv0qIMs7jDt0aR4K4gVU-zk/s1600/email.png) no-repeat 10px center; padding-left: 35px }
#optin input[type="submit"] {
position: relative;
vertical-align: top;
width:180px;
height: 50px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #f1c40f;
border: 0;
border-bottom: 2px solid #e2b607;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #e2b607;
box-shadow: inset 0 -2px #e2b607;
}
#optin input[type="submit"]:hover{opacity:.7;}
#optin input[type="submit"]:active { top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none; }
</style>
How to add this widget in Blogger
- First log in to your Blogger, select your Blog,
- Go to 'Layout' tab then click 'add a gadget'
- Select 'html/javascript' from pop up menu.
- Copy following codes and configure
How to add this widget in Wordpress
- From dashboard hover mouse on 'Appearance tab',
- Then from 'appearance' menu select 'widgets',
- Then drag and drop 'Text' content box in widget area,
- Copy following codes and paste into 'text' box,
- For new dashboard click on 'Text' add it to sidebar
- And paste following codes and configure
How to configure
Configuring this form won't take a while, read on-
- First log in to your mailchimp account,
- Select 'List' from side menu,
- Inside 'List' on your email subscriber list's very right part after 'stats'
- Click on dropdown menu, select, 'Sign up forms' from there.
- Then Select 'Embedded forms'.
- When you are into 'Embedded forms'
- From Classic sign up forms page's botton contains sign up forms HTMLcode,
- Copy all code and paste them on any txt file/word file (notepad)
- And select the following link what shown as image and replace the link with my default link (pink colored).
