Top 5 Beautiful Newsletter Forms for Blogger


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


Beautiful Newsletter Forms for Blogger
I had already shared a post about adding subscription box with hover effect to your blogger blog or website. In this post too me wanna share brilliant 5 stylish Newsletter Forms for your blog. Each form is different in style. So it's your decision to choose your style which is suitable for your blog. This widget is originally shared by WidgetCraft and I just re-shared in my blog.

You can see the demo screenshot of each Newsletter Form before it's code and get an idea of what we are going to make right here. As I mentioned just above each form is different in style (Your Newsletter Form seems as below screenshots named Newsletter Form Style 1,2,3,4 and 5).

question mark icon png How to add this Nesletter Forms to your blog
To add this stylish Newsletter Forms to your blogger blog/website follow below 6 steps carefully. 

  1. First choose your desired Newsletter Form below
  2. Copy the code of that Newsletter Form
  3. Go to Blogger Dashboard > Layout
  4. Click on Add a Gadget 
  5. Select HTML/JavaScript
  6. Paste code (leave title column blank) and save it


Newsletter Form Style 1 

Newsletter Form Style 1

<style type="text/css">
#LS-Newsletter1-Box {
    background: url(http://4.bp.blogspot.com/-YL316LAsD9U/UEEicRMg7tI/AAAAAAAALSo/huvi3XqnnIo/s1600/Newsletter-1.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 264px;
}
form#LS-Newsletter1-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#LS-Newsletter1-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 21px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 160px;
    outline:0px;
}
form#LS-Newsletter1-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 21px;
    padding-right: 45px;
    position: relative;
    left: 92px;
    top: 28px;
    width: 35px;
}

</style>
<div id="LS-Newsletter1-Box">
    <form id="LS-Newsletter1-Form" action="#" method="post">
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/>
    </form>
</div>


Newsletter Form Style 2

Newsletter Form Style 2

<style type="text/css">
#LS-Newsletter2-Box {
    background: url(http://3.bp.blogspot.com/-HpHwkouqhho/UEEidW-KuJI/AAAAAAAALSw/ezxs40Pqyzg/s1600/Newsletter-2.png)no-repeat scroll center center transparent;
    height: 142px;
    width: 300px;
}
form#LS-Newsletter2-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#LS-Newsletter2-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: -6px;
    padding-left: 2px;
    vertical-align: top;
    width: 270px;
    outline:0px;
    position: relative;
    left: -57px;
}
form#LS-Newsletter2-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 32px;
    position: relative;
    left: 107px;
    top: 13px;
    width: 111px;
}

</style>
<div id="LS-Newsletter2-Box">
    <form id="LS-Newsletter2-Form" action="#" method="post">
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/>
    </form>
</div>


Newsletter Form Style 3

Newsletter Form Style 3

<style type="text/css">
#LS-Newsletter3-Box {
    background: url(http://4.bp.blogspot.com/-Y-vF5-bSEro/UEEighPucII/AAAAAAAALTA/DDi0Mk_gEa8/s1600/Newsletter-4.png)no-repeat scroll center center transparent;
    height: 311px;
    width: 349px;
}
form#LS-Newsletter3-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#LS-Newsletter3-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 37px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: 43px;
}
form#LS-Newsletter3-Form #d {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 22px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: 43px;
}
form#LS-Newsletter3-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 28px;
    position: relative;
    left: 179px;
    top: 41px;
    width: 90px;
}

</style>
<div id="LS-Newsletter3-Box">
    <form id="LS-Newsletter3-Form" action="#" method="post">
        <input id="d" name="name" value="Enter Your Name"
        onfocus='if (this.value == "Enter Your Name") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your Name";}'/>
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/>
    </form>
</div>


Newsletter Form Style 4

Newsletter Form Style 4

<style type="text/css">
#LS-Newsletter4-Box {
    background: url(http://1.bp.blogspot.com/-65PvPzNlUCo/UEEijEFGUdI/AAAAAAAALTI/5UGflvDEMJ8/s1600/Newsletter-5.png)no-repeat scroll center center transparent;
    height: 299px;
    width: 408px;
}
form#LS-Newsletter4-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#LS-Newsletter4-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 37px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#LS-Newsletter4-Form #d {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 38px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 43px;
    position: relative;
    left: -36px;
    top: 25px;
    width: 144px;
    border-radius: 5px;
}

</style>
<div id="LS-Newsletter4-Box">
    <form id="LS-Newsletter4-Form" action="#" method="post">
        <input id="d" name="name" value="Enter Your Name"
        onfocus='if (this.value == "Enter Your Name") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your Name";}'/>
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/>
    </form>
</div>


Newsletter Form Style 5

Newsletter Form Style 5

<style type="text/css">
#LS-Newsletter5-Box {
    background: url(http://1.bp.blogspot.com/-kJo_v4W6Qto/UEEie4wT7XI/AAAAAAAALS4/OgZfjp9e2o4/s1600/Newsletter-3.png)no-repeat scroll center center transparent;
    height: 230px;
    width: 355px;
}
form#LS-Newsletter5-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#LS-Newsletter5-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 118px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: -35px;
}
form#LS-Newsletter5-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 32px;
    position: relative;
    left: 206px;
    top: -31px;
    width: 55px;
    border-radius: 0px 25px 25px 0px;
}

</style>
<div id="LS-Newsletter5-Box">
    <form id="LS-Newsletter5-Form" action="#" method="post" >
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/>
    </form>
</div>

You may also like -



Hope you like this article. As I mentioned in above its all credit goes to WidgetCraft. If you have any problem while you installing it, just feel free to ask via comment. Happy blogging:)