Building Your Email List

Building an email list is an outstanding way to communicate with your website users. It's more effective than having them friend you on Facebook or follow you on Twitter, where your messages are likely to get lost in the massive stream of often useless status updates and tweets.

Take a look at the subscription forms to your left and at the bottom of this page. Go ahead and sign up to see how they work.

In this tutorial, I'll show you how to make these forms, add them to your site, and send your visitors valuable information to keep them engaged with you.

Email List Management

First, you'll need to sign up with an email list management company. I use and recommend . I prefer Aweber over other companies because they allow you to disable the double opt-in on web form submissions. An email list management company will give you the ability to send subscribers automatic confirmation emails, along with a series of "auto-responders" spaced out over the interval of your choice.

For example, when a person subscribes to my email list, I send them a confirmation email followed by several additional emails, one every two days. These emails contain free tips and advice on everything from choosing a topic for a website to monetizing and promoting it. You can send a similar series of emails based on the subject of your site.

An email list management company also gives you the ability to send a message out to all of your subscribers with little chance of having emails marked as spam. Each email has an unsubscribe link at the bottom, where a user can unsubscribe with a single click.

Creating Your Custom Form

Companies like Aweber have easy to use forms where you can copy their code and insert it on your website. But I prefer to have more detailed control and style my forms exactly as I choose.

I place my email subscription forms in two places, at the top of my sidebar and at the bottom of each page. Using my website template, which you can download for free here, I only have to paste the code into two files: sidebar.php and footer-ad.php. By placing the code in those two files the forms appear on every page of my site.

I'll give you the code I use for both. With minimal HTML and CSS knowledge you can modify the code to match your site.

Sidebar Email Submission Form

Here is the HTML code I use for the form at the top of my sidebar:

<div id="side-email-form">
<div class="seftext">FREE Material & Tips:</div>
<form method="post" action="http://www.aweber.com/scripts/addlead.pl">
<input type="hidden" name="listname" value="hungrypiranha" />
<input type="hidden" name="redirect" value="http://www.hungrypiranha.org/confirmed" />
<input type="hidden" name="meta_adtracking" value="SidebarForm" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_forward_vars" value="0" />
<font class="seflabel">Name:<input type="text" name="name" id="name" value="" /></font>
<font class="seflabel">Email:<input type="text" name="email" id="email" value="" /></font>
<div class="button-submit"><input type="submit" id="submit" value="Get It Now!" /></div>
</form>
</div>
</div>

To use this code, you'll need to have an account, and replace hungrypiranha with the name of your own email list. Notice that my form redirects to my confirmation page once a person has submitted their name and email address. You'll obviously want to create a confirmation page and change the link so that it points to your confirmation page instead of mine.

Here is the CSS code you'll need to put in your stylesheet, to go along with the above HTML code:

#side-email-form {
padding: 5px;
}

.seftext {
font-size: 13px;
text-decoration: none;
font-weight: bold;
color: #2e2e2e;
padding: 0 0 8px 0;
}

.seflabel {
font-size: 13px;
line-height: 20px;
text-decoration: none;
color: #2e2e2e;
}

#side-email-form input[type=text] {
color: #2e2e2e;
margin: 0 0 7px 0;
}

#side-email-form input[type=submit] {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: url(images/submit-bg.gif) repeat-x;
color: #ffffff;
font-weight: bold;
font-size: 14px;
border: 0px;
padding: 5px 10px 5px 10px;
cursor: pointer;
}

.button-submit {
padding: 2px 0 5px 0;
}

Notice in the CSS code above, I'm using an image for the background of my button. You can do the same, or you can simply change the background to any solid color.

Bottom of Page Email Submission Form

And here is the HTML code I use for the form at the bottom of my page:

<div id="subscribe-box">
<div class="sbtext">Want to get FREE material and great money making advice from <i>HungryPiranha.org</i>?<br/>Just enter your name and email below.</div>
<form method="post" action="http://www.aweber.com/scripts/addlead.pl">
<input type="hidden" name="listname" value="hungrypiranha" />
<input type="hidden" name="redirect" value="http://www.hungrypiranha.org/confirmed" />
<input type="hidden" name="meta_adtracking" value="ContentSubscribeBox" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_forward_vars" value="0" />
<font class="sblabel"><input type="text" name="name" id="name" value="Your Name" /></font>
<div class="clearer"></div>
<font class="sblabel"><input type="text" name="email" id="email" value="Your Email" /></font>
<div class="sb-button-submit"><input type="submit" id="submit" value="Get It Now!" /></div>
<div class="sbtext2">I will not share your email address with anyone. No spam, guaranteed.</div>
</form>
</div>

Again, you'll need to replace hungrypiranha with your own Aweber list name, along with the relevant links above.

Here is the corresponding CSS code:

#subscribe-box {
background: #f6f5f5;
width: 625px;
padding: 15px;
border: #dddada 1px solid;
margin: 0px 0 20px 0;
}

.sbtext {
font-size: 14px;
text-decoration: none;
font-weight: bold;
color: #2e2e2e;
padding: 0 0 15px 0;
}

.sbtext2 {
font-size: 13px;
text-decoration: none;
font-weight: normal;
color: #2e2e2e;
padding: 10px 0 0px 0;
}

.sblabel {
font-size: 13px;
line-height: 20px;
text-decoration: none;
color: #2e2e2e;
}

#subscribe-box input[type=text] {
color: #2e2e2e;
margin: 0 0 7px 0;
}

#subscribe-box input[type=submit] {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: url(images/submit-bg.gif) repeat-x;
color: #ffffff;
font-weight: bold;
font-size: 14px;
border: 0px;
padding: 5px 10px 5px 10px;
cursor: pointer;
}

.sb-button-submit {
padding: 2px 0 0px 0;
}

Again, you'll need to either create your own button background image, or change the background to a color.

To learn how to increase your blog subscriptions, check out this tutorial.