Create a Cute Subscription Form

Subscription-form I have already shared many tutorials on RSS Subscription forms such as Subscription Email Form and Subscription Feed Widget and today we have yet another but extremely beautiful and 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.

 

Live Demo

 

How To Add this Subscription Form To Blogger?

  1. Go To Blogger > Design > Page Elements
  2. Choose HTML JavaScript Widget
  3. Paste the following code in it,

<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdxB2SH3QSHaWtUfTDpftDUQV6x-xvTEOkHF1HDLUDrtHcu1Ihv1HawXmtvmo9IzX1sjGNKZPXoxVj7kJC9qT9wQuJAQpa_m7gPaxvcplXSmeZWvf9aLjXgMV2efldRx3mHiGWcL5vlUc/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}

.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
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;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;  
width:170px;
color:#666;}

</style>

<div class="mbt-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=TntByStc', '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="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

 

 

Now make these changes,

  • Now replace http://feedburner.google.com/fb/a/mailverify?uri=TntByStc 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 TntByStc with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=TntByStc

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.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

18 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Thanks a lot Mustafa, i changed mine to yours already,love it
    Have a nice day ahead
    http://theasianpunter.blogspot.com

    ReplyDelete
  2. can sometimes occur clashed code, if already been invested tricks
    "Uncustomized and Customized Text Areas"
    must be considered in the code textarea
    hihihi...cheers^^

    ReplyDelete
  3. Another great creation. This widget is to large for the 3 column templates though that somtimes do not even have a 200 width :(

    ReplyDelete
  4. @Myworld4free

    Its due to the new blogger spam thingy. I never delete valuable comments like yours :)


    @TAP
    I am delighted to know that it worked for you brother. :>

    @beben
    Dude I never get what you say :P but I still love your comments.

    @Noor
    Noor you can adjust the width. Simply change the width in,

    .mbt-email{
    background:url(http://i53.tinypic.com/2igja0n.png) no-repeat 0px 12px ;
    width:300px;<--Make it equal to your sidebar size
    padding:10px 0 0 55px;
    float:left;
    font-size:1.4em;
    font-weight:bold;
    margin:0 0 10px 0;
    color:#686B6C;
    }

    and

    .textarea{
    padding:2px;
    margin:6px 2px 6px 2px;
    background:#f9f9f9;
    border:1px solid #ccc;
    resize:none;
    box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
    width:170px; <-- Keep it half the size of your sidebar
    color:#666;}


    hope this helps :)

    ReplyDelete
  5. The tinypic image link is dead.Please give another link.

    ReplyDelete
  6. Hello Mohammad,
    i am using your this widget but from today instead of showing the image its show tinypic logo that means the image has been deleted.
    so plz do the need full thing.
    thank you.

    ReplyDelete
  7. Update:

    Here is the new code. Instead of the first CSS property use this,


    .mbt-email{
    background:url(http://4.bp.blogspot.com/-pQIpioiF0d0/TVeTBKPerKI/AAAAAAAADVc/uwcRm4KCa8k/s400/mail2.gif) no-repeat 0px 21px ;
    width:300px;
    padding:10px 0 0 55px;
    float:left;
    font-size:1.4em;
    font-weight:bold;
    margin:0 0 10px 0;
    color:#686B6C;
    }




    Or if you want to use a different icon then use this,

    .mbt-email{
    background:url(http://2.bp.blogspot.com/-4btQQQcE1cc/TVeTBDHQ7RI/AAAAAAAADVk/2d-n5MXzhNE/s400/rss-email-icon.gif) no-repeat 0px 15px ;
    width:300px;
    padding:10px 0 0 55px;
    float:left;
    font-size:1.4em;
    font-weight:bold;
    margin:0 0 10px 0;
    color:#686B6C;
    }



    Humble apologies for the inconvenience.

    ReplyDelete
    Replies
    1. And to use the same image with same coding use this image link,

      [img src="http://4.bp.blogspot.com/_MbejYjGokMM/TSeZHmWJ6oI/AAAAAAAAALE/93ELYyzmi64/s1600/email.png" width="80%"/]

      Delete
  8. Hello Mohammad,
    thank you so much for the update.

    ReplyDelete
  9. great widget! thank you for this!!!!!

    ReplyDelete
  10. Hello how are you brother.i am Mohmmad sajid saleem.i want to know which comments system are you using.can i add this in my blog plz help brother

    ReplyDelete
  11. Somehow I keep getting back to your site every time I google a blog problem. I used your drop down menu, customized my comments section with your help and solved various other tweaking problems.
    Also I used - and customized - this email widget. I would like to ask if it is possible to place the submit-button underneath the bar where you type your email address. I've been puzzling over this and cannot find a solution. Maybe it cannot be done, but who knows ...
    Thanks for all your great work and (if it can be done) hope to hear from you.
    Pieter

    ReplyDelete
  12. @Pieter
    You are always welcomed here brother.
    To push the submit button to a new line simple increase the width of the text area from 170px to 250px. Edit the bolded part of this code:

    .textarea{
    padding:2px;
    margin:6px 2px 6px 2px;
    background:#f9f9f9;
    border:1px solid #ccc;
    resize:none;
    box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
    width:170px;
    color:#666;}


    Change it to width:250px;

    It would work just fine. :)

    ReplyDelete
  13. @Mohammad Mustafa Ahmedzai

    Thanks Mohammad for your speedy reply.

    Tried it and it doesn't work. the email field runs out of the sidebar and the submit button dissappears completely. I've currently set it to 100 px to align with the image I'm using. Not ideal but elegant enough for my tastes.

    Thanks again and if I may I will be back (I'm currently reworking your floating +1 widget to suit my designs),


    Pieter

    ReplyDelete
  14. Hi I am a bit confused with feedburner I think I got my email link but not sure, here is what I put into my gadget on blogger but when I tried subscribing it subscribed me to your tips not my blog? Any tips? Total newbie on HTML btw. The end of my feedburner says travellingfootprints/pNBf would this be right? Appreciate any help you can give me. Thanks Oh and also how do I make it narrower as it goes off my sidebar, thanks.

    ReplyDelete
  15. Sir I have feed burner id. How i can find my id in feed burner for this cute email Subscription form.Please Help me
    Plzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz Help me...

    ReplyDelete
  16. Hello,
    I followed all the instructions however I got this message
    he feed does not have subscriptions by email enabled

    ReplyDelete