How To Drop Kick The Internet Part 2 - Capture Page Template
Read More: Alright, so in part one of "How To Drop Kick the Internet" we covered finding your target market. We also went over the first steps to building your own capture page by taking your target market questionnaire and making a headline. If you missed part one you can go read it here.
Now in Part 2 I'm going to show you step by step how to put your Headline, text and autoresponder code into a ready made template I have for you. This is going to be really directly working in the html code of the Capture Page. Take your time and pay close attention to the steps. A lot of work went into putting all of this up here, so don't forget to vote if you like it.
Now all we covered in part one for the capture page was building your headline. So you'll have to be creative and fill in the blanks. Right now it is about giving your something to look at, and teaching you how to modify things. We'll cover more on wording later. I have a mock up example below to show you what this template will look like when complete. I've decided to change things up a little and use the real examples I made for my students. So enjoy the humor, because I lay it on thick. lol
So take a look at the layout below. Have a read as well. I like to add a little humor to break things up.
This is the exact template you will be using for this lesson. It didn't all fit in the screen capture, but you can see enough to get the picture. So the first thing you need to do is copy the code below and paste it into notepad on your computer. If you are not familiar with notepad, click on the windows button on the bottom right corner of your screen, then scroll down to accessories. Notepad will be in your accessories folder if you have a windows PC. I'm not familiar with mac so maybe someone could leave that info in the comments box.
This is a lot of code I know, but I'm gonna walk you through it step by step. So copy everything between the arrows and paste it into notepad.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jack Strategy</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Chunk_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('h5', { fontFamily: 'chunk', textShadow: '2px 1px rgba(0, 0, 0, 0.2)' });
Cufon.replace('h6', { fontFamily: 'chunk', textShadow: '2px 1px rgba(0, 0, 0, 0.2)' });
</script>
<!--[if IE 6]>
<script type="text/javascript" src="js/pngfix.js"></script>
<link rel="stylesheet" href="css/style-ie.css" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
<div id="header_bg">
<div id="headtopspace"></div>
<div id="header">
<h5>Introducing</h5></div>
</div>
<!--wrapper-->
<div id="wrapper">
<div id="leftcol">
<div id="lefttop"></div>
<div id="leftbody">
<div id="leftcopy">
<!-- COPY/CONTENT START HERE -->
<h1>"Jack Strategy"</h1>
<h2>The Revolutionary New System That Will Change The Way You Think About Stealing Cars</h2>
<p>Dear Fellow Car Jacker,</p>
<p>Have you ever had one of those cars that the slim jim just wouldn't work on?</p>
<p>How about laser encrypted keys that make it nearly imposible to hotwire?</p>
<p>I've even driven away with a fresh new car, complete with window busted out, dash torn apart and alarm still sounding. </p>
<p>Never Give Up On Your Dreams!</p>
<p>This is a remarkable new system that allows your victims to practically give you their car</p>
<table border="0" width="98%" cellpadding="0" cellspacing="0" style="width:98%;margin:10px auto 0 auto">
<tr><td width="50" style="padding-bottom:10px" valign="top"><img src="images/check.png" border="0" /></td>
<td valign="top" style="padding-bottom:10px"><strong>Doors Unlocked</strong></td></tr>
<tr><td width="50" style="padding-bottom:10px" valign="top"><img src="images/check.png" border="0" /></td>
<td valign="top" style="padding-bottom:10px"><strong>Keys in the ignition</strong></td></tr>
<tr><td width="50" style="padding-bottom:10px" valign="top"><img src="images/check.png" border="0" /></td>
<td valign="top" style="padding-bottom:10px"><strong>AC or Heat already running</strong></td></tr>
<tr><td width="50" style="padding-bottom:10px" valign="top"><img src="images/check.png" border="0" /></td>
<td valign="top" style="padding-bottom:10px"><strong>Sometimes with a trunk full of groceries</strong></td></tr>
</table>
<p>If this sounds like the answer for you, fill in your info in the box to your right and see exactly what this revolutionary new system can do for your business. </p>
<p>Talk soon,<br />
<strong>Chris Owen</strong></p>
<!-- COPY/CONTENT END HERE -->
</div>
</div>
<div id="leftbot"></div>
</div>
<div id="rightcol">
<div id="righttop"></div>
<div id="rightarrow"></div>
<div id="rightbody">
<div id="rightcopy">
<h2>Fill in the box below and find out how you can be stealing cars today!</h2>
<!-- YOUR AUTORESPONDER CODE START HERE //-->
<!-- You can edit or replace the form below with your own autoresponder code -->
<form>
<input type="text" name="name" class="name_field" value="Enter Your First Name" onFocus="if(this.value == 'Enter Your First Name'){ this.value = ''; this.style.color= '#1a1a1a'; }" onBlur="if(this.value == ''){ this.value = 'Enter Your First Name'; this.style.color= '#818181'; }" />
<input type="text" name="email" class="email_field" value="Enter Your Email Address" onFocus="if(this.value == 'Enter Your Email Address'){ this.value = ''; this.style.color= '#1a1a1a'; }" onBlur="if(this.value == ''){ this.value = 'Enter Your Email Address'; this.style.color= '#818181'; }" />
<input type="submit" name="submit" value="" class="opt_btn" />
</form>
<!-- YOUR AUTORESPONDER CODE END HERE //-->
<p style="text-align:center;font:normal 10px verdana">We plan to sell, rent and do pretty much whatever possible to make money off of your information.</p>
</div>
</div>
<div id="rightbot"></div>
</div>
<div id="clr"></div>
</div>
<!--wrapper-end-->
<div id="footer">Footer Information Here. You can also put a <a href="#">link here</a>.</p>
</body>
</html>
Okay, so now that I've completely overwhelmed you, let me break this down to a very easy process.
Near the top of your code there is an area that looks like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jack Strategy</title>
Remove only the words "Jack Strategy" and replace with your title. This is not visible on the document. It is the code that you see on the very top of your screen right now that says "How To Drop Kick The Internet". For you SEO guys this is where you would put your Keywords. e.g. Steal Cars | Car Jacking | Free Groceries...
Now move on down to this area:
<div id="header_bg">
<div id="headtopspace"></div>
<div id="header">
<h5>Introducing</h5></div>
</div>
Remove the word Introducing and replace it with whatever fits your header. You can't see this in my pic of the capture page above, but it is in bold white letters above the header. If introducing works for your header great. You can also just remove the word and have nothing up there.
Next look for this:
<h1>"Jack Strategy"</h1>
<h2>The Revolutionary New System That Will Change The Way You Think About Stealing Cars</h2>
"Jack Strategy" is your header, and everything in the <h2> tags is a sub-header. If all you want to use here is the header, then just replace Jack Strategy with your header and delete everything in sub-head including the <h2> tags on each end.
Moving on:
<p>Dear Fellow Car Jacker,</p>
<p>Have you ever had one of those cars that the slim jim just wouldn't work on?</p>
<p>How about laser encrypted keys that make it nearly imposible to hotwire?</p>
<p>I've even driven away with a fresh new car, complete with window busted out, dash torn apart and alarm still sounding. </p>
<p>Never Give Up On Your Dreams!</p>
<p>This is a remarkable new system that allows your victims to practically give you their car</p>
This section here can be modified as you need it. Everything in between the <p> tags is a paragraph with a space between the the lines that are inside tags.
You can use only one paragraph if you like to explain what is in the bullet points. Any of the paragraphs you don't need should be deleted, including the <p> and </p> tags on the ends.
This next section is for your bullet points:
src="images/check.png" border="0" /></td>
<td valign="top" style="padding-bottom:10px"><strong>Doors Unlocked</strong></td></tr>
<tr><td width="50" style="padding-bottom:10px" valign="top"><img src="images/check.png" border="0" /></td>
<td valign="top" style="padding-bottom:10px"><strong>Keys in the ignition</strong></td></tr>
<tr><td width="50" style="padding-bottom:10px" valign="top"><img src="images/check.png" border="0" /></td>
<td valign="top" style="padding-bottom:10px"><strong>AC or Heat already running</strong></td></tr>
<tr><td width="50" style="padding-bottom:10px" valign="top"><img src="images/check.png" border="0" /></td>
<td valign="top" style="padding-bottom:10px"><strong>Sometimes with a trunk full of groceries</strong></td></tr>
</table>
If you don't want the whole sentence in the bullet bolded simply remove the <strong> and </strong> tags. If you want a single word or group of words to be in bold text just place those tags on each end of it like this:
The word <strong>bold</strong> is in bold print.
This next part is pretty self explanitory:
<p>If this sounds like the answer for you, fill in your info in the box to your right and see exactly what this revolutionary new system can do for your business. </p>
<p>Talk soon,<br />
<strong>Chris Owen</strong></p>
Notice how the <p> and </p> tags are spanning from before "talk soon", to after "Chris Owen". And after the comma there is this symbol. <br/>. What this does is break the line without a space. Scroll up the the capture page pic and you'll see what I mean.
This area is the text in the opt in box:
<div id="rightcopy">
<h2>Fill in the box below and find out how you can be stealing cars today!</h2>
<!-- YOUR AUTORESPONDER CODE START HERE //-->
Replace it with something that fits your call to action.
I'm gonna skip over the form code for last, and move on to the privacy text:
<!-- YOUR AUTORESPONDER CODE END HERE //-->
<p style="text-align:center;font:normal 10px verdana">We plan to sell, rent and do pretty much whatever possible to make money off of your information.</p>
Obviously you'll want to replace this text with a real privacy statement, like "Your privacy is important to us. We never sell, rent or trade your information."
And at the very bottom we have the footer:
</div>
<!--wrapper-end-->
<div id="footer">Footer Information Here. You can also put a <a href="#">link here</a>.</p>
</body>
</html>
I recommend you just remove the text "Footer Information Here. You can also put a ". Then replace the # with something like your company disclaimer link, or a link to your blog home. The text "link here" is what the actual link will say. So if I wanted to link to my blog, I would do this:
<a href="http://www.chrisowenacademy.com">blog</a>
Okay, now I think I have officially made the longest article ever on Better Networker. So I'm gonna close up shop here, and make a new article for the autoresponder code. It is a little tricky, so it really needs it's own section anyway.
So now, click the file tab on the top right of your notepad, and click save in the drop down box. Just select desktop for the save location for now. I'll put the download for the folder with images and style sheets in the next lesson. "How To Drop Kick The Internet Part 3 - Form Code Breakdown".
Thanks,
Chris Owen
Views: 1,042
| 
Comments: 1 
About the Author: Chris Owen
Member Since: 01/01/2010
I'm a Distributor For:: Global Resorts Network
Other Company: Chris Owen Academy
Industry: Marketing and Advertising
Primary Web Site: http://www.chrisowenacademy.com/
Putting a capture page up can't be any more 123
You laid it out for anyone to understand. I use NVu too, which says something if this html mental midget can make this stuff work. People should really read the copy too, it's pretty darn funny.