How to add “Email Subscription Form” to Blogger Blogspot

email subscription form, blogger blogspot, gadgets
When you are providing useful information in your blog, then many times some readers will need to get the latest updates from your blog. For that purpose, you need an Email Subscription Form in your blog, so that the interested visitors can easily get the latest updates.

Related: How to Burn Blogger RSS Feeds at Feedburner

To add email or Feed Subscription Form to your blogger blog (blogspot) is very easy.
Just follow the next steps:

1. Log in to Blogger, then go to Layout > click on "Add a Gadget" link:


 2. From the pop-up window, scroll down and click on the "HTML/JavaScript" gadget:


 3. Paste the following code inside the empty box:
<style>
.hl-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaPuL47Ed8uggNqBUVOEmD35HaKQNiicYD-Ohzf6QrZL09hGWocCoVJlrAUbPLHX5BpQh0vp642OtO3u9QvRkzgrem7yczZI2IZALQZQ3e3zOzsmwh-DPFradTHS_Wnrnscwsw_KB9zX0/s1600/mail.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;
}
.hl-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;
}
.hl-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:130px;
color:#666;}
</style>
<div class="hl-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=helplogger', '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="helplogger" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Settings 
- Replace the url address in green to change the email icon
- To change the width or the text area, increase/decrease the 130px value in red
- replace http://feedburner.google.com/fb/a/mailverify?uri=helplogger 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 helplogger with your feed title. It appears at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=helplogger

4. Now Save your widget and check your blog. Enjoy!

49 comments:

  1. Mine keeps saying this feed does not have subscriptions enabled. I do, though, and have checked the feedburner site to clarify. If I get their email subscription code and put it on blogger, it works. Think yours looks much sleeker though and would prefer using it!

    ReplyDelete
    Replies
    1. its ok for me... hello helpblogger? may i have a request? i need a widget that show top commments...

      http://blog3dalam1.blogspot.com/

      Delete
  2. Very Good Post But plz also post topic about creating a feedburner email for your blog.

    ReplyDelete
  3. Its very fine post. I read this post and got many useful information with this post. Email list segmentation is an important part of email marketing. Basically, the more a marketer knows about the customer, a better job that marketer can do of making relevant, high-converting offers that the customer likes.

    Search Engines Marketing

    ReplyDelete
  4. Exactly the same article as i seeking for so long and m trying to implement in this my blog so thnx man :D

    ReplyDelete
  5. good work bro.....thanx to share us

    ReplyDelete
  6. It helps your visitors to come back to your blog and read new interesting posts. Nice work, keep it up.

    ReplyDelete
  7. I have done this successfully but the emails that go out are terrible. A pictures caption appears in the middle of text. The post just ends on a random word and there is no mention to click yo go to blog. Can anyone help?

    ReplyDelete
  8. Thank for your tip blogger. Nice article

    ReplyDelete
  9. Btw, your tutorial gives me error. It says email subscription is not enabled or something like that (when i tried to subscribe via email) but i have it enabled. And i noticed the tutorial was not complete so i had to modify using Feedburner's as another guide and made a few tweaks. Thanks anyway.

    ReplyDelete
  10. thank you so very much for this tutorial.

    ReplyDelete
  11. I very much want to enable this option on my blog and I appreciate you sharing. However, can you please explain what Feedburner Email Feed does and how that works? Is it optional, does it work in tandem with Blogger somehow, or what exactly is its purpose and function (I assume I don't have it)?

    ReplyDelete
  12. Very good tips. Thank you so much!

    ReplyDelete
  13. Good tip but mine isn't working now.

    ReplyDelete
  14. thanks, you ve saved me from hell. battled it out at last. very grateful. what if i don't want verification?

    ReplyDelete
  15. Erin thank for your splendid article. Read other article online but yours helped me solve the feeburner issue.

    ReplyDelete
  16. Hey admin ..I had added email subscribtion form to my blog but i cant understand the instruction given by you in setting "Feedburner Email Feed link". From where I can get it Please?

    ReplyDelete
  17. Thanks, this is a big help! I'm gonna use this on my blog!

    ReplyDelete
  18. Please always give a demo......

    ReplyDelete
  19. Thank you so much! It was of great help. I have done it successfully. I will share it with my friends now. Great post!

    ReplyDelete
  20. thank you so very much for this tutorial.

    Keep blogging.....

    ReplyDelete
  21. thank you so very much for this tutorial.
    th3fakiry.blogspot.com

    ReplyDelete
  22. Thanks , admin great posts , it is helpful for newbies

    ReplyDelete
  23. I tried this, but when i make any changes to my blog, nothing is going to subscribers.? whats the issue?

    ReplyDelete
  24. Great post, really. Very useful for me...

    ReplyDelete
  25. Finally i got this tutorial...thank you helpblogger

    ReplyDelete
  26. This was an awesome trick to add e-mail subscription form in my blog.

    ReplyDelete
  27. Wonderful Post, It Helps me a lot thanks!

    http://www.funnspot.com/

    ReplyDelete
  28. I never thought adding email subscription form could be this much easy, Happy to come across your guidelines.

    ReplyDelete
  29. This was a tremendous help to me! Thank you! :D

    ReplyDelete
  30. thanks a lot! It really helped me out!

    ReplyDelete
  31. Now it is really simple to do it. Thank you for this very useful guide.

    ReplyDelete
  32. Thnx man great post. was very helpful

    ReplyDelete
  33. Nice post, it's really beneficial for a new blogger.And thanks for posting such a nice informative blog.

    ReplyDelete
  34. How do I know who's signed up via email? How can i have access to their email address to send updates and news letters? Is there any way to do this on blogger?

    ReplyDelete
  35. Thanks a lot for your valuable information for those are associating with email subscription.Because this is a great techniques to get latest updates from blog.so that you can easily in touch with users.Though I am working as a email marketer in verifiedemaildata.com,I mostly focus on these things for better link with my customers.Thanks..

    ReplyDelete
  36. I want to change my user email id in blogspot.in kindly give some tricks so that i can change user name email id my email id is usha786@gmail.com

    ReplyDelete
  37. It's kind of ridiculous that something so seemingly simple is so difficult to actually implement. I've spend an hour on this and it still doesn't work. Part of the problem is there's a lot of overlap and conflicting settings between Google and Feedburner. It seems really chaotic unless you're a programmer. Google needs to think out of the programmer box and make things easy. It's like having to assemble your bicycle by hand any time you want to ride it.

    ReplyDelete
    Replies
    1. Hi Mark,

      Actually, there's an easier way to add an email subscription form by choosing the "Follow by email" gadget in the same pop-up window (step 2). It works the same, just that it can't be customized. See the screenshot.

      Delete
  38. Part of the problem is what I call "Google Sprawl" -- Google has swallowed up so much, and so many other services, that there is no one clear answer for anything, and no streamlining of procedures/steps to get something to work.

    ReplyDelete
  39. Wow, this is an interesting post. I really love this widget because loyal readers will always have lots on topics at hand to read. I have applied it in my blog, www.kokocomputers.com

    ReplyDelete