Coming soon page with style – How to create and some great examples

We start with a tutorial for making “coming soon” page, or also known as the “splash page”. making “coming soon” page is a good way to mark your presence early in the web. We have two types of “coming soon” page:

First, the informational page, which tells us what we can expect here in the near future, and second, that in addition to the information we offer the option to call the first visitors to sign up for updates and will also know when the real page appears.

Here are some things you might want to consider putting on your coming soon page:

1. Tell Visitors What to Expect



2. Put Newsletter/Mailing List Sign-Up Form



3. Of course, put Your Brand Name



4. Offer links to social networks



5. Create something Sweet and with style



…And we have our design, now let’s create our coming soon page with CSS, HTML and a PHP signup form!



See the live demo here.

HTML

Create new .html file with index.html name, copy and paste code bellow:

<!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>Coming Soon Page – The Design Buzz demo</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />

</head>
<body>

<form name=”subscribeform” method=”post” action=”subscribe.php”>

<div id=”image”></div>

<div id=”content”>

<p>Going to pick some amazing design news for you! Be ready…</p>

E-mail: <input type=”text” class=”emailform” name=”email” maxlength=”80″ size=”30″>
<input type=”submit” class=”sendform” value=”Subscribe”>

</form>

<p>Copyright The Design Buzz 2010 – <a href=”http://twitter.com/thedesignbuzz” title=”You shoud really follow us on Twitter…”>Follow us on Twitter</a><br/>
<a href=”http://www.thedesignbuzz.net” title=”The Design Buzz”><img src=”images/logo.jpg” alt=”The Design Buzz” /></a></p>

</div>

<div style=”clear:both;”></div>

</body>
</html>



CSS

Create new .css file with style.css name, copy and paste code bellow:

body {
background: #A50D00;
width: 900px;
font-family: helvetica, arial, sans-serif;
margin: 0 auto;
padding: 40px 0 0 0;
}

#image{
width: 405px;
height:586px;
background: #fff url(images/image.jpg) no-repeat;
line-height: 22px;
font-size: 18px;
font-family: Georgia, times, serif;
margin: 100px 0 10px 0;
float: left;
clear: both;
color: #ffffff;

}

#content{
width: 400px;
line-height: 50px;
font-size: 18px;
font-family: Georgia, times, serif;
margin: 100px 0 10px 40px;
float: left;
color: #ffffff;

}

a, a:visited{
text-decoration: none;
color: #6f0101;
}

a:hover, a:hover:visited{
text-decoration: none;
color: #FFFFFF;
}

img {
border: none;
}

p.copy {
margin-top:60px;
text-align:left;
line-height:20px;
font-size: 12px;
color: #6f0101;
padding: 5px 0 5px 0;
}

p.tagline {
width:350px;
font-family: georgia, times, serif;
font-style: italic;
float: left;
font-size: 40px;
color: #fff;

}

.emailform{
background: #FFFFFF;
font-family: Georgia, times, serif;
color: #000000;
padding: 5px;
border: 1px solid #AE0F00;
font-size: 18px;
margin: 0 15px 0px 0;
width: 260px;
font-weight: bold;
}

.sendform{
background: #99100A;
font-family: Georgia, times, serif;
font-style: italic;
color: #ffffff;
cursor: pointer;
font-size: 18px;
padding: 5px;
border: 1px solid #99100A;
margin: 20px 0 0 0;
font-weight: bold;
}



PHP

Create new .php file with subscribe.php name, copy and paste code bellow:

<?php
if(isset($_POST['email'])) {

// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = “info@thedesignbuzz.net”;
$email_subject = “Site subscription”;

function died($error) {
// your error code can go here
echo “We are very sorry, but there were error(s) found with the form your submitted. “;
echo “These errors appear below.<br /><br />”;
echo $error.”<br /><br />”;
echo “Please go back and fix these errors.<br /><br />”;
die();
}

// validation expected data exists
if(
!isset($_POST['email'])
) {
died(‘We are sorry, but there appears to be a problem with the form your submitted.’);
}

$email_from = $_POST['email']; // required

$error_message = “”;
$email_exp = “^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$”;
if(!eregi($email_exp,$email_from)) {
$error_message .= ‘The Email Address you entered does not appear to be valid.<br />’;
}

if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = “Form details below.\n\n”;

function clean_string($string) {
$bad = array(“content-type”,”bcc:”,”to:”,”cc:”,”href”);
return str_replace($bad,”",$string);
}

$email_message .= “Email: “.clean_string($email_from).”\n”;

// create email headers
$headers = ‘From: ‘.$email_from.”\r\n”.
‘Reply-To: ‘.$email_from.”\r\n” .
‘X-Mailer: PHP/’ . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>

<!– include your own success html here –>

Thank you for contacting us. We will be in touch with you very soon.

<?
}
?>



Download Files here

Please remember that this is just one example of how we might create a “coming soon” page for us, use this as a starting point…we didn’t check to make sure everything displays fine in all browsers. It all works fine in Safari and Firefox…

Some great examples


i heart spaceships




jw plumbing




Fav Movie




Zombie Corp




Lukes Beard




Up State Design




Up State Design




Fcuk Star




Human Binary




Afetr Some Words



After all this good examples, what do you like about the coming soon pages? Is there any coming soon page that you’d like to share with us? Please drop a comment. Be here and next week, we will do same thing but with “404 page”, we have not yet made for us so that we do together with you. Follow us on Twitter @thedesignbuzz

The Design Buzz

The Design Buzz

The Design Buzz is a place for creative people to discover and share creative news and articles written by designers and developers. The Design Buzz feature the best hand-picked articles from design magazines and blogs from The Design Buzz Network.

Related Posts





Comments are closed.