Skip to content

Instantly share code, notes, and snippets.

@raymond1988

raymond1988/multi-step-form.html

Created March 19, 2018 03:12
Show Gist options
  • Save raymond1988/8f61d2356b1463dc1f5ab5453a784e2f to your computer and use it in GitHub Desktop.
Save raymond1988/8f61d2356b1463dc1f5ab5453a784e2f to your computer and use it in GitHub Desktop.
Download ZIP
This html file is a demo of how to implement a multi-step registration form using html, bootstrap, css, jquery and parsley.js
Raw
multi-step-form.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Multi step/part form designed using bootstrap 4 for responsive and mobile first. This form also includes parseley validation."
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row" id="topSpace"></div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<form class="demo-form">
<div class="">
<ul class="signUpProgress">
<li class="active-font"><div class="circle"><div class="inner-circle active-circle" id="item1"><span class="oi-custom oi oi-person"></span></div></div></li>
<li class=""><div class="circle"><div class="inner-circle" id="item2"><span class="oi-custom oi oi-map-marker"></span></div></div></li>
<li class=""><div class="circle"><div class="inner-circle" id="item3"><span class="oi-custom oi oi-lock-locked"></span></div></div></li>
</ul>
</div></br>
<div class="progress">
<div class="progress-bar1 bg-primary" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</br></br>
<div class="form-section">
<div class="form-row">
<div class="form-group col-md-6">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
</div>
<div class="form-group col-md-6">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]" maxlength='50' required="">
</div>
</div>
<div class="form-section">
<div class="form-group">
<label for="address1">Address 1</label>
<input type="text" class="form-control" id="inputAddress1" name="inputAddress1" placeholder="1234 Main St" required="">
</div>
<div class="form-group">
<label for="address2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" name="inputAddress2" placeholder="Apartment, studio, or floor" required="">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="city">City</label>
<input type="text" class="form-control" id="city" name="city" required="">
</div>
<div class="form-group col-md-4">
<label for="state">State</label>
<select id="state" name="state" class="form-control" required="">
<option selected>Choose...</option>
<option>CO</option>
<option>IL</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="zip">Zip</label>
<input type="text" class="form-control" id="zip" name="zip">
</div>
</div>
</div>
<div class="form-section">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" required="" placeholder="Password">
</div>
<div class="form-group">
<label for="confirmPassword">Re-Confirm Password</label>
<input type="password" class="form-control" id="confirmPassword" name="confirmPassword" placeholder="Re-Confirm password" required="">
</div>
</div>
<div class="form-navigation">
<button type="button" class="previous btn btn btn-primary pull-left">&lt; Previous</button>
<button type="button" class="next btn btn btn-primary pull-right">Next &gt;</button>
<input type="submit" class="btn btn-success pull-right">
<span class="clearfix"></span>
</div>
</form>
<hr>
<div class="">
</br>
<button type="button" class="btn social-login facebook">Sign in with Facebook</button></br></br>
<button type="button" class="btn social-login google">Sign in with Google+</button>
</div>
</div>
<div class="col-sm-3"></div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$sections = $('.form-section');
$count = 1;
function navigateTo(index) {
// Mark the current section with the class 'current'
$sections
.removeClass('current')
.eq(index)
.addClass('current');
// Show only the navigation buttons that make sense for the current section:
$('.form-navigation .previous').toggle(index > 0);
var atTheEnd = index >= $sections.length - 1;
$('.form-navigation .next').toggle(!atTheEnd);
$('.form-navigation [type=submit]').toggle(atTheEnd);
}
function curIndex() {
// Return the current index by looking at which section has the class 'current'
return $sections.index($sections.filter('.current'));
}
// Previous button is easy, just go back
$('.form-navigation .previous').click(function () {
navigateTo(curIndex() - 1);
$(".progress-bar1").animate({
width: '-=33.3%'
});
if ($count > 2) {
$('#item' + $count).removeClass('active-circle');
$('#item' + ($count - 1)).addClass('active-circle');
$count -= 1;
} else if ($count === 2) {
$('#item' + $count).removeClass('active-circle');
$('#item' + ($count - 1)).addClass('active-circle');
$count -= 1;
}
});
// Next button goes forward iff current block validates
$('.form-navigation .next').click(function () {
$('.demo-form').parsley().whenValidate({
group: 'block-' + curIndex()
}).done(function () {
navigateTo(curIndex() + 1);
$(".progress-bar1").animate({
width: '+=33.3%'
});
$count += 1;
$('#item' + $count).addClass('active-circle');
});
});
// Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
$sections.each(function (index, section) {
$(section).find(':input').attr('data-parsley-group', 'block-' + index);
});
navigateTo(0); // Start at the beginning
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment