"Contact Us Body"
Bootstrap 3.0.0 Snippet by serhatkaraca

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">
<div class="col-md-7">
<h1 class="title">Get in touch with us.</h1>
<p class="subtitle">We appreciate all feedback we receive – positive and constructive - and love to hear what you think about our programmes and services. </p>
</div>
</div>
<div class="row map-form">
<div class="col-md-7">
<form class="form">
<div class="form__row">
<div class="ph1 ph-small ph-big" data-input="name">Full Name</div>
<input type="text" class="form__field" name="name" id="name" required>
</div>
<div class="form__row">
<div class="ph2 ph-small ph-big" data-input="email">Email Adress</div>
<input type="email" class="form__field" name="email" id="email" required>
</div>
<div class="form__row">
<div class="ph2 ph-small ph-big" data-input="phone">Phone Number with Country Code</div>
<input type="text" class="form__field" name="phone" id="phone" required>
</div>
<div class="form__row">
<label class="form__title" for="job-function">Subject</label>
<select class="form__field form__field--select" name="job-function" required>
<option value="" selected="selected">Select a Subject</option>
<option value="op1">Subject 1</option>
<option value="op2">Subject 2</option>
<option value="op3">Subject 3</option>
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
.title{
font-size:36px;
opacity:0.87;
font-weight:bold;
line-height:1.5;
letter-spacing:-0.4px;
color:#1e1e1e;
margin:0;
}
.subtitle{
font-size:20px;
line-height:1.6;
opacity:0.87;
color:#1e1e1e;
margin:20px 0px 0px 0px;
}
.map-form{
margin-top:40px;
}
.map-form h2{
margin:30px 0px 0px 0px;
font-size:24px;
line-height:1.5;
font-weight:bold;
opacity:0.5;
letter-spacing:-0.4px;
color:#1e1e1e;
}
.map-form h3{
margin:20px 0px 0px 0px;
font-size:16px;
font-weight:500;
line-height:1.5;
color:#1e1e1e;
opacity:0.5;
}
.map-form p{
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
//@TODO
// Can we make it work with 'label'
// how to init script when dom has changed with new fields?
// on blur if value in field and invalid - make invalid (border red).
// Grab all the inputs (not the submit button).
var inputs = document.querySelectorAll('input:not(.form__submit)');
// For each input.
inputs.forEach( function(input, index) {
// Grab the 'name' attribute value.
var inpAttr = input.getAttribute("name");
// Grab the correct element via the data attribute.
var ph = document.querySelector('[data-input="' + inpAttr + '"]');
// When in focus, remove the class.
input.onfocus = function() {
ph.classList.remove('ph-big');
}
// On blur, if input is empty add the class back on.
input.onblur = function() {
if (this.value === "") {
ph.classList.add('ph-big');
}
};
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Dashboard PRO
Contact Form
Bootstrap Contact Form
Bootstrap Contact Form

Questions / Comments: