"Contact Us"
Bootstrap 3.3.0 Snippet by vikicoder

<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 ----------> <div class="container"> <div class='row'> <div class='col-sm-12'> <div class='col-sm-2'></div> <div class='col-sm-8'> <div class="panel panel-primary"> <div class="panel-heading">Contact us</div> <div class="panel-body"> <div class='col-sm-6 col-md-6 cd-mtb5'> <div class = "input-group"> <span class = "input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input type = "text" class = "form-control nfname" placeholder = "Enter your first name."> </div> </div> <div class='col-sm-6 col-md-6 cd-mtb5'> <div class = "input-group"> <span class = "input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input type = "text" class = "form-control nlname" placeholder = "Enter your last name"> </div> </div> <div class='col-sm-12 col-md-12 cd-mtb5'> <div class = "input-group"> <span class = "input-group-addon"><span class=" glyphicon glyphicon-envelope"></span></span> <input type = "text" class = "form-control nemail" placeholder = "Enter your email address.."> </div> </div> <div class='col-sm-12 col-md-12 cd-mtb5'> <div class = "input-group"> <span class = "input-group-addon"><span class=" glyphicon glyphicon-earphone"></span></span> <input type = "text" class = "form-control ncontact" placeholder = "Enter your contact number"> </div> </div> <div class='col-sm-12 col-md-12 cd-mtb5'> <div class = "input-group"> <span class = "input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> <input type = "text" class = "form-control ndob" placeholder = "Enter your date of birth.."> </div> </div> <div class='col-sm-12 col-md-12 cd-mtb5'> <div class="form-group"> <select class="form-control ngender" id="xxxgender"> <option value="0">Select a gender</option> <option value="1">Male</option> <option value="2">Female</option> </select> </div> </div> <div class='col-sm-12 col-md-12 cd-mtb5'> <div class="form-group"> <select class="form-control nstate" > <option value="">------------Select State------------</option> <option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option> <option value="Andhra Pradesh">Andhra Pradesh</option> <option value="Arunachal Pradesh">Arunachal Pradesh</option> <option value="Assam">Assam</option> <option value="Bihar">Bihar</option> <option value="Chandigarh">Chandigarh</option> <option value="Chhattisgarh">Chhattisgarh</option> <option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option> <option value="Daman and Diu">Daman and Diu</option> <option value="Delhi">Delhi</option> <option value="Goa">Goa</option> <option value="Gujarat">Gujarat</option> <option value="Haryana">Haryana</option> <option value="Himachal Pradesh">Himachal Pradesh</option> <option value="Jammu and Kashmir">Jammu and Kashmir</option> <option value="Jharkhand">Jharkhand</option> <option value="Karnataka">Karnataka</option> <option value="Kerala">Kerala</option> <option value="Lakshadweep">Lakshadweep</option> <option value="Madhya Pradesh">Madhya Pradesh</option> <option value="Maharashtra">Maharashtra</option> <option value="Manipur">Manipur</option> <option value="Meghalaya">Meghalaya</option> <option value="Mizoram">Mizoram</option> <option value="Nagaland">Nagaland</option> <option value="Orissa">Orissa</option> <option value="Pondicherry">Pondicherry</option> <option value="Punjab">Punjab</option> <option value="Rajasthan">Rajasthan</option> <option value="Sikkim">Sikkim</option> <option value="Tamil Nadu">Tamil Nadu</option> <option value="Tripura">Tripura</option> <option value="Uttaranchal">Uttaranchal</option> <option value="Uttar Pradesh">Uttar Pradesh</option> <option value="West Bengal">West Bengal</option> </select> </div> </div> <div class='col-sm-12 col-md-12 cd-mtb5'> <div class = "input-group"> <span class = "input-group-addon"><span class="glyphicon glyphicon-home"></span></span> <input type = "text" class = "form-control naddress" placeholder = "Enter your address.."> </div> </div> <div class='col-sm-12 col-md-12 cd-mtb5'> <ul class="nav nav-pills"> <li class="active" ><a data-toggle="tab" href="#menu1"><strong>Contact Us</strong></a></li> <li><a data-toggle="tab" href="#menu2"><strong>Feedback</strong></a></li> </ul> <div class="tab-content"> <div id="menu1" class="tab-pane fade in active cd-mtb5 "> <div class='col-sm-12 col-md-12 cd-p0'> <div class="form-group"> <select class="form-control " id=""> <option value="0">--Contact us for--</option> <option value="1">Genral Query</option> <option value="2">Cancellation</option> <option value="1">Rescheduling</option> <option value="2">Refund</option> <option value="1">Service Concern</option> <option value="2">Other</option> </select> </div> </div> </div> <div id="menu2" class="tab-pane fade"> <div class='col-sm-12 col-md-12 cd-p0'> <div class="form-group"> <select class="form-control " id=""> <option value="0">--Feedback for--</option> <option value="2">Website</option> <option value="1">Services</option> </select> </div> </div> </div> </div> </div> <div class='col-sm-12 col-md-12 cd-mtb5'> <div class = "input-group"> <span class = "input-group-addon"><span class="glyphicon glyphicon-comment"></span></span> <textarea type = "text" class = "form-control naddress" placeholder = "Whats on your mind?"></textarea> </div> </div> <div class='col-sm-12 col-md-12 cd-mtb5 text-center'> <button class='btn btn-primary' onclick='validate()'>Send us</button> </div> </div> </div> <div class='col-sm-2'></div> </div> </div>
.cd-mtb5{ margin-top:5px !important; margin-bottom:5px !important; } .cd-p0{ padding:0px; } .tab-content{ background:red; }

Related: See More


Questions / Comments: