"Bootstrap 3.0.0 Contact Form"
Bootstrap 3.0.0 Snippet by jasonsyko

<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-sm-4"> <h3>Drop me a line!</h3> <hr> <address> <strong>Email:</strong> <a href="mailto:#"> name@domain.com</a><br><br> <strong>Phone:</strong> (555)123-4567 </address> </div> <div class="col-sm-8 contact-form"> <form id="contact" method="post" class="form" role="form"> <div class="row"> <div class="col-xs-6 col-md-6 form-group"> <input class="form-control" id="name" name="name" placeholder="Name" type="text" required autofocus /> </div> <div class="col-xs-6 col-md-6 form-group"> <input class="form-control" id="email" name="email" placeholder="Email" type="email" required /> </div> </div> <textarea class="form-control" id="message" name="message" placeholder="Message" rows="5"></textarea> <br /> <div class="row"> <div class="col-xs-12 col-md-12 form-group"> <button class="btn btn-primary pull-right" type="submit">Submit</button> </form> </div> </div>
.contact-form { margin-top:70px; }

Related: See More


Questions / Comments:

I need php of this.
Please help me

yesica () - 10 years ago - Reply 0


what version of PHP are you running?

maxsurguy () - 10 years ago - Reply 0


Code Fixed:

<div class="container">

<div class="row">

<div class="col-sm-4">

<h3>Medios de Contacto</h3>

<hr>

<address>

Correo: ejemplo@grupocolonnello.com.mx

Teléfono: (555)123-4567

</address>



/GrupoColonnello





/GrupoColonnello



</div>

<div class="col-sm-8 contact-form">

<form id="contact" method="post" class="form" role="form">

<div class="row">

<div class="col-xs-6 col-md-6 form-group">

<input class="form-control" id="name" name="name" placeholder="Nombre" type="text" required="" autofocus=""/>

</div>

<div class="col-xs-6 col-md-6 form-group">

<input class="form-control" id="email" name="email" placeholder="Correo" type="email" required=""/>

</div>

</div>

<textarea class="form-control" id="message" name="message" placeholder="¿En qué le podemos ayudar?" rows="5"></textarea>


<div class="row">

<div class="col-xs-12 col-md-12 form-group">

<button class="btn btn-primary pull-right" type="submit">Enviar</button>

</div>

</div>

</form>

</div>

</div>

</div>

baezbz () - 10 years ago - Reply 0


Anyone have a PHP script that works alongside this?

ajbudis () - 10 years ago - Reply 0


I use Laravel for everything PHP related, I could only give you an example with Laravel.

maxsurguy () - 10 years ago - Reply 0


My footer was getting to the top of my page until I added the two extra closing div tags. Thanks.

Wini () - 10 years ago - Reply 0


HTML Broken,.. </div>'s missing

Tuyin () - 10 years ago - Reply 0


i dont know what i did wrong it wont send the message it just redirects then says 404 error page not found...i dont know if its cuz am using wordpress framework

Stevie Dlunder () - 10 years ago - Reply 0


whatTheheck the css is only 2 lignes !!

hamza () - 10 years ago - Reply 0


Using the bootstrap.css or bootstrap.min.css

mycstro () - 10 years ago - Reply 0


Great

Riliwan () - 11 years ago - Reply 0


As Stijn said, the HTML code is broken. This was not expected..

These two divs dont have closing tags, also I could see its utility just before form close.
<div class="row">
<div class="col-xs-12 col-md-12 form-group">

There should be 3 closing div tags after </form> (only 2 closing). For <div class="col-sm-8 contact-form">, <div class="row"> and <div class="container"> respectively.

Prakhar Goel () - 11 years ago - Reply 0


2x closing div missing!

Stijn Verplancke () - 11 years ago - Reply 0