Holding pages can be very useful for data capture while you are working out the kinks in your website. You can promote the site before launch and a data capture page lets you monitor public interest, and notify those people when you finally launch. Wonderful.

So here’s a quick and simple way to get your holding page grabbing data right away. Before we start you will need to have access to a database, and be able to create new tables. You also have to have a hosting account on a linux server so you can use the php files.

Ok, first we need to create a new table for which to store the captured data. Log in to phpMyAdmin, or whichever management panel you use and run this MySQL script:


CREATE TABLE signups
 (
 ID int NOT NULL AUTO_INCREMENT,
 PRIMARY KEY(ID),
 first_name varchar(15),
 last_name varchar(15),
 email varchar(255)
 )

Next we need to connect to the database. To do this we need to create a php file, lets call it db-cnx.php. We do this so within your website you can reference this file whenever you need to connect without writing new code.

Within db-cnx.php you need to define the database user, password and database name.


<?php
$con = mysql_connect("localhost","user","password");

if (!$con)
{
 die('Could not connect: ' . mysql_error());
}

mysql_select_db("database_name", $con);
?>

You need to replace “user”, “password” and “database_name” with your actual username, password and the name of the database. Localhost is used if your database is on the same server or virtual server as your website. If you are hosting your database separately you will have to change localhost to whatever yours is.

So now we have a connection to the database, we can build our data capture form. Lets start by creating your index.html file, then add the usual web markup:

<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8"/>
    <meta name="description" content="A tutorial on creating a data capture holding page"/>
    <meta name="viewport" content="initial-scale=1.0, width=device-width"/>
    <link rel="stylesheet" href="style.css" type="text/css" media="all"/>
<title>Subscribe</title>
</head>
<body>
    <div id="container">

    </div>
</body>
</html>

Now we add a simple title and description to instruct the viewer on what they are signing up to:

<img src="images/logo.png" alt="Company Logo"/>
<hgroup>
    <h1>Welcome to our holding page.</h1>
    <h2>We are just finishing off our new website, if you would like to an update on our launch please enter your details. Thanks.</h2>
</hgroup>

Ok now it time for the form. A simple is always best for these types of pages, minimal fields and easy to use. First name, last name, email address and then submit. Make sure the name fields match the fields in your database. It’s as simple as that.

<form id="subscribe" name="subscribe" method="post" action="process.php">
    <label for="first_name" id="first_name_label">First Name</label>
    <input type="text" name="first_name" id="first_name" />
    <label for="last_name" id="last_name_label">Last Name</label>
    <input type="text" name="last_name" id="last_name" />
    <label for="email" id="email_label">Email</label>
    <input type="text" name="email" id="email" size="30" value="" />
    <input type="submit" name="submit" id="submit_btn" value="Submit" />
</form>

Ok this looks ok, but lets make it better with a little styling. Create a file called style.css and add this to it:

* {margin:0; padding:0; outline:none;}

body {font-size:1.1em; font-family:Arial, Helvetica, sans-serif; background: #f0f0f0;}

img {max-width:100%; height:auto;}

hgroup {display:block;}

#container {width: 800px; margin: 10px auto;}

h2 {font-size: 18px; margin:10px 0 20px 0;}

form {display: block; width: 600px; margin: 0 auto; padding:25px; background:#fff; border:solid 2px #a0a0a0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

label {display: block; float: left; width: 45%; margin: 0 3% 10px 0;}

input {font-size: 100%; width:48%; padding: 3px 5px; background: #f0f0f0; margin: 0 0 10px 0; border: solid 2px #A0A0A0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

input[type='submit'] {margin: 0 auto; width: 220px; display: block; margin-top: 20px; background: #666; border-color: #555; color: #EEE; padding: 10px; cursor: pointer;}
input[type='submit']:hover {background:#eee; color:#666; border-color:#aaa;}

Great! Now we are looking at something a little better. Time for the magical php. Create a new file called process.php. In this we are going to take the data submitted in the form, save it to the database and email it to ourselves too.

<?php
include('db-cnx.php');

mysql_select_db("database_name", $con);

$sql="INSERT INTO signups (first_name, last_name, email)
VALUES
('$_POST[first_name]','$_POST[last_name]','$_POST[email]')";
$result = mysql_query($sql, $con);

$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "From: mail@example.com \r\n";

$to = 'mail@mydmain.com';
$subject = 'Form Submission : Submission';
$headers .= "Cc: \r\n";
extract($_POST);

foreach($_POST as $key => $row)
 ${$key}=htmlentities(utf8_decode($row));

$message = '
<html>
<head>
</head>
<body>
<table width="550" border="1" cellspacing="2" cellpadding="2">

       <tr bgcolor="#eeffee">
          <td>First Name</td>
          <td>'.$first_name.'</td>
       </tr>
       <tr bgcolor="#eeffee">
          <td>Last Name</td>
          <td>'.$last_name.'</td>
       </tr>
       <tr bgcolor="#eeeeff">
          <td>Email</td>
          <td>'.$email.'</td>
       </tr>
</table>
</body>
</html>';

mail($to, $subject, $message, $headers);

?>

First we include our database connection with include(‘db-cnx.php’); This will connect us to our database so we can save our data. Next we use php’s mysql_select_db function to select our database name and open the connection.

Next we define the $sql variable  by naming the table we are sending data to, and the fileds in the form that we are sending to the database. Then we use php’s $_POST method to name each field we have in the form that should match the database fields.

Then we define $result as the mysql query containing our predefined $sql and the database connection. After this point we build up the email we want to send ourselves when there is a form submission.

We start by defining $headers with the usual fields including ‘to’ and ‘from’. Next we use php’s foreach function to build the html email for each form submission. We use tables here, I know it’s awful, but tabes are safer for rendering in all the various mail clients out there.

Go for a simple layout, remembering to include the fields submitted in the form so you know who has submitted. Finally we call the mail() function to actually send the email, and that’s it! A working data capture form for your holding page!

Now you’ll most likely want to go a little further than this, maybe use ajax for the form submission so that users are not directed to a page with only a thank you message. So for this we are going to use jQuery, so we need to include this in out web page. Add this directly after the closing tag of your container:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

Then directly after this open script tags and add this jQuery:

(function() {

    $("#submit_btn").click(function() {
        var firstName = $("input#first_name").val();
            lastName = $("input#last_name").val();
            email = $("input#email").val();
            dataString = 'first_name=' + firstName + '&last_name' + lastName + '&email=' + email;
        $.ajax({
            type: "POST",
            url: "process.php",
            data: dataString,
            success: function() {
                $('#subscribe').html("<div id='message'></div>");
                $('#message').html("<h2>Thank you.</h2>")
                .append("<p>We will email you when our site is up.</p>")
                .hide()
            }
        });
        return false;
    });
})();

So we open an anonymous self invoking function first. No need to use on document load as we are running this at the end of the web page. First we open a function when the submit button is clicked, then we create variables for all the form fields using val(), then join them into a dataString that will be used by our process.php file. Then we use jQuery’s $.ajax function to run the process.php file without reloading. Remember to reference the location of process.php if you happen to move it somewhere Also reference the correct form id as we will be creating a new div for the thank you message. Ok that will turn our form into an ajax form.

I hope this is useful for your next holding page. Thanks

download files