AWeber Style E-Mail Subscription Form

Tweet

AWeber is an e-mail marketing company through which any blogger or a website owner can send newsletters to it's subscribers with ease. At present, it is one of the most cheapest for e-mail marketing. It's e-mail subscription form is pretty good looking. Implementing the form in your blog will make it look more professional.

The credit for this form goes to Hassam of bloggingehow. 

The form is basically a customised feedburner form which lets anyone subscribe to your blog RSS feed. Since the form is good looking it will catch the attention of your visitors quickly.

To use this form in your blogger blog ,

>> Go to your blogger account.

>> Layout --> Add a Gadget --> HTML/ Javascript

>> Add the following code

<div class="subscribe_outer">
<div class="subscribe_wrapper">
<h1>Subscribe Via Email</h1>

<p >Sign up for daily updates.We value our e-mail subscribers and will never spam your inbox.</p>

<div id="btntEmailsub">
<form class="btntEmailform" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogtipscodes', 'popupwindow', 'scrollbars=yes,width=300,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="blogtipscodes" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input class="emailText" type="text" value="Enter your email..." onfocus="if (this.value == " enter your email...") {this.value="" }" onblur="if (this.value == " ") {this.value="enter your email..." ;}" name="email" />
<input class="emailButton" type="submit" value="Signup Now! (FREE)" title="" />
</form>
</div>
<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"></p>
</div>
</div>

<style>

.subscribe_outer {
    background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/color-chronicl.gif") repeat scroll 0 0 transparent;
    margin: 0 -15px;
    padding: 3px 0;
}
body {
    color: #272727;
    font-family: Georgia,"Times New Roman",Times,serif;
}
body {
    color: #272727;
    font-family: Georgia,"Times New Roman",Times,serif;
}
.sidebar .subscribe_wrapper h1 {
    color: #FFFFFF;
}
.sidebar h1 {
    color: #272727;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-size: 15px;
    font-weight: normal;
    padding: 4px 0 15px;
}
h1, h6 {
    letter-spacing: 2px;
    text-transform: uppercase;
}
.sidebar .subscribe_wrapper h1 {
    color: #FFFFFF;
}
.sidebar h1 {
    color: #272727;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-size: 15px;
    font-weight: normal;
    padding: 4px 0 10px;
}
h1, h6 {
    letter-spacing: 2px;
    text-transform: uppercase;
}
.subscribe_wrapper {
    background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/pattern-chronicl.png") repeat scroll 0 0 #333333;
    color: #CCCCCC;
    font-size: 14px;
    line-height: 10px;
    padding: 38px 50px 18px 38px;
}
.emailButton {
    background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
}
.emailText {
    background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
    color: #444444;
    margin: 0 0 5px;
    padding: 10px 40px;
    text-decoration: none;
    width: 70%;
}
input, textarea {
    font-family: Georgia,"Times New Roman",Times,serif;
}
.subscribe_wrapper {
    color: #CCCCCC;
    font-size: 14px;
    line-height: 20px;
}
.post-body .emailButton {
    width: 300px;
}
.emailButton {
    background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
}
</style>

>> Now before saving it, use CTRL+F to find blogtipscodes and replace it with your own feedburner username.

>> Save it and view your blog to see the effect.

If you have any problems while implementing it, just shoot the comment section. 

Posted in: blogging tips