A Pre-Launch Page is a way for you to build some interest with your target audience while you slave away in the shadows building your awesome new project.  It also allows you to build an email list of interested potential users, which could absolutely be your most precious asset in the beginning.  There are several paid services that help you do this and more (LaunchRock, Prefinery, KickOffLabs), but in the spirit of staying truly lean I’m going to show you how to roll your own Launching Soon page for free.  This page will:

•  Establish an initial presence
•  Provide teaser information about what you’re working on
•  Capture visitor emails and build a list
•  Encourage social sharing

Live Demo Download the Files

This should take you about 30-60 minutes to complete.

You’ll need to set up free accounts with Campaign Monitor and AddThis.  I also assume that you have a hosting account and a domain name already pointed at it.

Ready?  Okay let’s do this.

 

Step 1:  Set up Campaign Monitor

After signing up for your free Campaign Monitor account and logging in, you’ll see the dashboard.  Click the link (the business name you signed up with) in the “Clients you’re sending for” sidebar.

On the next screen, click the “Manage your subscribers” link at the bottom of the page.

Next, click the “Sample List” link so that you can modify it.

Under the “Sample List” heading, click the (change name/type) link just below.

Re-name your list to something like “Pre-Launch Page”.  For the “List Type”, leave it on the “Single opt-in” option, then click the “Save Changes” button.

On the next page, click the “Create a subscribe form” link in the right sidebar.

Uncheck the “Name” field, since we’re really only interested in collecting email addresses at his point.  Then, click the “Start customizing” link in the right sidebar.

On this page, we’re going to tell Campaign Monitor which page the user should see after adding their email address.  Clear out the default url, and replace it with “yourdomain.com/thanks” (obviously, replace “yourdomain.com” with whatever your actual domain name is.

Under the “Subscription Confirmation Email” section, leave the default “Do nothing” button selected, unless you have something really compelling to say to the folks who sign up and want to automatically send them an email.  Click the “Save the subscribe process” button.

Next, you’ll click the “Build a subscribe form” link in the right sidebar.

Now, click the “Generate the code” button (make sure the “Name” option is still unchecked).

Leave this window open for now.  We’ll come back to it later.

 

Step 2:  Set up your Signup and Thanks pages

If you haven’t already, download the pages I’ve already built for you based on a trimmed down version of the HTML5 Boilerplate framework.  Drop everything inside the “launchingme” folder into your root directory.  Important: Make sure you get the included .htaccess file uploaded.

 

Let’s start with customizing the Signup page for your project.  Open up index.html in your text editor and do the following:

• Update the <title></title> with your project name and a brief description.
• Update the meta description and author tags with your information.
• Upload your own logo.png file into the /img directory, replacing the placeholder logo already there.
• Add your own interest-grabbing headline and desire-inducing tagline in the <h1></h1> and <h2></h2> tags.

Next, we’ll go back to the form code you generated in Campaign Monitor and integrate it into your page.  If you’re using the pages I provided, you’ll just need to copy and paste three items from your Campaign Monitor code into your form where I’ve indicated:

• Form action url:  Delete everything inside the quotes, including the brackets, and replace it with the url from your Campaign Monitor code (e.g. http://bigasswallet.createsend.com/t/r/s/atuzd/)
• Input name:  Delete everything inside the quotes, including the brackets, and replace it with the input name character string from the Campaign Monitor code (e.g. cm-atuzd-atuzd)
• Input id:  Delete everything inside the quotes, including the brackets, and replace it with the input id character string from the Campaign Monitor code (e.g. atuzd-atuzd)

Open up thanks.html.  This is the page your visitors will see after they add their email to your beta invite list.  Repeat the following steps from above:

• Update the <title></title> with your project name and a brief description.
• Update the meta description and author tags with your information.
• Upload your own logo.png file into the /img directory, replacing the placeholder logo already there.
• Add your own interest-grabbing headline and desire-inducing tagline in the <h1></h1> and <h2></h2> tags.

Next, you’ll need to head over to AddThis and click the big “Get AddThis” button.  Sign up (it’s free), and then select the style and social buttons you want from the left sidebar.  Grab your code, and replace the existing placeholder AddThis code in the files you downloaded above with it.

Important: You also need to add the following to each of your AddThis buttons, so that when people share your Pre-Launch page it points to the Signup page, and not the Thanks page:

addthis:url="http://yourdomain.com"

Here’s an example:

<div>
<a addthis:url="http://bigasswallet.com" fb:like:layout="button_count"></a>
<a addthis:url="http://bigasswallet.com"></a>
<a addthis:url="http://bigasswallet.com"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e41a714137a9117"></script>

 

Step 3:  Managing email addresses and tracking social sharing

You’ll want to test everything to make sure you’re capturing emails properly and that sharing works.  Walk through the signup and social share process yourself with a few email addresses to test everything out.

It’s easy (and addictive!) to track who’s signed up in Campaign Monitor.  Go to your dashboard, and click your project’s name in the left sidebar.

On the next page, click the “Manage your subscribers” link.

Click your page name, and you’ll see a list of email addresses for everyone who visited your page and signed up.  You can even click through on the emails to get more information about the person who signed up (mostly useful after you’ve sent out an email blast or two).

Tracking shares of your landing page is dead simple with AddThis.  Simply log in to your AddThis account and click the “Analytics” menu item.  You’ll be presented with a nice summary snapshot of sharing activity, clicks and viral lift %.  You can even connect a Facebook Page to your account and track tweets mentioning your page.

 

Congratulations!

You shouldn’t need to spend more than an hour setting all this up, especially if you use the plug-and-play site files I’ve provided.  Aside from hosting and registering a domain name, this won’t cost you a dime!  Now you have no excuse not to get your Pre-Launch page up and start telling people about your awesome new project.  I’d be honored to be the first person you tell about it!  Just tweet me and I’ll be happy to sign up.