"contact form"
Bootstrap 3.3.0 Snippet by durgesh361

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="form_box hidden-sm hidden-xs" >
<form onclick="return validate()">
<div class="form_head text-center">
<h4>Get In Touch</h4>
</div>
<div class="form_content">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control form_in" id="name" autocomplete="off">
<span id="errname"></span>
</div>
<div class="form-group">
<label>Email-id</label>
<input type="text" class="form-control form_in" id="email" autocomplete="off">
<span id="erremail"></span>
</div>
<div class="form-group">
<label for="sel1">Location</label>
<select class="form-control form_in" id="city">
<option class="ch" value="mu">Select Your Location</option>
<option class="ch" value="mu">Mumbai</option>
<option class="ch" value="mu">3</option>
<option class="ch" value="mu">4</option>
</select>
<span id="errcity"></span>
</div>
<div class="input-group">
<input type="text" class="form-control form_in" maxlength="10" placeholder="Mobile" id="mobile" name="search">
<div class="input-group-btn" data-toggle="modal" data-target="#verify">
<input type="button" class="btn btn-default btn-verify" id="digits" onclick="generateOTP()" value="Verify">
</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
.form_box {
position: absolute;
top: 100px;
color: #000;
padding: 20px;
right:500px;
width: 320px;
height: 400px;
background: rgb(255, 255, 255);
z-index: 999;
border:1px solid gray;
margin-bottom:50px;
}
.form_head h4 {
font-size: 21px;
color: #189ad7;
font-weight: bold;
}
.form_in {
border-radius: 0;
border-top: 0;
border-left: 0;
border-right: 0;
color: #000;
border-bottom: 1px solid deeppink;
background: transparent;
font-weight: bold;
box-shadow: none;
}
.form_btn {
height: 35px;
width: 150px;
border: 1px solid #fff;
background: deeppink;
color: #fff;
margin-top: 15px;
font-weight: bold;
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
function validate(){
var name=document.getElementById('name').value;
var email=document.getElementById('email').value;
var city=document.getElementById('city').value;
var mobile=document.getElementById('mobile').value;
if(name==""){
document.getElementById('errname').innerHTML="**Name Should Not Be Empty";
return false;
}else{
document.getElementById('errname').innerHTML="";
}
if(email==""){
document.getElementById('erremail').innerHTML="**Email Not Be Empty";
return false;
}else{
document.getElementById('erremail').innerHTML="";
}
if(city=="mu"){
document.getElementById('city').style.background="deeppink";
document.getElementById('city').style.color="#fff";
return false;
}else{
document.getElementById('errcity').innerHTML="";
}
if(mobile==""){
document.getElementById('errmob').innerHTML="**mobile should not be empty";
document.getElementById('ver').disabled=true;
return false;
}else{
document.getElementById('errmob').innerHTML="";
document.getElementById('ver').disabled=false;
}
if((mobile.length>10) || (mobile.length<10)){
document.getElementById('errmob').innerHTML="**mobile should 10digits";
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Black Dashboard
Contact Form
Bootstrap Contact Form
Bootstrap Contact Form

Questions / Comments: