"Consultation Form Template"
Bootstrap 3.0.0 Snippet by Anita26

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="//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">
<!-- consultation form -->
<div class="col-lg-offset-3 col-lg-6 col-md-offset-3 col-md-6 col-sm-12 col-xs-12">
<div class="consultantion-form">
<h3 class="mb30 text-center">Request A Consultation </h3>
<form>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label class="control-label sr-only" for="name"> First Name</label>
<input type="text" placeholder="First Name" class="form-control" required>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label class="control-label sr-only" for="name"> Last Name</label>
<input type="text" placeholder="Last Name" class="form-control" required>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label class="control-label sr-only" for="name">Phone</label>
<input type="text" placeholder="Phone" class="form-control" required>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label class="control-label sr-only" for="company">Company</label>
<input type="text" placeholder="company" class="form-control" required>
</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
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Lato', sans-serif; letter-spacing: 0px; font-size: 15px; color: #6b6c6d; font-weight: 400; line-height: 28px; }
h1, h2, h3, h4, h5, h6 { color: #161718; margin: 0px 0px 15px 0px; font-weight: 400; font-family: 'Lato', sans-serif; }
h1 { font-size: 30px; line-height: 42px; }
h2 { font-size: 24px; line-height: 32px; font-weight: 400; }
h3 { font-size: 21px; line-height: 30px; font-weight: 400; }
h4 { font-size: 18px; line-height: 26px; font-weight: 400; }
h5 { font-size: 13px; font-weight: 400; }
h6 { font-size: 12px; font-weight: 400; }
p { margin: 0 0 20px; line-height: 1.8; }
p:last-child { margin: 0px; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color: #161718; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
a:focus, a:hover { text-decoration: none; color: #0170a2; }
label { }
.control-label { font-size: 13px; text-transform: capitalize; color: #3c424b; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.form-control:focus { }
.textarea.form-control { }
.required { }
.form-group { margin-bottom: 5px; }
.form-control { border-radius: 0px; color: #656869; font-size: 16px; font-weight: 400; width: 100%; height: 52px; padding: 0px; line-height: 1.42857143; border-top: transparent; border-left: transparent; border-right: transparent; border-bottom: 1px solid #a6a9ad; background-color: transparent; text-transform: capitalize; letter-spacing: 0px; margin-bottom: 10px; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); }
.form-control:focus { color: #0084bf !important; outline: 0; -webkit-box-shadow: none; box-shadow: none; }
.input-group { position: relative; display: table; border-collapse: separate; }
input[type=checkbox], input[type=radio] { margin: 8px 0 0; margin-top: 9px; line-height: normal; }
input::-webkit-input-placeholder { color: #6b6c6d !important; }
input:focus::-webkit-input-placeholder { color: #0084bf !important; bottom: 20px; position: relative; }
textarea::-webkit-input-placeholder { color: #6b6c6d !important; }
textarea:focus::-webkit-input-placeholder { color: #0084bf !important; bottom: 20px; position: relative; }
.input-group-addon { background-color: transparent; border: 1px solid #e8ecf0; border-radius: 0px; }
.focus { border-top: transparent; border-left: transparent; border-right: transparent; border-bottom: 1px solid #a6a9ad; background-color: #fff; }
.focus:focus { border-top: transparent; border-left: transparent; border-right: transparent; border-bottom: 1px solid #0084bf; outline: 0; -webkit-box-shadow: none; box-shadow: none; }
.has-success .form-control { border-color: #3c763d; background-color: #fff; box-shadow: none; }
.has-success .form-control:focus { border-color: #3c763d; outline: 0; -webkit-box-shadow: none; box-shadow: none; }
.has-error .form-control { border-color: #a94442; background-color: #fff; box-shadow: none; }
.has-error .form-control:focus { border-color: #a94442; outline: 0; -webkit-box-shadow: none; box-shadow: none; }
.consultantion-form { background-color: #f5f5f5; padding: 60px 50px; margin-top:50px }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Kit PRO
Responsive Invoice template
BS4 clean & simple invoice template
Elegant Bootstrap 4 message chat box template

Questions / Comments: