Beautiful Email Subscription Forms For Blogger

Email subscription is a very popular way to subscribe any blog/website and get updates directly in the mailbox,that's why you may always notice that number of feeds subscribers is always more that any other social social network subscribers.Today I am going to share some beautiful email subscription forms which are designed by design3edge and I have converted them into a blogger widget from a .psd file.As always I have tried my best to make this tutorial with a one step installation.You just have copy and paste the code.Now lets go to the forms and see how to add them into blogger blog.

How To Add Email Subscription Forms To Blogger

1. First select your form
2. Copy the code of that form
3. Replace my username with yours
4. Go to Blogger Dashboard > Layout
5. Click on Add a Gadget
6. Select HTML/JavaScript
7. Paste code and save it.

Email Form Style 1

<style type="text/css">
#helperblogger-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvZPlMiU5Bj6-Dz-soFhLaONEv8B7lNq5Sw2uoQTByunC0FYVFeFykifa7RU6aUhPtz-sV3j0iCX1zolnj0oyRPkc4B0KjwaivJ3AfKeSN4KXgsMca3Z2OF-_Hgs3ils38f_qmFYXujFs/s1600/helperblogger.com-blue.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}

form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}

form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}

form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style> 

<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="HBlogger" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Email Form Style 2

<style type="text/css">
#helperblogger-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJLaiYXhVaAc2SpZbBoUcbhVJMgCXzqKFw0z6hFMDZfxOA-QU2cZjZM41slhdqiWEYHGUBzVbsMfzB5Mf74bWgcgKA4eKxwU7E5DXQSxtes_p3SSw5z9V-_k4DPQZ4A1KPWuczMdUROHI/s1600/helperblogger.com-silver.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}

form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}

form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}

form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style> 

<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="HBlogger" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Email Form Style 3

<style type="text/css">
#helperblogger-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-DTiTx74cVeyMqq6pMJItdKsSrzr6PEugpPKHld2q5V2FhtNEWdD-uu7Xx8DeijOqhbWKyUl4dAS9zPGYunYOSRco96B4U_coxEkKzQPkuhaL0aZqpjnYTHxdpAVTMR6Y3nmX2EfS-jo/s1600/helperblogger.com-red.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}

form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}

form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}

form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style> 

<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="HBlogger" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

• Replace HBlogger with your feedburner username in line number 39 and 40.

I hope that you will not face any problem while implement it into your blog.If you are getting then throw the problem in the comment bin :)