Easily Create Contact Form Using Twitter Bootstrap

I had posted a tutorial on creating registration form using Bootstrap and people loved that. Twitter Bootstrap is a great tool for developers to instantly create attractive layouts without help of any designer. Registration forms, contact forms and comments forms are used in almost every websites so I decided to create a quick contact form using twitter bootstrap. In this tut we will create front end of a good looking contact form using Bootstrap. You can use this beautiful form directly in your website.


Download   Live Demo

Bootstrap is a complete package so all you need to do is use suitable classes to style your web page. I did the same just used pre-defined classes and my form is ready. Below is a common snippet that you will need to add more fields in your form.

<div class="control-group">
 <label class="control-label">Email</label>
 <div class="controls">
 <div class="input-prepend">
 <span class="add-on"><i class="icon-envelope"></i></span>
 <input type="text" class="input-xlarge" id="email" name="email" placeholder="Email">
<p style="text-align: justify;">

You would also see an attractive select box in this contact form. Since official bootstrap doesn’t have any class to style <select> boxes so I used Bootstrap Select. It offered me what I wanted to style my select box. Just dropped its css and js files in main folder and included them in HTML page.

// call when all the assets are loaded including css, js and images
 $(window).on('load', function () {
<p style="text-align: justify;">

Note: This tutorial was a quick implementation from our previous registration form using Bootstrap tutorial. It uses Bootstrap 2.3 but latest version is 3.0.2.

So this was quick and easy. It took me half an hour to create this simple yet attractive contact form. I will be modifying this contact form with to add validations and will write a server side code to send email to the concerned person. You can use Bootstrap 3.0.2 but make sure to verify name of classes font-icons used. If you want me to create enhanced contact form using latest bootstrap then comment and share this simple tutorial, it encourages me to work more :)

About sanjeev

Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE

Related posts:

3 Responses so far.

  1. Hi,

    This was easy to follow.

    One pointer though – 3rd field is “Website” but placeholder is “Last Name”.
    Can you also show us how to validate form using javascript – to validate contents before submitting the form.
    Thanks a ton.

    1. Hi Anand,

      Thanks for pointing out that placeholder mistake. It has been fixed in live demo. Yes I would create a tutorial showing how you can validate this form using jQuery.


Leave a Reply

Your email address will not be published. Required fields are marked *