Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Every blogger wants a good newsletter template for their newsletter just like me and with help of Google Docs even peoples who are using Blogger as their blogging platform can also create their own newsletter.
All newsletter are image-based forms which are created on a image with HTML and CSS and looks really amazing.
<style type="text/css">
#WC-Newsletter1-Box {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3FX1HYoeIV1pidduutXnbiT52rvKxvHX8Xlnw3ouNtK7fOFip46YSy4lfxUwijhHeXu5_Z6QIIykOJDrIlz9_f73VMJg5IMlvkm6OZ7Qio_kn-PGlpwaLyPSCTewo8_P9ciCoBUWLIx0/s1600/Newsletter-1.png)no-repeat scroll center center transparent;
height: 143px;
width: 264px;
}
form#WC-Newsletter1-Form {
display: block;
margin: 0;
padding-left: 71px;
padding-top: 63px;
}
form#WC-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#WC-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="WC-Newsletter1-Box">
<form id="WC-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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
</form>
</div>
<style type="text/css">
#WC-Newsletter2-Box {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRkjC2ar-lJbACrGANsZGv9t5R6_WXUIGVfkRpOqNztuuyUUewNkXYakVjOmo2CAmizPh-XkSWTCkqBUe5Oj8f4XkDkqO-_7OlL87YPurlpHZPn3W-couMLSa8U0QZ8ZuIXyo8vi-BAo4/s1600/Newsletter-2.png)no-repeat scroll center center transparent;
height: 142px;
width: 300px;
}
form#WC-Newsletter2-Form {
display: block;
margin: 0;
padding-left: 71px;
padding-top: 63px;
}
form#WC-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#WC-Newsletter2-Form #sbutton {
background: transparent;
border: none;
cursor: pointer;
height: 32px;
position: relative;
left: 107px;
top: 13px;
width: 111px;
}
</style>
<div id="WC-Newsletter2-Box">
<form id="WC-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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
</form>
</div>
<style type="text/css">
#WC-Newsletter3-Box {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEkxRY38f8yU-4ADMpUP65fSehxktShCVIVNO3uXnLpOhhkmlKYZc2I-eid52w1BazMO3mQ0Eni2tWR2HjEuJQQTQrHLaFo6ygrxHpxMJ97_FV14lW0DwRm8ICQcupZjEOE-cfRkuNaKM/s1600/Newsletter-3.png)no-repeat scroll center center transparent;
height: 230px;
width: 355px;
}
form#WC-Newsletter3-Form {
display: block;
margin: 0;
padding-left: 71px;
padding-top: 63px;
}
form#WC-Newsletter3-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#WC-Newsletter3-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="WC-Newsletter3-Box">
<form id="WC-Newsletter3-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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
</form>
</div>
<style type="text/css">
#WC-Newsletter4-Box {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhScvYBHYBWBx_W6TEF1RSNpO9fKlZyxGCsKd_SPsNYWlmB3-dqrwlSK46-M74NKWhjtoAyKaeMwXujpXHHXK7TUXSEBYFpXIlgLPdQ6Px-zdi8VOQpJjzXQYx5C2-P6PsCWe9v_U3lflw/s1600/Newsletter-4.png)no-repeat scroll center center transparent;
height: 311px;
width: 349px;
}
form#WC-Newsletter4-Form {
display: block;
margin: 0;
padding-left: 71px;
padding-top: 63px;
}
form#WC-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: 235px;
outline:0px;
position: relative;
left: 43px;
}
form#WC-Newsletter4-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#WC-Newsletter4-Form #sbutton {
background: transparent;
border: none;
cursor: pointer;
height: 28px;
position: relative;
left: 179px;
top: 41px;
width: 90px;
}
</style>
<div id="WC-Newsletter4-Box">
<form id="WC-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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
</form>
</div>
<style type="text/css">
#WC-Newsletter5-Box {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIv6QlfK6M3sg6ljYqmmSiZ-RFXnHpfTp11fAZWDKcIKXYYUA9HpHDuXtx73UOlIpM-UD8-xKpN6U4J081hXlNBoeyaHINcW45KhnmOPUtMUF8Z15G1dLtRaBagz0dSgGEEiKaq5_EB4/s1600/Newsletter-5.png)no-repeat scroll center center transparent;
height: 299px;
width: 408px;
}
form#WC-Newsletter5-Form {
display: block;
margin: 0;
padding-left: 71px;
padding-top: 63px;
}
form#WC-Newsletter5-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#WC-Newsletter5-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#WC-Newsletter5-Form #sbutton {
background: transparent;
border: none;
cursor: pointer;
height: 43px;
position: relative;
left: -36px;
top: 25px;
width: 144px;
border-radius: 5px;
}
</style>
<div id="WC-Newsletter5-Box">
<form id="WC-Newsletter5-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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
</form>
</div>
If any got some cool form images like this then please post them in comment below and i might add them in some next posts..... :)
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
