"Contact us page"
Bootstrap 3.1.0 Snippet by BhaumikPatel

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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-lg-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> <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" /> </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 email" required="required" /></div> </div> <div class="form-group"> <label for="subject"> Subject</label> <select id="subject" name="subject" class="form-control" required="required"> <option value="na" selected="">Choose One:</option> <option value="service">General Customer Service</option> <option value="suggestions">Suggestions</option> <option value="product">Product Support</option> </select> </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="col-md-12"> <button type="submit" class="btn btn-primary pull-right" id="btnContactUs"> Send Message</button> </div> </div> </form> </div> </div> <div class="col-md-4"> <form> <legend><span class="glyphicon glyphicon-globe"></span> Our office</legend> <address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone"> P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address> </form> </div> </div> </div>
.jumbotron { background: #358CCE; color: #FFF; border-radius: 0px; } .jumbotron-sm { padding-top: 24px; padding-bottom: 24px; } .jumbotron small { color: #FFF; } .h1 small { font-size: 24px; }

Related: See More

Questions / Comments:

how do i transfer this to become mobile friendly?

emeyih () - 7 years ago - Reply 0

How do I place recaptcha google ? help me please

Rodrigo de Souza Teixeira () - 9 years ago - Reply 0

i like , but i need put recaptcha google, can you help me, please

Rodrigo de Souza Teixeira () - 9 years ago - Reply 0

You should use some HTML and stop it from resizing X on your text area.

Blaze Rowland () - 9 years ago - Reply 0

If you are getting a weird symbol next to the globe take out the space and add   and that will get rid of it

Nico () - 10 years ago - Reply 0

Sorry add "&n b s p ; "but without the spaces

Nico () - 10 years ago - Reply 0

Could we please get a simple PHP script to go along with this?

Guest () - 10 years ago - Reply 0

Your best option is to use a formmail script. I don't think mazsurguy REALLY wants or is caple of doing an entire php script by himself. There are thousands of security issues. Here is the website to the best formmailer out there:


Guest () - 10 years ago - Reply 0

Can you provide the php to get this to work on an actual page?

Andrew NL () - 10 years ago - Reply 0

Depends on the requirements of the page... what version of PHP are you using? Do you want this in an application?

maxsurguy () - 10 years ago - Reply 0

Yes please :D I want to place it in the bottom of my site. www.andrewnl.com

Andrew NL () - 10 years ago - Reply 0