"Contact Page"
Bootstrap 3.3.0 Snippet by ashutosh123

<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="jumbotron jumbotron-sm"> <div class="container"> <div class="row"> <div class="col-sm-12 col-sm-12"> <h1 class="h1"> Contact us <small>Feel free to contact us</small></h1> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="well well-sm"> <form> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="name"> Name</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span> </span> <input type="text" class="form-control" id="name" placeholder="Enter your name" required="required" /></div> </div> <div class="form-group"> <label for="email"> Email Address</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span> </span> <input type="email" class="form-control" id="email" placeholder="Enter your email" required="required" /></div> </div> <div class="form-group"> <label for="subject"> Mobile No.</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span> </span> <input type="phone" class="form-control" id="phone" placeholder="Enter your phone no." required="required" /></div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="name"> Message</label> <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" placeholder="Message"></textarea> </div> </div> <div class="form-group"> <div class="col-md-12"> <button type="submit" class="btn btn-warning pull-right">Send <span class="glyphicon glyphicon-send"></span></button> </div> </div> </div> </form> </div> </div> <div class="col-md-4"> <form> <legend><span class="glyphicon glyphicon-globe"></span> Our Location</legend> <address> <strong>propertiesguru.com</strong><br> 617, West End Mall<br> Janakpuri, New Delhi - 110058<br> <abbr title="Phone"> Phone</abbr> (+91) 9312 690 490 </address> <address> Email: <a href="mailto:#">info@propertiesguru.com</a> </address> </form> </div> </div> </div>
.jumbotron { background: #c82021; color: #FFF; border-radius: 0px; } .jumbotron-sm { padding-top: 12px; padding-bottom: 12px; } .jumbotron small { color: #FFF; } .h1 small { font-size: 24px; } .button { background: #c82021; color: #FFF; border-radius: 3px; } .button.hover { background: #c82021; color: #358CCE; }

Related: See More


Questions / Comments: