"Multi-step Form"
Bootstrap 3.3.0 Snippet by maneeshsinghhs

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div style="height:40px;"></div>
<div class="assessment-container container">
<div class="row">
<div class="col-md-6 form-box">
<form role="form" class="registration-form" action="javascript:void(0);">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3><span><i class="fa fa-calendar-check-o" aria-hidden="true"></i></span>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit
</p>
</div>
</div>
<div class="form-bottom">
<div class="row">
<div class="form-group col-md-6 col-sm-6">
<input type="text" class="form-control" placeholder="Firstname" id="fname">
</div>
<div class="form-group col-md-6 col-sm-6">
<input type="text" class="form-control" placeholder="Lastname" id="lname">
</div>
</div>
<div class="form-group" style="margin-bottom:3px;">
<div class="row">
<div class="form-group col-md-3 col-sm-3">
<select class="form-control">
<option>00</option>
<option>00</option>
<option>00</option>
<option>00</option>
<option>00</option>
</select>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
input[type="text"],
input[type="email"],
input[type="date"],
select.form-control {
height: 50px;
margin: 0;
padding: 0 20px;
vertical-align: middle;
background: #f8f8f8;
border: 3px solid #ddd;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 50px;
color: #888;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-o-transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
input[type="file"] {
height: 35px;
margin: 0;
padding: 0 20px;
vertical-align: bottom;
background: #f8f8f8;
border: 3px solid #ddd;
font-family: 'Roboto', sans-serif;
font-size: 16px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function () {
$('.registration-form fieldset:first-child').fadeIn('slow');
$('.registration-form input[type="text"]').on('focus', function () {
$(this).removeClass('input-error');
});
// next step
$('.registration-form .btn-next').on('click', function () {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
parent_fieldset.find('input[type="text"],input[type="email"]').each(function () {
if ($(this).val() == "") {
$(this).addClass('input-error');
next_step = false;
} else {
$(this).removeClass('input-error');
}
});
if (next_step) {
parent_fieldset.fadeOut(400, function () {
$(this).next().fadeIn();
});
}
});
// previous step
$('.registration-form .btn-previous').on('click', function () {
$(this).parents('fieldset').fadeOut(400, function () {
$(this).prev().fadeIn();
});
});
// submit
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit Pro
login-form
Login Form
Contact Form

Questions / Comments: