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

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="//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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

buena pagina

Webxpress () - 8 years ago - Reply 0


mehran () - 8 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 () - 9 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 () - 10 years ago - Reply 0


llmjnjnnjk

lm () - 10 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 () - 10 years ago - Reply 0


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

maxsurguy () - 10 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 () - 11 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 () - 11 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 () - 11 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 () - 11 years ago - Reply 0


Good lord how beautiful HTML5 has become !

Bruno Hug () - 11 years ago - Reply 0