Nowadays social media channels are becoming a best way to engage visitors and quickly spread a buzz about their latest updates but still importance of email subscription cannot be ignored,it helps to drives a regular traffic to your blog or website,hence it becomes essential to design a good looking subscription form to attract the readers.
Below I have designed some of these forms for you,these form are made for WordPress integrating feedburner in it.
1. Activate feedburner subscription for your feed address.to create a feed go to http://feedburner.google.com and use your RSS link to create a new feed and go to publicize>>email subscriptions to enable.
you will get some code like this
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=techiestuffsgeeks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="techiestuffsgeeks" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>
Copy the highlighted text from above code (you will get different instead of techiestuffsgeeks) and replace it with the text highlighted in below code
<div id="optin">
<strong>Get Updates from me</strong>
<form action="http://feedburner.google.com/fb/a/mailverify"
method="post" target="popupwindow"
onsubmit="window.open('http://feedburner.google.com
/fb/a/mailverify?uri=techiestuffsgeeks', 'popupwindow',
'scrollbars=yes,width=550,height=520');return true">
<p>
<input type="text" name="email" value="Enter
your email" onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value=='')this.value=this.defaultValue;" tabindex="501" />
</p>
<p>
<input type="hidden" value="techiestuffsgeeks" name="uri"/>
<input name="submit" type="submit" value="Join Now!"
tabindex="502" />
</p>
</form>
</div>
Now place a text widget where you want your subscription box ad copy the above code in that text widget.
Now copy and paste this code to your current activated theme stylesheet,you edit via appearence>>editor in wordpress admin panel it will be mostly style.css and incase you are using thesis the paste this code in custom.css file.
#optin {
background: #6c6c6c url(images/gloss.png) no-repeat bottom center;
border-bottom: 3px solid #6c6c6c;
color: #fff;
padding: 20px 15px;
text-shadow: 1px 1px #111;
}
#optin p { margin: 8px 0 0 }
#optin input {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 2px 2px #5a5a5a;
-moz-box-shadow: 0 2px 2px #5a5a5a;
-webkit-box-shadow: 0 2px 2px #5a5a5a
}
#optin input[type="text"] {
border: 1px solid #585858;
font-size: 15px;
padding: 8px 10px;
width: 90{71b550cbed0aca3fea2335d26076176dc834a5ad6e765af844b2cea64fe7483b}
}
#optin input.email { background: #fff url(images/email.png)
no-repeat center right }
#optin input.name { background: #fff url(images/name.png)
no-repeat center right }
#optin input[type="submit"] {
background: #217b30 url(images/orange.png) repeat-x top;
border: 1px solid #137725;
color: #fff;
cursor: pointer;
font-size: 14px;
font-weight: bold;
padding: 3px 5px;
text-shadow: -1px -1px #562806;
text-transform: uppercase
}
#optin input[type="submit"]:hover { color: #ffdeb3 }
The final step is to download the attached files and paste in folder called images with respect to your style.css file.You can modify the above css to optimize it for your blog color combinations.
Thats it,you have now the cool signup form for your blog.As you can see the Email Subscription form in this blog also designed using above technique.
As a Bonus I am reveling the code for Email Subscription form that I have used in this blog Sidebar.
The Code that will go to Text Widget in your sidebar
<div id="optin">
<h2 style="color:#f4f4f4;font-weight:bold">Get Free E-Magazine</h2>
<div style="margin-top:10px;margin-left:25px;border:5px solid #ddd;width:200px;height:260px;">
<a><img src="https://techiestuffs.com/wp-content/uploads/2012/05/cover-200.jpg" alt="Techiestuffs Magazine" /></a>
</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=techie-stuffs', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>
<input type="text" name="email" value="Enter your email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" tabindex="501" />
</p>
<p>
<input type="hidden" value="techie-stuffs" name="uri"/> <input name="submit" type="submit" value="Join Now!" tabindex="502" />
</p>
<h3 style="color:#f4f4f4;font-weight:bold;margin-top:5px;">Stay Updated With Us </h3><p><a href="http://facebook.com/techiestuffs" target="_blank"><img alt="" src="https://www.mixss.com/social/facebook_active.png" style="width: 64px; height: 64px;"></a> <a href="http://twitter.com/techiestuffs" target="_blank"><img alt="" src="https://www.mixss.com/social/twitter02_active.png" style="width: 64px; height: 64px;"></a> <a href="http://youtube.com/techiestuffs"><img alt="" src="https://www.mixss.com/social/youtube_active.png" style="width: 64px; height: 64px;"></a> <a href="http://feeds.feedburner.com/techie-stuffs"><img alt="" src="https://www.mixss.com/social/rss_active.png" style="width: 64px; height: 64px;"></a></p>
</form>
</div>
You need place the below CSS code in your current theme style.css file,if you are using Thesis theme then you can paste it in custom.css file.
#optin {
background-image: linear-gradient(bottom, rgb(255,121,31) 2{71b550cbed0aca3fea2335d26076176dc834a5ad6e765af844b2cea64fe7483b}, rgb(212,85,0) 63{71b550cbed0aca3fea2335d26076176dc834a5ad6e765af844b2cea64fe7483b});
background-image: -o-linear-gradient(bottom, rgb(255,121,31) 2{71b550cbed0aca3fea2335d26076176dc834a5ad6e765af844b2cea64fe7483b}, rgb(212,85,0) 63{71b550cbed0aca3fea2335d26076176dc834a5ad6e765af844b2cea64fe7483b});
background-image: -moz-linear-gradient(bottom, rgb(255,121,31) 2{71b550cbed0aca3fea2335d26076176dc834a5ad6e765af844b2cea64fe7483b}, rgb(212,85,0) 63{71b550cbed0aca3fea2335d26076176dc834a5ad6e765af844b2cea64fe7483b});
background-image: -webkit-linear-gradient(bottom, rgb(255,121,31) 2{71b550cbed0aca3fea2335d26076176dc834a5ad6e765af844b2cea64fe7483b}, rgb(212,85,0) 63{71b550cbed0aca3fea2335d26076176dc834a5ad6e765af844b2cea64fe7483b});
background-image: -ms-linear-gradient(bottom, rgb(255,121,31) 2{71b550cbed0aca3fea2335d26076176dc834a5ad6e765af844b2cea64fe7483b}, rgb(212,85,0) 63{71b550cbed0aca3fea2335d26076176dc834a5ad6e765af844b2cea64fe7483b});
border-bottom: 3px solid #6c6c6c;
border-top: 3px solid #6c6c6c;
color: #fff;
padding: 20px 15px;
text-shadow: 1px 1px #111;
}
#optin p { margin: 8px 0 0 }
#optin input {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 2px 2px #5a5a5a;
-moz-box-shadow: 0 2px 2px #5a5a5a;
-webkit-box-shadow: 0 2px 2px #5a5a5a;
)
}
#optin input[type="text"] {
border: 1px solid #585858;
font-size: 15px;
padding: 8px 10px;
width: 90{71b550cbed0aca3fea2335d26076176dc834a5ad6e765af844b2cea64fe7483b}
}
#optin input.email { background: #fff }
#optin input[type="submit"] {
background: #217b30 repeat-x top;
border: 1px solid #137725;
color: #fff;
cursor: pointer;
font-size: 14px;
font-weight: bold;
padding: 3px 5px;
text-shadow: -1px -1px #562806;
text-transform: uppercase
}
#optin input[type="submit"]:hover { color: #ffdeb3 }
Note that I have Used CSS3 color Gradient,you can generate CSS3 code for your custom Gradient using this CSS3 Tool . I hope you can understand the code,If you did then You can modify the code to suit your blog design,If not get back to me via comments.
