Stylish & Cute Subscription Form Widget For Blogs

Stylish & Cute Subscription Form Widget For BlogsMost of peoples want simple, clean yet Stylish and Cute Subscription Form for their WordPress and Blogger/blogspot Blogs. Today we came with Stylish and Cute Subscription Form Widget  For Blogs , Easy to edit subscription form dozed with new CSS effects. This widget will keep your sidebar neat and clean and will surely attract visitors to subscribe. Follow following steps to add this Stylish and Cute Subscription Form Widget to WordPress and Blogspot

 TipCopy the code given below and paste it inside this editor to see a live demo.

Live Demo

Adding Stylish and Cute Subscription Form Widget

You just need to place a code to your blog widget Follow following steps to add Stylish and Cute Subscription Form Widget to WordPress and Blogger.

Adding To Blogger

  1. Go to Design > Page Elements.
  2. Click Add A Gadget.
  3. In Add A Gadget window, select HTML/Javascript .
  4. Copy the code below and paste it inside the content box.
  5. Save the gadget.
  6. Drag the gadget and reposition it under Blog Posts gadget.
  7. Click Save button (top right hand corner).

Adding To WordPress

  1. Go to Dashboard > Appearance > Widgets > Available Widgets.
  2. Drag Text widget into a sidebar.
  3. Paste in the code.
  4. Save.
Note: If This widget is not working on you blogspot and wordpress blogs then download this code  and place it as a widget nstead of give below.
 <style>
.abt-email{
background:url(https://lh3.googleusercontent.com/-3mMr7bVkJEA/T2mKAcZEBkI/AAAAAAAAAZI/IWMC_nG_foU/h120/service-email.jpg) no-repeat -8px 10px ;
width:240px;
padding:10px 0 0 65px;
float:left;
font-size:1.2em;
font-weight:bold;
margin:0 0 10px 0;
color:#0084CE;
box-shadow: 1px 1px 5px 1px #eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

.abt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:4.4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif; box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);

}
.abt-emailsubmit:hover{
background:#0084CE; box-shadow:inset 8px 8px 6px rgba(0,0,0,0.1);
}
.textarea{background: #fff !important;box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #888; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px; }

</style>

<div class='abt-email'>
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=AllBloggingTips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="AllBloggingTips" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="abt-emailsubmit" value="Submit" type="submit" />
</form> 

</div>

Now make these changes,

  • Now replace AllBloggingTips with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
  • Replace AllBloggingTips with your feed title. It appear at the end of your feed link. In my case it is AllBloggingTips

Save your widget and view your blog to see it showcasing live! :)

That’s All!

Do let me know if you needed any help in customizing the widget.

Article by

A blogger, web designer, front-end developer and WordPress expert since 2011. I started this blog during high school. I’ve gone from 0 to $3,000+ per month all in my spare time. Here I share what I've learned so far and what I continue to learn through blogging so that I can be of assistance in some way to improve your blog. Interested?

Ammar has written 160 awesome articles for us.

Previous
Next
Comment below, let me know what do you think?
  1. owuda.s says

    Ammar, Thanks for the widget. I just added it to my blog and it looks nice.
    Keep on blowing our minds

  2. says

    Ammar,
    Can you explain how to add the widget you have added on your blog saying “Subscribe to Our newsletter and Get Tips About Make Money Blogging in your inbox. ;-)”

    • Ammar Ali says

      I created this widget for this blog! I’m using custom code to add that widget in sidebar! 😀

  3. Ashokkumar says

    Awesome dude…it so simple and cute design. i loved it..is there any plugin avail for subscription widget in wordpress??

    • Ammar Ali says

      Custom Codes are always better than using plugins 😉 Just copy above code and place this in your wordpress sidebar widget!

  4. iPhone Service Center Chennai says

    I’ve been searching the subscription form like this for one of my blogger blog, thanks to the post. Will give it a try today.

    • Ammar says

      This cute subscription form works for blogger as well as wordpress too. Go Ahead and give it a try!!

  5. Amrik says

    Thanks Abdulsalam! I wish you could have some tutorial for wordpress hosted blog 😉
    Anyway, nice tutorial!

Leave a Reply

Your email address will not be published. Required fields are marked *