December 11, 2013 8:24 am

How to create Contact Form using Bootstrap

Today I am going to a very basic tutorial on Bootstrap (front-end framework for faster and easier web development) and this is very simple and easy to configure and make your websites powerful at front-end, in this article I am explaining you with a contact form which is very simple and easy to use in your web designs.

How to create Contact Form using Bootstrap

Here is HTML for the design:

In this HTML code we are showing a full grid view and form elements with icons: <i class=”icon-user”></i> This will show a user icon in-front of text box there is many icons in bootstrap like pencil, globe or briefcase etc.

Here is the libraries of bootstrap required to make its design:

These are the files you have to include in you html form.

The above theme support only wide screens but if you are looking for responsive use this css to enable it on all screen sizes.

All together:

Lets merge this complete article examples and show complete HTML code for this.

If you have any issue in its configuration or want to suggest some thing please feel free to comment. For your ease we make its demo and script to download.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.

Tutorial Categories:
  • bob

    Your tutorials are amazing ! Can you show how to make bootstrap template from psd ? like landing page.. will be very helpfull ! Thanks !