"Bootstrap 3.x Contact Form Layout"
Bootstrap 3.0.0 Snippet by jasonflaherty

Post to Facebook Tweet this

<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 ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <small><i></i>Add alerts if form ok... success, else error.</i></small> <div class="alert alert-success"><strong><span class="glyphicon glyphicon-send"></span> Success! Message sent. (If form ok!)</strong></div> <div class="alert alert-danger"><span class="glyphicon glyphicon-alert"></span><strong> Error! Please check the inputs. (If form error!)</strong></div> </div> <form role="form" action="" method="post" > <div class="col-lg-6"> <div class="well well-sm"><strong><i class="glyphicon glyphicon-ok form-control-feedback"></i> Required Field</strong></div> <div class="form-group"> <label for="InputName">Your Name</label> <div class="input-group"> <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required> <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div> </div> <div class="form-group"> <label for="InputEmail">Your Email</label> <div class="input-group"> <input type="email" class="form-control" id="InputEmail" name="InputEmail" placeholder="Enter Email" required > <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div> </div> <div class="form-group"> <label for="InputMessage">Message</label> <div class="input-group" > <textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea> <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div> </div> <div class="form-group"> <label for="InputReal">What is 4+3? (Simple Spam Checker)</label> <div class="input-group"> <input type="text" class="form-control" name="InputReal" id="InputReal" required> <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div> </div> <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right"> </div> </form> <hr class="featurette-divider hidden-lg"> <div class="col-lg-5 col-md-push-1"> <address> <h3>Office Location</h3> <p class="lead"><a href="https://www.google.com/maps/preview?ie=UTF-8&q=The+Pentagon&fb=1&gl=us&hq=1400+Defense+Pentagon+Washington,+DC+20301-1400&cid=12647181945379443503&ei=qmYfU4H8LoL2oATa0IHIBg&ved=0CKwBEPwSMAo&safe=on">The Pentagon<br> Washington, DC 20301</a><br> Phone: XXX-XXX-XXXX<br> Fax: XXX-XXX-YYYY</p> </address> </div> </div> </div>

Related: See More

Vue Argon Design System
Contact Form
Bootstrap Contact Form
Bootstrap Contact Form

Questions / Comments:

buena pagina

Webxpress () - 7 years ago - Reply 0

http://doresa.ir

mehran () - 7 years ago - Reply 0

how do I do to enter my email to receive messages from the form

dave () - 8 years ago - Reply 0

how do I enter my email to receive them messages from the form

Christian () - 8 years ago - Reply 0

Thanks for this. It helps a lot :) Godbless

Steffi Loreto () - 8 years ago - Reply 0

I am noob soo pls dont judge me, but i cant seem to get it working properly my "Success! Message sent." and "Error message" are both on my website when i click send nothing happens

Nemanja A. Pavlovic () - 9 years ago - Reply 0

A beautiful contact form. Love the live validation rather than taking the user to another page to display any errors.

Andrew McMaster () - 9 years ago - Reply 0

Noob question... all the fields are required in this example... how do I change the code to have a non required field and the ok check does not appear.

Giancarlo () - 9 years ago - Reply 0

You can remove "required" attribute from the input fields :) for example:

maxsurguy () - 9 years ago - Reply 0

how to display this form in center of website?

Shivashish () - 9 years ago - Reply 0

I want to know how will the message reach the back end?????

Shivashish () - 9 years ago - Reply 0

Nice, but it seems useless without the PHP file and if without explaining how to make this form to send to a specific email address.

Andreas () - 9 years ago - Reply 0

llmjnjnnjk

lm () - 9 years ago - Reply 0

how do you view / access the .js and .css that goes with this form? I forked it but the .css and .js tabs are empty

Troy Hall () - 9 years ago - Reply 0

There is no additional CSS or JS for this snippet. Plain Bootstrap CSS and JS is enough

maxsurguy () - 9 years ago - Reply 0

Thank you for your contact form. This contact form has been used in following template: http://www.rowbootstrap.com...

RowBootstrap () - 10 years ago - Reply 0

Nice! Thanks for letting the author know!

maxsurguy () - 10 years ago - Reply 0

It's my pleasure Maks. Just checking your blog and other projects. You are a great guy :)

RowBootstrap () - 10 years ago - Reply 0

Great, thanks very much!

bobby_r () - 10 years ago - Reply 0

Where's the CSS file?

Freddy () - 10 years ago - Reply 0

It's on http://getbootstrap.com/, This is a bootstrap contact form.

Me () - 10 years ago - Reply 0

i tried many times use php but doesnt work
please help me

yesica () - 10 years ago - Reply 0

When I updated CSS to bootstrap 3.2.0 the required check marks shift down. Tip on how I can fix this?

Hocket () - 10 years ago - Reply 0

the css I changed to fix:
.form-control-feedback {
position: relative;
display: inline;
top: 0;
line-height: 14px;
}

Hocket () - 10 years ago - Reply 0

Is there a place where we can get the php included with the html snippet above?

Dustin () - 10 years ago - Reply 0

That hugely depends on your requirements...

The basic PHP code for a contact form could be found in many places but it depends if you are using Wordpress or just plain PHP or a PHP framework...

maxsurguy () - 10 years ago - Reply 0

look nice, but it seems useless without the PHP file?

craig () - 10 years ago - Reply 0

@craig i'd hardly call it useless. max has just given us a beautiful template with front end validator for free.
make your own back-end mail serve code - it's not difficult. cheers max!

zakir2k () - 10 years ago - Reply 0

Sorry Noob question, but how do you tell this form to send to a specific email address?

Steven Sheffey () - 10 years ago - Reply 0

You would have to use a backend script to do that… Like PHP or Nodejs. So the email address would have to be specified on the backend application (server side).

maxsurguy () - 10 years ago - Reply 0

eeeeeeeeeeeeee

Guest () - 10 years ago - Reply 0

Hi

What are you using to validate the form fields ? I get a nice tooltip.

Thanks

Bruno Hug () - 10 years ago - Reply 0

Hi! That is standard HTML 5 form validation. It is built in with your browser and you could use it by adding 'required' attribute to your input elements.

maxsurguy () - 10 years ago - Reply 0

Good lord how beautiful HTML5 has become !

Bruno Hug () - 10 years ago - Reply 0