This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Monday, June 29, 2009

How to implement a launching soon page with PHP and jQuery

In this tutorial I want to explain how to implement a simple launching soon page using PHP and jQuery. What's a launching soon page? In general it's a page that informs the visitors of a website under construction about when the website is going to be online and allows them to leave their emails in order to be updated when the website is on-line. A typical launching soon page contains a countdown and a form that collects emails from interested visitors. In this tutorial I implemented a launching soon page like this:



Take a look at the live preview here.

This page is very simple to modify and customize using just some lines of CSS code. You can also add the logo of your company and all elements you want with some lines of HTML code. Download the source code of this tutorial you can customize and reuse in your web project for free!





A little introduction
How I said this package is ready to use and contains these files:



- index.php: the launching soon page final interface (countdow + form)
- config.php: enables database connection
- insert.php: PHP code to add emails into a database table
- js/jquery-1.3.2.min.js: jQuery framework
- js/countdown.js: the countdown script


1. index.php
index.php is the final interface of your launching soon page. How I said it contains a countdown and a form to allow users to leave their emails.

The countdown script
In order to implement the countdown I used this dynamic countdown script that lets you count down to relative events of a future date/time. This future date, while the same for everyone, occurs differently depending on the time zone they're in. The result is here and it's fully customizable changing some lines of CSS code:




The only thing you have to do is to add this line of code in the <head> tag of the page:

<script type="text/javascript" src="js/countdown.js"></script>

Then, in the tag <body> add the following lines of code to display the countdown:

<div id="count_down_container"></div>
<script type="text/javascript">
var currentyear = new Date().getFullYear()
var target_date = new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>


To set a target date you have to change this line modifying July 6 and the hour 0:0:00 with your target date (for example 25 december):

new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")


...if your target date is 25 December the previous line becomes:

new cdtime("count_down_container", "December 25, "+currentyear+" 0:0:00")


If you want to change the style of the countdown you have to modify the following CSS classes:

.count_down{...}
.count_down sup{...}


In particular .count_down{} changes the format of the numbers and .count_down sup{} changes the style of the text "days", "hours", "minutes".


jQuery and the input form
Ok, the countdown is ready! Next step: add this line of code to include jQuery in the <head> tag of the page:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"> </script>

Now, in the tag <body> add a simple form with an input field:

<form id="submit_leave_email">
<input id="input_leave_email" type="text" class="input_bg" value="Add your e-mail address"/>
<button type="submit" class="input_button">Update me</button>
</form>


...and add this layer to display a custom message when an user submit the form:

<div id="update_success">E-mail added!>/div>

...the result after the submission is here:



The form with the input field disappears with a nice fade-out effect and a success message appears in its place. Now, in the <head> tag, after the line of code that includes jQuery, add this script to enable ajax functionalities to insert emails added from users into a database table without reload the page:

<script type="text/javascript">
$(document).ready(function(){
$("form#submit_leave_email").submit(function() {
var input_leave_email = $('#input_leave_email').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"input_leave_email="+ input_leave_email,
success: function(){
$("#submit_leave_email").fadeOut();
$("#update_success").fadeIn();
}
});
return false;
});
});
</script>


2. insert.php
insert.php contains some lines of PHP code to insert an email address into a database table. In this example I created a table EMAIL with just one attribute "email". PHP code is very simple:

<?php
if(isset($_POST['input_leave_email'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$email = strip_tags($_POST['input_leave_email']);

$sql = 'INSERT INTO WALL (email) VALUES( "'.$email.'")';
mysql_query($sql);
echo $email;
} else { echo '0'; }
?>


Now, remember to modify your database connection parameters in config.php and upload all files on your testing server. Than load index.php and see the result!

Take a look at the live preview here.

That's all! Download the source code of this tutorial you can customize and reuse in your web project for free! Leave a comment for your suggestions, thanks!

blog comments powered by Disqus
Anonymous said...

Thanks Antonio! always your work is fresh, clean and usefull.

inerds said...

thank god that u finally had this tut on 110mb.com i cannot load the demos on your other demo site.

Great tut

Myst said...

Hey!
In my opinion, every of the counter part should have pre defined width. Why? Becouse some numbers are wider that the others (eg. 1 and 7). Besides, that counter should replace 7seconds for 07seconds for the same reason than above. It looks better, when every element is 'static' and isn't jumping left and right.
But the whole idea is good :)

Helen Hunt said...

Thank you for showing us this very useful tip. I currently have 2 sites gatherng dust and not being used. So, I will implement this 'launching soon' page on them.

You are simply too awesome :)

Hasret said...

Thanks, good woork :)

WebDevVote.com said...

You are voted!
Track back from WebDevVote.com

bimmi said...

Myst I added the counter to http://blog.muna.is/ and put width on sec. Its much better

paul said...

very very nice! well laid out, in fact i think its an excellent job.. very well done!

much thanks!

Victoria said...

Thanks for this! Your blog is really worth coming back for

Achmadvm said...

Thanks Antonio,Just Say hello....

Kelli Piperata said...

thannks.

Kelli Piperata said...

nice thanks.

Web Design Mumbai said...

brilliant, as always :)

Anonymous said...

Nice tutorial Antonio, is it possible to update this tutorial with form validation for the email field?

watson said...

Thanks a lot for share useful tips.
I am a daily visitor.
keep it up

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News