Invoice Script PHP jQuery

Multi Stage HTML5 Form Using jQuery and CSS3

Posted by & filed under CSS, HTML5, JQUERY, PHP.

When user comes to your site and filling form, they need scroll down the site for each every information they are going to fill. This seems to be unfriendly user interaction and greatly reduces the user interest.

This Multi-Stage HTML 5 form avoids unnecessary scroll down when user enters their information. This Form greatly improves user interaction, as well improves user interest on your site.

Multi stage HTML5 form using jquery and css3

Demo

multi stage html5 form using jquery and css3

Multi Stage HTML5 Form using jQuery and css3

Step 1:

Create index.html page, and add the following html code in the index.html file to create outer container of form.

<!DOCTYPE html>
<html>
<head>
<title>Test Site</title>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div id="border">
</div>
</body>
</html>
JavaScript
Copy

Now create style.css file to add styling to the outer container, we just created now. Add the following css to the style.css file.

#border{
	height : 450px;
	width : 800px;
	border: 30px solid #13202c;
	border-radius: 25px;
	background-color: #1abc9c;
	margin: auto;
	margin-bottom: 50px;
}
JavaScript
Copy

Step 2:

Now create form using form tag inside  the outer container (<div id=’border’>).

<form id="loginForm">
</form>
JavaScript
Copy

Step 3:

Now add following four <div> tag inside the form tag to create multi stage form.

<div id="firstStep">
</div>
<div id="secondStep">
</div>
<div id="thirdStep">
</div>
<div id="fourthStep">
</div>
JavaScript
Copy
multi stage html5 form using jquery and css3

Download

Step 4:

Now add some input text elements inside each div tag.

<!DOCTYPE html>
<html>
<head>
<title>Demo HTML5 Border</title>
<meta charset='utf-8'>
<link rel='stylesheet' href='css/style.css'/>
</head>
<h1>Multi Stage HTML5 Form - Demo</h1>
<body>
<div id="border">

<form id="loginForm">
    <div class="align">
    <div id="firstStep">
	<p>First Step</p>
	   <input id="first_name" name="first_name" class="login-field" type="text" placeholder="Enter your first name" value="">
	   <br/>
	   <input id="last_name" name="last_name" class="login-field" type="text" placeholder="Enter your last name" value="">
	    <br/>
	   <input id="email" name="email" class="login-field" type="email" placeholder="Enter your Email" value="">
	    <br/>
	   <button type="button"  id="firstBtn" class="next1">Next</button>
	</div>
	<div id="secondStep">
	  <p>Second Step</p>
	   <input id="phone" name="phone" class="login-field" type="text" placeholder="Enter your phone number" value="">
	    <br/>
	   <input id="street_name" name="street_name" class="login-field" type="text" placeholder="Enter your street name" value="">
	    <br/>
	   <input id="city_name" name="city_name" class="login-field" type="text" placeholder="Enter your city name" value="">
	    <br/>
	   <button type="button" id="secondBtnBack">Previous</button>
	   <button type="button" id="secondBtn" class="next">Next</button>

	 </div>
	<div id="thirdStep">
	  <p>Third Step</p>
	   <input id="state_name" name="state_name" class="login-field" type="text" placeholder="Enter your state name" value="">
	    <br/>
	   <input id="country_name" name="country_name" class="login-field" type="text" placeholder="Enter your country name" value="">
	    <br/>
	   <input id="zip_code" name="zip_code" class="login-field" type="text" placeholder="Enter your zip code" value="">
	    <br/>
	   <button type="button" id="thirdBtnBack">Previous</button> 
	   <button type="button" id="thirdBtn" class="next">Next</button>
	</div>

	<div id="fourthStep">
	  <p>Fourth Step</p>
	    <input id="hobbies" name="hobbies" class="login-field" type="text" placeholder="Enter your hobbies" value="">
	    <br/>
	   <input id="book" name="book" class="login-field" type="text" placeholder="Enter your fav book" value="">
	    <br/>
	   <input id="place" name="place" class="login-field" type="text" placeholder="Enter your fav place" value="">
	    <br/>
	   <button type="button" id="fourthBtnBack">Previous</button> 
	   <input type="submit" id='sub_btn' value='Send Mail!' class="next"/>
	</div>
  </div>
</form>
</div>

</body>
</html>
JavaScript
Copy

Now the form shows all the four steps input elements.

Step 5:

Now add the following css to style.css file to temporarily disable last three steps(two, three and four steps).

#secondStep, #thirdStep, #fourthStep{
	   display:none;
}
JavaScript
Copy

Step 6:

Now add the following four paragraph tag for each step.

<div class="linker">
     <p id="first">First Step</p>
	 <p id="second">Second Step</p>
	 <p id="third">Third Step</p>
	 <p id="fourth">Fourth Step</p>
  </div>
JavaScript
Copy

Add the following css to style.css to align correctly.

.linker{
		 padding-top:130px;
		 margin-left:50px;
}
.align{
		  margin-top: -190px;
		  padding-left: 300px;
}
.next1{
	         margin-left:175px; width: 80px
}
.next{
		  margin-left:95px; width: 80px
}
JavaScript
Copy

You had finished designing part, next we move for jQuery to add Some interaction.

Step 7:

First add jQuery library just before </body> tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
JavaScript
Copy

Step 8:

Finally add the following jQuery script below the jQuery library we just added.

<script>
   $(document).ready(function(){
     $("#firstBtn").click(function(){
	     $("#firstStep").hide();
		 $("#secondStep").show();
	 });
	 $("#secondBtn").click(function(){
	     $("#thirdStep").show();
		 $("#secondStep").hide();
	 });

	 $("#thirdBtn").click(function(){
	     $("#fourthStep").show();
		 $("#thirdStep").hide();
	 });

	 $("#fourthBtnBack").click(function(){
	     $("#fourthStep").hide();
		 $("#thirdStep").show();
	 });
	 $("#thirdBtnBack").click(function(){
	     $("#thirdStep").hide();
		 $("#secondStep").show();
	 });
	 $("#secondBtnBack").click(function(){
	     $("#secondStep").hide();
		 $("#firstStep").show();
	 });

	 $("#first").click(function(){
	     $("#firstStep").show();
		 $("#secondStep,#thirdStep,#fourthStep").hide();

	 });
	 $("#second").click(function(){
	     $("#thirdStep,#firstStep,#fourthStep").hide();
		 $("#secondStep").show();
	 });

	 $("#third").click(function(){
	     $("#fourthStep,#firstStep,#secondStep").hide();
		 $("#thirdStep").show();
	 });
	 $("#fourth").click(function(){
	     $("#fourthStep").show();
		 $("#thirdStep,#firstStep,#secondStep").hide();
	 });

}); 
</script>
JavaScript
Copy

 

Finally I added some jQuery ajax functions to send mail without refreshing the page.

$("#sub_btn").click(function(e){
		$.ajax({  
	    	  type: "POST", 
	    	  url: "show.php",  
	    	  data: $('#loginForm').serialize(),  
	    	  success: function(msg) {  
	    		  alert(msg);
	    		  $("#loginForm").addClass("hide");
	    		  $("#message").show();
	    	  } 

	    	}); 
		   $('#close').click(function(){ 
		      $('#message').hide();
	    	  $("#loginForm").removeClass("hide");
	    	  $('input[type=text],input[type=email]').val('');
	    	  location.reload();
	       });
		return false;
	 });
JavaScript
Copy

 .

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

Get Access Now Instantly

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!

no thanks