"Bootstrap Contact Form with Map"
Bootstrap 3.3.0 Snippet by bootstrapthemes

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 ---------->
<!-- Sections -->
<section id="contact">
<div id="map"></div>
<div class="container text-center">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-12 col-xs-12">
<div class="contact-form-area">
<form>
<h3>Contact</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name" required >
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Subject">
</div>
<div class="form-group">
<textarea class="form-control" rows="7" placeholder="Message" required></textarea>
</div>
<button type="submit" class="btn btn-primary contact-btn">SEND</button>
</form>
</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
/* For Contact Section*/
#map{
height:650px;
width:100%;
position:relative;
overflow:hidden;
}
.contact-form-area{
position:absolute;
bottom:40px;
background:rgba(0, 0, 0, 0.6);
padding:30px;
width:85%;
border:1px solid #cdcaca;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
margin-bottom:30px;
-ms-border-radius:5px;
box-shadow:1px 1px 1px 0 rgba(55,50,40, .10);
-webkit-box-shadow:1px 1px 1px 0 rgba(55,50,40, .10);
-moz-box-shadow:1px 1px 1px 0 rgba(55,50,40, .10);
-ms-box-shadow:1px 1px 1px 0 rgba(55,50,40, .10);
}
.contact-form-area form h3{
font-size:36px;
color:#fff;
font-family: 'latobold';
margin-bottom:20px;
}
.form-control {
height: 35px;
border: none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
var map = new GMaps({
el: '#map',
lat: 52.265413,
lng: -113.827363,
scrollwheel: false
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: