Tutorial: Create A Countdown & Signup Coming Soon Page For Best Performance

Get our posts emailed to you with our monthly newsletter, subscribe here.

These days there is a certain importance and trend both on social media and other media channels to announce an upcoming event upfront, promote it very strongly, and even make it a premiere on Facebook. There are many tools you can choose to help you make a specific event or any type of important timing more interesting. One of the ways is to use a coming soon page with a countdown. Therefore, today I wanted to share with you a quick and easy way to building a countdown landing page with a simple email sign up form that will be super easy to make with this step-by-step tutorial.

To complete this demo I will be using a jQuery plugin called Flipclockjs.com to power the countdown clock and MailChimp to power the email sign up form. If you enjoy coding and would love to learn more, you can also check out our article about Incredibly Easy Way To Get Your Social Twitter Followers Count Using PHP on Design Woop.

View The Demo or Download Source Code.

End Result

Coming Soon Page

Why Use Flipclockjs.com

Flipclockjs.com provides you with a highly customisable foundation on which you can base your clock, eliminating the need for complex rewriting of code. You can use the plugin as a clock, timer or countdown like the demo and theme it with pure CSS.

Getting Started

First we want to create a simple HTML file, this will call in the required jQuery files and CSS file. Below you can see I pull in the jQuery library, the minified Flipclockjs.com file and a scripts.js file. The scripts.js file contains the options for the actual countdown clock, I also make use of the Google font library and pull in a couple of nice fonts for the demo.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Demo: Create A Countdown & Signup Coming Soon Page</title>
	<meta name="description" content="A demo page for the designwoop tutorial: Create A Countdown & Signup Coming Soon Page">
	<meta name="author" content="DesignWoop - David Martin">
	<!-- Load JS -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="js/FlipClock.min.js"></script>
	<script src="js/scripts.js"></script>
	<!-- Load CSS -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:Roboto:400,500|Montserrat" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/FlipClock.css">
	<!--[if lt IE 9]>
	<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
 </head>
<body>
</body>
</html>

 

Creating The Content

Once our above raw html template is setup, we can add the content.

Below, you will see I have added the basic text content and classes that are ready to be themed using CSS. The div with the class dw_clock is referenced in our scripts.js file and this is where the clock will be loaded. You will also see I have included a ‘naked’ version of the Mailchimp html form, this will also be themed in our CSS file.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Demo: Create A Countdown & Signup Coming Soon Page</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<!-- Load JS -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="js/FlipClock.min.js"></script>
	<script src="js/scripts.js"></script>
	<!-- Load CSS -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:Roboto:400,500|Montserrat" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/FlipClock.css">
	<!--[if lt IE 9]>
	<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
 </head>
<body>
<section id="dw_wrapper" class="clearfix">
	<section id="dw_countdown" class="clearfix">
		<h1 class="dw_launch_header">Launching Soon</h1>
		<p>Have no fear, we are launching soon.<br>We just have to dot the i's and cross the t's</p>
		<div class="dw_clock"></div>
		<hr>
		<h2 class="dw_launch_subheader">Get Notified</h2>
		<p class="dw_launch_subtext">We will let you know when we are launching.<br>Hell we may even send you a beta invite.</p>
		<section id="dw_mailchimp_form">
			<div id="mc_embed_signup" class="clearfix">
			<form action="https://designwoop.us4.list-manage.com/subscribe/post?u=b14cb5a32fad5c5fd5131db83&id=9cc9b4aa0d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
			<div class="mc-field-group">
				<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Enter your email">
				<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
				<div style="position: absolute; left: -5000px;"><input type="text" name="b_b14cb5a32fad5c5fd5131db83_9cc9b4aa0d" value=""></div>
				<div class=""><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
			</div>
			<div id="mce-responses" class="clear">
				<div class="response" id="mce-error-response" style="display:none"></div>
				<div class="response" id="mce-success-response" style="display:none"></div>
			</div>
			</form>
			</div>
		</section>
		<section id="dw_tut_credits">
			<hr>
			<p>This is a demo page for a DesignWoop tutorial. Read the full tutorial: <a href="#" title="">Tutorial: Create A Countdown & Signup Coming Soon Page.</a></p>
		</section>
	</section>
</section>
</body>
</html>

 

CSS Theming

At this point, our HTML is in dire need of some visual improvements. I have loaded in the separate CSS file into the header, in the style.CSS file I will add the below:

Note: Contained within the style.css file are basic HTML resets, these are now shown herein an attempt to keep the length to a minimum.

The below CSS creates the page design, typography style, and also themes the Mailchimp code.

At this point we have a page that is themed, but as of yet does not contain the working clock. For this we need to open our scripts.js file and initiate the clock an its options.

/*-- Theming --*/
#dw_wrapper {
	width: 100%;
	height: auto;
	max-width: 940px;
	margin: 0 auto 0 auto;
}
#dw_countdown {
	position: relative;
	max-width: 780px;
	margin: 25% auto;
	text-align: center;
}
h1, h2 {
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 8px;
	text-transform: uppercase;
	color: #fff;
}
.dw_launch_header {
	font-size: 36px;
	font-size: 3.6rem;
	line-height: 1;
	margin: 0 0 60px 0;
	margin: 0 0 6.0rem 0;
}
.dw_launch_subheader {
	font-size: 22px;
	font-size: 2.2rem;
	line-height: 2.2rem;
	margin: 0 0 60px 0;
	margin: 0 0 6.0rem 0;
}
.dw_launch_subtext {
	margin: 0 0 60px 0;
	margin: 0 0 6.0rem 0;
}
#dw_tut_credits {
	font-size: 14px;
	font-size: 1.4rem;
}
hr {
	width: 100%;
	margin: 60px auto;
	height: 1px;
	background: #333;
	border: none;
}
p > a {
	color: #38b789;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid #38b789;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
p > a:hover {
	color: #34a87d;
	border-bottom: 1px solid #34a87d;
}
/*-- MailChimp Style --*/
#mc_embed_signup {	
	max-width: 600px;
	margin: 0 auto;
}
input[type="email"] {
	display: block;
	width: 100%;
	height: 4.4rem;
	max-width: 440px;
	background: #333;
	float: left;
	border: none;
	outline: none;
	font-size: 1.6rem;
	font-family: inherit;
	font-weight: 400;
	color: inherit;
	line-height: 2.2rem;
	margin: 0 20px 0 0;
	padding: 0 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	-webkit-font-smoothing: antialiased;
	-webkit-appearance: none;
}
input[type="email"]:focus {
	opacity: 0.9;
}
input[type="submit"] {
	display: block;
	width: 100%;
	height: 4.4rem;
	max-width: 140px;
	background: #38b789;
	border: none;
	outline: none;
	font-size: 1.6rem;
	font-family: inherit;
	font-weight: 400;
	color: #fff;
	line-height: 2.2;
	padding: 0 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	-webkit-font-smoothing: antialiased;
	-webkit-appearance: none;  
}
input[type="submit"]:hover {
	cursor: pointer;
	background: #34a87d;
}

 

Flipclockjs.com Setup

The Flipclockjs.com functionality is really the heart of this coming soon landing page, we have already included jQuery and the minified Flipclockjs.com minified jQuery file. Next we need to initiate our clock and set any options we wish to use.

The purpose of this clock is to countdown to a set date in the future, aka our launch date. Below, as annotated in the comments we grab the current date, set our future date (for the demo purposes) then find the difference. There is a whole load of additional options and methods you can pass into the clock.

In the scripts.js file I use the below code:

var clock;
$(document).ready(function() {
	// Grab the current date
	var currentDate = new Date();
	// Set some date in the future. In this case, it's always Jan 1
	var futureDate  = new Date(currentDate.getFullYear() + 1, 0, 1);
	// Calculate the difference in seconds between the future and current date
	var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
	// Instantiate a coutdown FlipClock
	clock = $('.dw_clock').FlipClock(diff, {
		clockFace: 'DailyCounter',
		countdown: true,
		showSeconds: true
	});
});

 

Flipclockjs.com Themeing

Flipclockjs.com also comes with a deafult theme, I have included this as a separate stylesheet for the purposes of the tutorial. You can theme the entire clock with pure CSS should you wish.

Conclusion, Demo & Download

It is a very simple, effective html template – useful for future product launches. It really does not require an excessive break down and commentary as it fairly self explanatory basic HTML/CSS and jQuery. There are loads of other options and uses for the clock itself, for this tutorial we have only really scratched the surface of what is possible with the Flipclockjs.com plugin.

View The Demo or Download Source Code.

Posted by Jason Bayless

11 Comments

  1. how to do so as not to show up days?

  2. This is a very good example of a coming soon page. Thanks for sharing your code. If you need a coming soon page in WordPress, check out my free plugin in the repository, http://wordpress.org/plugins/ultimate-landing-page-and-coming-soon-page/

  3. Hi Guys, lovely but unfortunately for newbies like myself the tutorial is useless as we are unable to change the date. It would be lovely if you could provide us with an easier explanation in changing the date.
    Please
    :)

  4. Hey, I found it. Thought it might be useful to post here.

    var clock;

    $(document).ready(function() {

    var clock = $(‘.dw_clock’).FlipClock(new Date(2014,2,10).getTime()/1000 – new Date().getTime()/1000, {
    clockFace: ‘DailyCounter’,
    countdown: true
    });
    });

    *Remember that Jquery counts from 0, so March is 2 instead of 3.

  5. I’m very grateful for this tutorial, it helped me understand the plugin. I thought I had to write all the clock html too, which is a ton if you inspect the element ;)

    I just can’t figure out how I set it to a date which is less than a year. It ends up being a mess. Does anyone has suggestions on how to change it to, let’s say, 10th of march?

    Thanks a lot, and thanks again.

  6. Hi, must say a great tutorial. But i having a big trouble to figure out to set the date right? have try to understand the Date function by reading javascript library but cant figure it out.
    I only get like 3000 days when trying to set the date a month from now, how will I do that?

  7. It’s a great tutorial for under construction pages. Thank you! (:

  8. do i need to copy one of the things you mentioned or is it just an example?
    so no edit to style.css, scripts.js, flipclock.css, or flipclock.min.js?
    is there still something wrong?
    awaiting on your fast reply

    1. wow ok sorry, it’s the html code, but it doesn’t work xs.

  9. Hi,
    i am creating a website for a countdown to my wedding.
    Am kind of a noob in working with Jquery so far:/

    I would really like to use this kind of countdown, but it’s not working so far xs.

    could you help me?
    thanks

    1. Looks like you got it working fine, I can see it counting down: joshuaivawedding.site90.com

      All the best for the wedding :)

Comments are closed.