"Compact contact form"
Bootstrap 2.3.2 Snippet by msurguy

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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"> <form class="well span8"> <div class="row"> <div class="span3"> <label>First Name</label> <input class="span3" placeholder= "Your First Name" type="text"> <label>Last Name</label> <input class="span3" placeholder="Your Last Name" type="text"> <label>Email Address</label> <input class="span3" placeholder= "Your email address" type="text"> <label>Subject</label> <select class="span3" id="subject" name="subject"> <option selected value="na"> Choose One: </option> <option value="service"> General Customer Service </option> <option value="suggestions"> Suggestions </option> <option value="product"> Product Support </option> </select> </div> <div class="span5"> <label>Message</label> <textarea class="input-xlarge span5" id="message" name="message" rows="10"> </textarea> </div><button class="btn btn-primary pull-right" type= "submit">Send</button> </div> </form> </div>

Related: See More

Questions / Comments:

Where can find the css??

Osei Kwadjoe (0) - 2 years ago - Reply 0

Which font you using?

CBride (0) - 3 years ago - Reply 0

Is there a place where can get suitable php code for the contact form

MWB Computers (0) - 4 years ago - Reply 0

Hi, I love you Contact form, but for some reason when i add the Html to my page, everything is all squashed to the left hand side? and the button appears at the top right of the form? Iv reference the correct bootstrap file, but yet my textboxes, textarea, and margins are just not being applied?

Atkinson1988 (0) - 4 years ago - Reply 0

wrapping all this in a form tag can't be good practice.

Tyler Longren (0) - 4 years ago - Reply 0

why not?

maxsurguy (0) - 4 years ago - Reply 0

It causes some weird functionality, at least when used with non-standard bootstrap.css files, like on bootswatch. I did up a quick version that works nicely with those bootswatches, as well as the straight-up bootstrap.css. I'll dig it out tomorrow. Gotta get to bed now. :)

Tyler Longren (0) - 4 years ago - Reply 0


I guess one way to fix that would be to put the form inside of the first <div class="row">

maxsurguy (0) - 4 years ago - Reply 0

hi cannot for some reason, make it work on a span8 or span12. the thing is the form shrinks in any of those spans 8 or 12. How do i make it work, please?

moisea (0) - 4 years ago - Reply 0

How would I add jquery validation to this form?

Tim Keeley (0) - 4 years ago - Reply 0

How do I specify where that message is sent? Such as, to my personal email. That's not with a name attribute added to the input fields, is it? It's beautiful, I love it, would really like using it.

Thomas O'Hearn (0) - 4 years ago - Reply 0

You need to code a seperate php file that receives the POST inputs and sends an email

CrazyLB (0) - 4 years ago - Reply 0

Thank you sir!

Thomas O'Hearn (0) - 4 years ago - Reply 0

Hi The <label> closing tag for "Subject" is in the wrong place! Put the closing tag like so: <label>Subject</label> to make the form even more nice!

Dave Akini (0) - 5 years ago - Reply 0

You are right! Will fix it now. Thank you!

maxsurguy (0) - 4 years ago - Reply 0

Awesome Contact form :)

இராஜேஷ் குமார் ஆ (0) - 5 years ago - Reply 0

Sorry for the noob question... but how do I determine where the data is put? Thanks!

Shneebly (0) - 5 years ago - Reply 0

Add name="" attributes to all input fields

maxsurguy (0) - 5 years ago - Reply 0

Need some fix. First, submit button is must inside on row. For full responsive need remove icon from mail.

Here: https://gist.github.com/456...

angelside (0) - 5 years ago - Reply 0

thanks! Updated the snippet with your code!

maxsurguy (0) - 5 years ago - Reply 0