"latest contact form design"
Bootstrap 3.0.0 Snippet by ravinder350

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 ---------->
<section id="contact" class="home-section text-center">
<div class="container">
<div class="sec-title text-center">
<h3>Lets Talk</h3>
<h1>Contact Form</h1>
</div>
<div class="row">
<div class="col-lg-12">
<div class="boxed-grey">
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<form id="contact-form" action="" method="post" role="form" class="contactForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
<div class="validation"></div>
</div>
<div class="form-group">
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email">
<div class="validation"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject">
<div class="validation"></div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
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
form.contact-form.row {
padding: 15px 70px;
}
.row .contact-main {
padding: 0 20px;
float: left;
text-align: center;
box-sizing: border-box;
}
.content-wrapper {
min-height: 100%;
position: relative;
}
.get-in-touch {
float: left;
width: 100%;
padding: 40px 0px;
}
.get-in-touch .head span {
padding-bottom: 10px;
margin-bottom: 20px
}
.get-in-touch .title {
text-align: center;
font-family: Raleway, sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 36px;
line-height: 48px;
padding-bottom: 48px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: