"ULSSI Form"
Bootstrap 3.3.0 Snippet by kvnsmng

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<form class="form-horizontal cform" role="form">
<h2>Contact Information</h2>
<div class="form-group">
<label for="" class="col-sm-3 control-label">Full Name</label>
<div class="col-sm-4">
<input type="text" id="" placeholder="First Name" class="form-control" autofocus>
</div>
<div class="col-sm-4">
<input type="text" id="" placeholder="Last Name" class="form-control" autofocus>
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label for="" class="col-sm-3 control-label">Age</label>
<div class="col-sm-9">
<input type="number" id="" placeholder="ex: 23" class="form-control" min="1">
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label for="" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" id="" placeholder="ex: myname@example.com" class="form-control">
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label for="" class="col-sm-3 control-label">Subject</label>
<div class="col-sm-9">
<select id="dd-subject" class="form-control">
<option>Please choose your enquiry</option>
<option value="adverse-events">Adverse Events</option>
<option value="product-packaging">Product of Packaging Complaint</option>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
.cform {
max-width: 800px;
}
.cform__adverse,
.cform__productpackaging,
.cform__submit {
display: none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function () {
$("#dd-subject").change(function() {
var subjValues = ["adverse-events", "product-packaging"];
var val = $(this).val();
if(val === "adverse-events") {
$(".cform__adverse").fadeIn(500);
$(".cform__submit").fadeIn(500);
$(".cform__productpackaging").fadeOut(500);
}
else if(val === "product-packaging") {
$(".cform__productpackaging").fadeIn(500);
$(".cform__submit").fadeIn(500);
$(".cform__adverse").fadeOut(500);
}
else {
$(".cform__adverse").fadeOut(500);
$(".cform__productpackaging").fadeOut(500);
$(".cform__submit").fadeOut(500);
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Datepicker
login-form
Login Form
Contact Form

Questions / Comments: