HTML Squeeze
With a standard HTML Squeeze page you will need several things. First an HTML Editor you like to write your html pages with or just notepad. You will also need an autoresponder service to send mail to your list. Most autoresponder services have a form generator that you can use. This example shows creating an HTML squeeze page using Aweber as our autoresponder service.
Step 1. Creating the HTML Template
Your HTML Squeeze page is going to be very simple. We don’t want to give your visitors any options other than to opt-in or leave the page. No distractions here. To create your HTML Squeeze page open up your favorite HTML Editor, or even just notepad and copy the following code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
This is a completely blank page. You will create your squeeze page within the <body></body> tags. So lets begin by adding the most obvious of things… the opt-in box, to our squeeze page.
Step 2. Adding the Opt-in Box
Using Aweber we can create a new list and generate a form to copy into our squeeze page.
Go to Aweber and Create a New List
Fill out the pertinent information then generate the form code.
Copy the form code and paste it into your Squeeze Page.
Now just paste that code between the <body></body> tags on your page your code should now look something like this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
</head>
<body>
Optin Code
</body>
</html>
Step 3. Adding a picture or copy to your Squeeze Page.
Adding a picture to your squeeze page is as easy as pie. Choose the picture you’re going to use and create a link to it in your code. The code to use is as follows…
<img src="the url of your image">
So if you make a folder called images then upload your image to that folder your url for your image would be http://yoururl.com/images/imagename.jpg so to have that image show up in your Squeeze page you would use this code.
<img src="http://yoururl.com/images/imagename.jpg">
To add copy or text to your page you insert your text in between paragraph tags <p></p>.
So now your code is looking something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
</head>
<body>
<img src="http://yoururl.com/images/imagename.jpg">
opt in code
<p> Your text or copy for your super sexy squeeze page!</p>
</body>
</html>
But now we want to add some formatting to our page so we don’t just have everything stacked on top of each other. That’s simple as well. Let’s align our image to the left of our Opt-in box.
Step 4. Formatting our Squeeze page.
The easiest way to format our squeeze page and get everything to display the way we want it is by using a Table. A table in HTML is basically a grid. Anything you put inside the table cell tags will be aligned in that table cell and won’t overflow from that column, making it easy to layout our Squeeze page exactly how we want.
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms and anything else you want to put into a cell. So let’s add a table to our page so we can align our opt-in form, image and text.
Adding the <table> tag we can add table rows with the tag <tr> and cells with the tag <td>. We’ll put our image in between the first <td></td> tags and our optin form between a second set of <td></td> tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td>
<img src="http://yoururl.com/images/imagename.jpg">
</td>
<td>
opt-in code</td>
</tr>
</table>
<p> your text or copy for your super sexy squeeze page</p>
</body>
</html>
Now let’s finish it all up with a call to action with an <h1> tag to the top of our page.
We also want to center everything up so it all aligns in the center of our page rather than defaulting to the left.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
</head>
<body>
<center><h1>Call to action…</h1></center>
<center> <table>
<tr>
<td>
<img src="http://yoururl.com/images/imagename.jpg">
</td>
<td>
opt-in code</td>
</tr>
</table></center>
<center> <p> your text or copy for your super sexy squeeze page</p> </center>
</body>
</html>
And here is how our Squeeze page turns out.
We have some great tools, templates and info on squeeze pages and how to use them effectively. Including 21 Squeeze Page Templates with 9 Video Squeeze Pages and 3 different books on list building, email marketing and profiting from your list. Gain access to these great tools by filling out a free survey .
9 Video Squeeze Page Templates
12 Squeeze Templates
List Building 101
Email Marketing For Newbies
Squeeze Page Profits