Multi-Step SignUp Form Using jQuery, Ajax, PHP, HTML5 and CSS3
This type of form always improve user interaction on your site comparing very long form like this. Now we are going to see how to convert this very long form into multi-step signup using jQuery, Ajax,PHP, HTML5 and CSS3.
Making of this Multi-Step SignUp Form is very very easy.
Demo
Multi-Step Signup Form using jQuery Ajax PHP HTML5 and css3
Please refer my previous tutorial on multi-step SignUp
Multi Stage HTML5 Form Using jQuery, Ajax and CSS3 – Part2
Multi Stage HTML5 Form Using jQuery and CSS3
Step 1:
Create index.php file and adding numbers fieldset tags within form tag in the body section of html file. Where fieldsets indicates numbers signup form steps.
Download
<!DOCTYPE html>
<html>
<head>
<title>Multi-Step SignUp Form Using jQuery Ajax PHP HTML5 and CSS3</title
</head>
<body>
<form id='sample_form'>
<fieldset>
<label>Step 1</label>
</fieldset>
<fieldset>
<label>Step 2</label>
</fieldset>
<fieldset>
<label>Step 3</label>
</fieldset>
<fieldset>
<label>Step 4</label>
</fieldset>
</form>
</body>
</html>
Step 2:
Now add following input fields between each fieldsets.
<form action="index.php" id="myform" style="background-color:#FFFFFF;" title="Apply for a Short-Term Loan"> <fieldset> <div><h2 class="title">You are just minutes away from approval.</h2></div><div><label class="title">Amount</label> <select name="requested_amount" id='requested_amount' class='required border' min='100' max='1000' data-msg-min="Please select minimum $100" data-msg-max="Please select maximum of $1000"> <option value="select">Select</option> <option value="100">100$</option> <option value="200">200$</option> <option value="300">300$</option> <option value="400">400$</option> <option value="500">500$+</option> </select> </div> <p id="invalid-requested_amount" class="error_msg"></p> <div> <label class="title">First Name</label> <input type="text" name="first_name" id='first_name' class='required' minlength="2" data-msg-required="Please enter your first name" maxlength='128'> </div> <p id="invalid-first_name" class="error_msg"></p> <div> <label class="title">Last Name</label> <input type="text" name="last_name" id='last_name' class='required' minlength="2" data-msg-required="Please enter your last name" maxlength='128'> </div> <p id="invalid-last_name" class="error_msg"></p> <div> <label class="title">Email Address</label> <input type="text" name="email" id='email' class='required email' data-msg-required="Please enter your email"> </div> <p id="invalid-email" class="error_msg"></p> <div> <label class="title">Cell Phone</label> <input type="text" name="home_phone" id='home_phone' class='required' data-msg-required="Please enter your Cell Phone Number" phoneUS='true'> </div> <p id="invalid-home_phone" class="error_msg"></p> </fieldset> <fieldset> <div><h2 class="title">Required Secure Information</h2></div> <div> <label class="title">When were you born?</label> <input type="text" name="birth_date" id='birth_date'> </div> <p id="invalid-birth_date" class="error_msg"></p> <div> <label class="title">Please enter your Social Security Number</label> <input type="text" name="ssn" id='ssn'> </div> <p id="invalid-ssn" class="error_msg"></p> <div> <label class="title">What is your DL number?</label> <input type="text" name="drivers_license_number" id='drivers_license_number'> </div> <p id="invalid-drivers_license_number" class="error_msg"></p> <div> <label class="title">Which state issued your DL?</label> <select name="drivers_license_state" id='drivers_license_state' class='border'> <option value="">Select</option> <option value="AL">AL</option> <option value="AK">AK</option> <option value="AZ">AZ</option> <option value="AR">AR</option> <option value="CA">CA</option> <option value="CO">CO</option> <option value="CT">CT</option> </select> </div> <p id="invalid-drivers_license_state" class="error_msg"></p> </fieldset> <fieldset> <div><h2 class="title">Tell us about your job.</h2></div> <div> <label class="title">Your employer's company name.</label> <input type="text" name="employer" id='employer'> </div> <p id="invalid-employer" class="error_msg"></p> <div> <label class="title">Employer's Phone Number</label> <input type="text" name="employer_phone" id='employer_phone'> </div> <p id="invalid-employer_phone" class="error_msg"></p> <div> <label class="title">What's your title at work?</label> <input type="text" name="job_title" id='job_title'> </div> <p id="invalid-job_title" class="error_msg"></p> <div> <label class="title">How many months have you been employed?</label> <select name="employer_months" id='employer_months' class='border'> <option value="">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="6">6</option> </select> </div> <p id="invalid-employer_months" class="error_msg"></p> <div> <label class="title">Are you ACTIVE status in the military?</label> <div> <input type="checkbox" id='active_military' name="active_military" class='active_military' value="yes"><span>yes</span><br> <input type="checkbox" name="active_military" class='active_military' value="no"><span>no</span><br> </div> </div> <p id="invalid-active_military" class="error_msg"></p> </fieldset> <fieldset> <div><h2 class="title">Almost Done...</h2></div><div><label class="title">How much do you make a month?</label> <select name="monthly_income" id='monthly_income' class='border'> <option value="">Select</option> <option value="800">800</option> <option value="900">900</option> <option value="1000">1000</option> <option value="10000">10000</option> </select> </div> <p id="invalid-monthly_income" class="error_msg"></p> <div><label class="title">Where does you income come from?</label> <select name="income_source" id='income_source' class='border'> <option value="">Select</option> <option value="EMPLOYMENT">EMPLOYMENT</option> <option value="BENEFITS">BENEFITS</option> </select> </div> <p id="invalid-income_source" class="error_msg"></p> <div><label class="title">How often are you paid?</label> <select name="payment_frequency" id='payment_frequency' class='border'> <option value="">Select</option> <option value="WEEKLY">WEEKLY</option> <option value="BI-WEEKLY">BI-WEEKLY</option> <option value="MONTHLY">MONTHLY</option> <option value="BI-MONTHLY">BI-MONTHLY</option> </select> </div> <p id="invalid-payment_frequency" class="error_msg"></p> <div> <label class="title">When is your next pay date?</label> <input type="text" name="pay_date1" id='pay_date1'> </div> <p id="invalid-pay_date1" class="error_msg"></p> <div> <label class="title">When is your 2nd pay date from now?</label> <input type="text" name="pay_date2" id='pay_date2'> </div> <p id="invalid-pay_date2" class="error_msg"></p> </fieldset> <fieldset> <div><h2 class="title">Congrats, it's the last step!</h2></div> <div> <label class="title">Bank Name</label> <input type="text" name="bank_name" id='bank_name'> </div> <p id="invalid-bank_name" class="error_msg"></p> <div><label class="title">Routing Number</label> <input type="text" name="bank_aba" id='bank_aba'> </div> <p id="invalid-bank_aba" class="error_msg"></p> <div> <label class="title">Account Number</label> <input type="text" name="bank_account" id='bank_account'> </div> <p id="invalid-bank_account" class="error_msg"></p> <div> <label class="title">What type of account do you have?</label> <select name="bank_type" id='bank_type' class='border'> <option value="">Select</option> <option value="CHECKING">CHECKING</option> <option value="SAVING">SAVING</option> </select> </div> <p id="invalid-bank_type" class="error_msg"></p> <div><label class="title">Do you have direct deposit?</label> <div> <input type="checkbox" id='direct_deposit' name="direct_deposit" value="yes" class='direct_deposit'><span>yes</span><br> <input type="checkbox" name="direct_deposit" value="no" class='direct_deposit'><span>no</span><br> </div> </div> <p id="invalid-direct_deposit" class="error_msg"></p> </fieldset> <input id="submit_app" class="sub" type="button" value="Submit" /> </form>
Step 3:
Now add following css styles in the head section of index.php page.
* {background-color: #16a085;margin: 0;padding: 0;}
@font-face{font-family: Lobster;src: url('Lobster.otf');}
h2{font-family: Lobster;font-size: 30px;}
body { font-family:Lucida Sans, Arial, Helvetica, Sans-Serif; font-size:13px; margin:20px; width:100%;}
#main { width:960px; margin: 0px auto; border:solid 1px #b2b3b5; -moz-border-radius:10px; padding:20px; background-color:#f6f6f6;}
#header { text-align:center; border-bottom:solid 1px #b2b3b5; margin: 0 0 20px 0; }
fieldset { border:none; width:320px;}
legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold;}
label { display:block; margin:15px 0 5px;}
input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #fff;}
.prev, .next { background-color:#b0232a; margin:20px 0;padding:5px 10px; color:#fff; text-decoration:none;}
.prev:hover, .next:hover { background-color:#000; text-decoration:none;}
.prev { float:left;}
.next { float:right;}
#steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px;}
#steps li {font-size:24px; float:left; padding:10px; color:#b0b1b3;}
#steps li span {font-size:11px; display:block;}
#steps li.current { color:#000;}
#makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px;}
#makeWizard:hover { background-color:#000;}
.sub{float:right;background-color:#b0232a;color:#fff;border:solid 1px #b0232a;margin: -40px 0 0 -100px;height:25px;}
.error_msg{color:red;}
.wrapper{width:400px; margin: 0 auto;}
.border{border:1px solid white;width:310px;}
.title{color:white;}
#message{display:none; margin-top: 100px;color: #fff; width: 400px;height: 100px;border: 2px solid #fff;border-radius: 10px;position: relative;}
#message h2, #message p{text-align: center;}
#message #checkmark{margin-left: 170px;}
#close{position: absolute;right: -8px;top: -10px;}
.hide{display: none;}
Step 4:
Now include following jQuery library files .
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js'></script> <script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js'></script> <script type="text/javascript" src="formToWizard.js"></script>
Step 5:
Now add following two lines jQuery script that will convert very long form into multi-step signup form.
<script type="text/javascript">
$(document).ready(function(){
$("#myform").formToWizard({ submitButton: 'submit_app' });
});
</script>
Now you had accomplished the goal of converting very long HTML Form into multi-step signup form. Next we are going to add validation each input field in the Multi-Step Signup Form.
If want to customize this formtowizard plugin according to your need please go through following link Turn any webform into a powerful wizard with jQuery
Step 6:
Normally we will add jQuery validation to all the fields in the HTML Form. But in this tutorial we can’t do the validation like normally we do. We only add jQuery validation to input fields only in the first fieldset. Only successfull validation of all the fields in the step one then only we will add validation to step two. then three and four.
Here is the full jQuery validation script.
(function($) {
$.fn.formToWizard = function(options) {
options = $.extend({
submitButton: ""
}, options);
$('#submit_app').on('click',function(){
if($("#myform").valid()){
$.ajax({
type: "POST",
url: "show.php",
data: $('#myform').serialize(),
success: function(msg) {
alert(msg);
$("#myform").addClass("hide");
$("#message").show();
}
});
$('#close').click(function(){
$('#message').hide();
$("#myform").removeClass("hide");
$('input[type=text],input[type=email]').val('');
location.reload();
});
}
});
var element = this;
var steps = $(element).find("fieldset");
var count = steps.size();
var submmitButtonName = "#" + options.submitButton;
$(submmitButtonName).hide();
// 2
$(element).before("<ul id='steps'></ul>");
steps.each(function(i) {
$(this).wrap("<div id='step" + i + "'></div>");
$(this).append("<p id='step" + i + "commands'></p>");
// 2
var name = $(this).find("legend").html();
$("#steps").append("");
if (i == 0) {
createNextButton(i);
selectStep(i);
}
else if (i == count - 1) {
$("#step" + i).hide();
createPrevButton(i);
}
else {
$("#step" + i).hide();
createPrevButton(i);
createNextButton(i);
}
});
function createPrevButton(i) {
var stepName = "step" + i;
$("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>");
$("#" + stepName + "Prev").on("click", function(e) {
///if($('form').valid()){
$("#" + stepName).hide();
$("#step" + (i - 1)).show();
$(submmitButtonName).hide();
selectStep(i - 1);
//}
});
}
function createNextButton(i) {
var stepName = "step" + i;
$("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>");
$("#" + stepName + "Next").on("click", function(e) {
if($("#myform").valid()){
$("#" + stepName).hide();
$("#step" + (i + 1)).show();
if (i + 2 == count)
$(submmitButtonName).show();
selectStep(i + 1);
var q="step" + (i+1);
if(q=='step1'){
$("#birth_date").rules("add", {
required: true,
date: true,
messages: {
required: "Please enter your Birth Date",
date: "Please Enter Valid Date of Birth(dd/mm/yyyy)"
}
});
$("#drivers_license_number").rules("add", {
required: true,
license_us: true,
messages: {
required: "Please enter your License Number",
license_us: "Please Enter your Valid License Number"
}
});
$("#ssn").rules("add", {
required: true,
ssn_us: true,
messages: {
required: "Please enter your ssn Number",
ssn_us: "Please Enter your Valid ssn Number"
}
});
$("#drivers_license_state").rules("add", {
required: true,
messages: {
required: "Please enter your driving license state"
}
});
}
if(q=='step2'){
$("#employer").rules("add", {
required: true,
minlength: 10,
maxlength: 128,
messages: {
required: "Please enter Employer's Company Name",
minlength: "Please Enter minimum 10 characters"
}
});
$("#employer_phone").rules("add", {
required: true,
phoneUS: true,
messages: {
required: "Please enter Employer's Phone Number",
phoneUS: "Please Enter valid phone number"
}
});
$("#job_title").rules("add", {
required: true,
minlength: 2,
maxlength: 128,
messages: {
required: "Please enter your job title",
minlength: "Please Enter minimum 2 characters",
maxlength: "Please Enter only 128 characters only"
}
});
$("#employer_months").rules("add", {
required: true,
messages: {
required: "Please enter your experience"
}
});
$(".active_military").rules("add", {
required: true,
messages: {
required: "Please select your option"
}
});
/*var original=$('.active_military').attr('class')
$('.active_military').attr('class','required '+ original);*/
}
if(q=='step3'){
$("#monthly_income").rules("add", {
required: true,
messages: {
required: "Please select your monthly income"
}
});
$("#income_source").rules("add", {
required: true,
messages: {
required: "Please select your income source"
}
});
$("#payment_frequency").rules("add", {
required: true,
messages: {
required: "Please select your payment frequency"
}
});
$("#pay_date1").rules("add", {
required: true,
date: true,
messages: {
required: "Please enter your next pay date",
date: "Please Enter valid pay date (dd/mm/yyyy)"
}
});
$("#pay_date2").rules("add", {
required: true,
date: true,
messages: {
required: "Please enter your 2nd pay date",
date: "Please Enter valid pay date (dd/mm/yyyy)"
}
});
}
if(q=='step4'){
//alert("last step");
$("#bank_name").rules("add", {
required: true,
minlength: 2,
maxlength: 128,
messages: {
required: "Please enter your bank name",
minlength: "Please Enter minimum 2 characters",
maxlength: "Please Enter max 128 characters"
}
});
$("#bank_aba").rules("add", {
required: true,
number: true,
maxlength: 9,
messages: {
required: "Please enter your Routing Number",
number: "Please Enter valid Routing Number",
maxlength: "Please Enter max 9 Numbers"
}
});
$("#bank_account").rules("add", {
required: true,
number: true,
minlength: 4,
maxlength: 30,
messages: {
required: "Please enter your bank account Number",
number: "Please Enter valid bank account Number",
minlength: "Please Enter minimum 4 characters",
maxlength: "Please Enter max 30 characters"
}
});
$("#bank_type").rules("add", {
required: true,
messages: {
required: "Please select your account type"
}
});
$(".direct_deposit").rules("add", {
required: true,
messages: {
required: "Please select your option"
}
});
}
}
});
}
function selectStep(i) {
$("#steps li").removeClass("current");
$("#stepDesc" + i).addClass("current");
}
}
})(jQuery);
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
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
