"application form"
Bootstrap 3.0.0 Snippet by capc77

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 class="container">
<div class="row">
<h1>Application Form</h1>
</div>
</div>
<form role="form" class="application-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>Contact Details</h3>
<p>Enter Your Contact Information
</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="Full Name" id="fname" required>
</div>
<div class="form-group col-md-6 col-sm-6">
<input type="text" name="email" placeholder="Email" class="form-email form-control" id="email" required>
</div>
</div>
<div class="form-group" style="margin-bottom:3px;">
<div class="row">
<div class="form-group col-md-9 col-sm-9">
<input type="date" class="form-control" placeholder="Date of Birth" id="pref_date" required>
</div>
<div class="form-group col-md-9 col-sm-9">
<input type="text" class="form-control" placeholder="Phone Number" id="contact_number" required>
</div>
</div>
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 () {
$('.application-form fieldset:first-child').fadeIn('slow');
$('.application-form input[type="text"]').on('focus', function () {
$(this).removeClass('input-error');
});
// next step
$('.application-form .btn-next').on('click', function () {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
parent_fieldset.find('input[type="text"],input[type="date"],select,input[type="checkbox"],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
$('.application-form .btn-previous').on('click', function () {
$(this).parents('fieldset').fadeOut(400, function () {
$(this).prev().fadeIn();
});
});
// submit
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: