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.
Here is HTML for the design:
<div class="container">
<form class="contact-us form-horizontal" method="post">
<legend>Contact Form</legend>
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" name="name" placeholder="Name">
</div>
</div>
</div>
<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" name="email" placeholder="Email">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Url</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-globe"></i></span>
<input type="text" id="url" class="input-xlarge" name="url" placeholder="https://www.phpgang.com">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Comment</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-pencil"></i></span>
<textarea name="comment" class="span4" rows="4" cols="80" placeholder="Comment (Max 200 characters)"></textarea>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>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:
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script>
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.
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
All together:
Lets merge this complete article examples and show complete HTML code for this.
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>How to delete comments with jQuery | PGPGang.com</title>
</head>
<body>
<h2>How to delete comments with jQuery example. => <a href="https://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>
<div class="container">
<form class="contact-us form-horizontal" method="post">
<legend>Contact Form</legend>
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" name="name" placeholder="Name">
</div>
</div>
</div>
<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" name="email" placeholder="Email">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Url</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-globe"></i></span>
<input type="text" id="url" class="input-xlarge" name="url" placeholder="http://www.example.com">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Comment</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-pencil"></i></span>
<textarea name="comment" class="span4" rows="4" cols="80" placeholder="Comment (Max 200 characters)"></textarea>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn">Cancel</button>
</div>
</div>
</form>
</div>
</body>
</html>Feedback
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.
Tutorial Categories:
Your tutorials are amazing ! Can you show how to make bootstrap template from psd ? like landing page.. will be very helpfull ! Thanks !