Sometimes we required to capture lots of user details during registration. Due to this we got long forms on our website. So the best solution is to break into smaller logical section and convert it into a multi step form. This type of mult step form always improves usability on our site comparing very long form. Now we are going to explain how to convert very long form into multi-step signup form using PHP, MySQLi / PDO and jQuery.
You can use another password encryption and decryption method if you have PHP version < 5.5.
Database SQL Script:
CREATE TABLE `users` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`name` VARCHAR(100) NULL DEFAULT NULL,
`password` VARCHAR(72) NULL DEFAULT NULL,
`email` VARCHAR(100) NULL DEFAULT NULL,
`gender` VARCHAR(6) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB;
Database Connection: (db_connection.php)
<?php
define('_HOST_NAME', 'localhost');
define('_DATABASE_USER_NAME', 'root');
define('_DATABASE_PASSWORD', '');
define('_DATABASE_NAME', 'demo');
$dbConnection = new mysqli(_HOST_NAME, _DATABASE_USER_NAME, _DATABASE_PASSWORD,
_DATABASE_NAME);
if ($dbConnection->connect_error) {
trigger_error('Connection Failed: ' .
$dbConnection->connect_error, E_USER_ERROR);
}
index.php
<?php
include 'db_connection.php';
if(isset($_POST['finish'])){
$name = '"'.$dbConnection->real_escape_string($_POST['name']).'"';
$email = '"'.$dbConnection->real_escape_string($_POST['email']).'"';
$password = '"'.password_hash($dbConnection->real_escape_string($_POST['password'])
, PASSWORD_DEFAULT).'"';
$gender = '"'.$dbConnection->real_escape_string($_POST['gender']).'"';
$sqlInsertUser = $dbConnection->query("INSERT INTO users (name, password, email,
gender) VALUES($name, $password, $email, $gender)");
if($sqlInsertUser === false){
trigger_error('Error: ' . $dbConnection->error, E_USER_ERROR);
}else{
echo 'Last inserted record is : ' .$dbConnection->insert_id ;
}
}
?>
<html>
<head>
<title>Multi step registration form PHP, JQuery, MySQLi</title>
<style>
body{font-family:tahoma;font-size:12px;}
#signup-step{margin:auto;padding:0;width:53%}
#signup-step li{list-style:none; float:left;padding:5px 10px;
border-top:#004C9C 1px solid;border-left:#004C9C 1px solid;
border-right:#004C9C 1px solid;border-radius:5px 5px 0 0;}
.active{color:#FFF;}
#signup-step li.active{background-color:#004C9C;}
#signup-form{clear:both;border:1px #004C9C solid;padding:20px;width:50%;margin:auto;}
.demoInputBox{padding: 10px;border: #CDCDCD 1px solid;border-radius: 4px;
background-color: #FFF;width: 50%;}
.signup-error{color:#FF0000; padding-left:15px;}
.message {color: #00FF00;font-weight: bold;width: 100%;padding: 10;}
.btnAction{padding: 5px 10px;background-color: #F00;border: 0;color: #FFF;cursor:
pointer; margin-top:15px;}
label{line-height:35px;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function validate() {
var output = true;
$(".signup-error").html('');
if($("#personal-field").css('display') != 'none') {
if(!($("#name").val())) {
output = false;
$("#name-error").html("Name required!");
}
if(!($("#email").val())) {
output = false;
$("#email-error").html("Email required!");
}
/** Remove below Comment for email validation **/
/*if(!$("#email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
$("#email-error").html("Invalid Email!");
output = false;
}*/
}
if($("#password-field").css('display') != 'none') {
if(!($("#user-password").val())) {
output = false;
$("#password-error").html("Password required!");
}
if(!($("#confirm-password").val())) {
output = false;
$("#confirm-password-error").html("Confirm password required!");
}
if($("#user-password").val() != $("#confirm-password").val()) {
output = false;
$("#confirm-password-error").html("Password not matched!");
}
}
return output;
}
$(document).ready(function() {
$("#next").click(function(){
var output = validate();
if(output) {
var current = $(".active");
var next = $(".active").next("li");
if(next.length>0) {
$("#"+current.attr("id")+"-field").hide();
$("#"+next.attr("id")+"-field").show();
$("#back").show();
$("#finish").hide();
$(".active").removeClass("active");
next.addClass("active");
if($(".active").attr("id") == $("li").last().attr("id")) {
$("#next").hide();
$("#finish").show();
}
}
}
});
$("#back").click(function(){
var current = $(".active");
var prev = $(".active").prev("li");
if(prev.length>0) {
$("#"+current.attr("id")+"-field").hide();
$("#"+prev.attr("id")+"-field").show();
$("#next").show();
$("#finish").hide();
$(".active").removeClass("active");
prev.addClass("active");
if($(".active").attr("id") == $("li").first().attr("id")) {
$("#back").hide();
}
}
});
});
</script>
</head>
<body>
<ul id="signup-step">
<li id="personal" class="active">Personal Detail</li>
<li id="password">Password</li>
<li id="general">General</li>
</ul>
<form name="frmRegistration" id="signup-form" method="post">
<div id="personal-field">
<label>Name</label><span id="name-error" class="signup-error"></span>
<div><input type="text" name="name" id="name" class="demoInputBox"/></div>
<label>Email</label><span id="email-error" class="signup-error"></span>
<div><input type="text" name="email" id="email" class="demoInputBox" /></div>
</div>
<div id="password-field" style="display:none;">
<label>Enter Password</label><span id="password-error" class="signup-error">
</span>
<div><input type="password" name="password" id="user-password"
class="demoInputBox" /></div>
<label>Re-enter Password</label><span id="confirm-password-error"
class="signup-error"></span>
<div><input type="password" name="confirm-password" id="confirm-password"
class="demoInputBox" /></div>
</div>
<div id="general-field" style="display:none;">
<label>Gender</label>
<div>
<select name="gender" id="gender" class="demoInputBox">
<option value="female">Female</option>
<option value="male">Male</option>
</select>
</div>
</div>
<div>
<input class="btnAction" type="button" name="back" id="back" value="Back"
style="display:none;">
<input class="btnAction" type="button" name="next" id="next" value="Next" >
<input class="btnAction" type="submit" name="finish" id="finish" value="Finish"
style="display:none;">
</div>
</form>
</body>
</html>
