When starting work on a new website idea, the first thing you probably do is to acquire the domain name and set up some sort of a coming soon page (remember those construction site gif animations? Don’t use them!).

It is actually a good idea to invest some time in the development of this page. This is the first encounter visitors have with you and your product. You can even use it as a marketing channel and let people subscribe to your launch newsletter.

This is why, today we are creating a stylish coming soon page, using PHP, MySQL and jQuery. It will allow you to collect visitors’ emails and store them in a simple database table. On the presentation side, it features a slick slideshow with the help of the Nivo Slider plugin.

The HTML

First lets take a look at the HTML markup of the coming soon page. The page was designed to be lightweight and has only a minimal amount of code.

coming-soon.php

AJAX-ed Coming Soon Page with jQuery and PHP | Tutorialzine Demo <div id="page"> Coming Soon



Subscribe

query("INSERT INTO coming_soon_emails SET email='".$mysqli->real_escape_string($_POST['email'])."'"); if($mysqli->affected_rows != 1){ throw new Exception('This email already exists in the database.'); } if($ajax){ die('{"status":1}'); } $msg = "Thank you!"; } catch (Exception $e){ if($ajax){ die(json_encode(array('error'=>$e->getMessage()))); } $msg = $e->getMessage(); } } If the form was submitted via AJAX (we can tell if this is so by checking for the X_REQUESTED_WITH header) we output the responses as JSON, otherwise we assign them to the $msg variable that is later printed to the page.

As we are using the MySQLi extension, after we insert the email in the coming_soon_emails table (it contains only an email column and a timestamp) we need to check the affected rows property. The email column is defined as a primary key, and the insert will fail on a duplicate email address.

Installation Notes: if you want to set up the Coming Soon Page on your host, you will need to create the coming_soon_emails table by running table.sql (available in the zip download) in phpMyAdmin. After this, remember to add your MySQL connection details to includes/connect.php.
The jQuery

As we are using the Nivo Slider plugin, a lot of the work has been done for us, and we can move our attention to handling the form submission and AJAX responses.

js/script.js

$(window).load(function() { // Creating the Nivo Slider on window load $('#slideshow').nivoSlider({ pauseTime:5000, directionNav:false, controlNav:false }); }); $(document).ready(function(){ // Binding event listeners for the form on document ready $('#email').defaultText('Your Email'); // 'working' prevents multiple submissions var working = false; $('#page form').submit(function(){ if(working){ return false; } working = true; $.post("./coming-soon.php",{email:$('#email').val()},function(r){ if(r.error){ $('#email').val(r.error); } else $('#email').val('Thank you!'); working = false; },'json'); return false; }); }); // A custom jQuery method for placeholder text: $.fn.defaultText = function(value){ var element = this.eq(0); element.data('defaultText',value); element.focus(function(){ if(element.val() == value){ element.val('').removeClass('defaultText'); } }).blur(function(){ if(element.val() == '' || element.val() == value){ element.addClass('defaultText').val(value); } }); return element.blur(); } Notice that the Nivo Slider slideshow is created on the window.load event. This is done, so that we can be sure that all the images are loaded and can be displayed. Although this is the first code block on the page, it is actually executed last.

In the document. ready block, we bind an event listener for the form’s submit event. As the handler returns a boolean false value, the form will not get submitted, instead we are sending an AJAX post request back to the same page and get either a successful response, or an error, which gets outputted as the value of the email input box.

With this our Stylish AJAX-ed Coming Soon Page is complete!

Wrapping it up

You can use this page to introduce early visitor to the features of your upcoming website. You can extend it with an arbitrary amount of slides, and maybe improve its SEO by adding a paragraph or two about each slide.

The biggest benefit by far is giving an option for email subscriptions. You can later just pop into phpMyAdmin and export a friendly CSV file, ready for import in your favorite email marketing application.




Read more (locally) ...


Partner : Tutorialzine


--------------------------------------------------

LOGECT Publisher Network™ (beta) is a Service that allows others to publish their syndicated content by RSS Feeds.

موضوعات مشابه: