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.
Demo
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>
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;
}
Step 2:
Now create form using form tag inside the outer container (<div id=’border’>).
<form id="loginForm"> </form>
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>
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>
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;
}
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>
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
}
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>
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>
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;
});