In this tutorial, we are going to learn about the methods and ways through which Bootstrap 3 forms can be used for creating responsive contact forms. We will also discuss about validation classes that help you validate user input if you want to create a form and its validation simultaneously.
HTML forms are a crucial part of a website. They help you get in touch with your customers and also assist in performing a number of tasks including newsletter subscription, giving feedbacks, making status in social media and so on. But styling the forms manually one by one through CSS is a time consuming process. However, Twitter Bootstrap simplifies the process of styling these contact forms and their areas including input boxes, select boxes, text areas etc.
Twitter Bootstrap mainly provides three types of forms layouts.
1. Vertical forms ( which is basically a default form layout)
2. Horizontal forms
3. Inline form
In this post, we will learn about three of them and their making in detail.
Understanding The Basics of Twitter Bootstrap 3
Before we actually take you to the topic, let’s first set up Bootstrap files and an HTML page. So, let’s get started with copying the following HTML form.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Forms in Bootstrap – Demo</title>
<!– Bootstrap –>
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>
<!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]><script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script>
<script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script>
<![endif]–>
</head>
<body>
<div><h1>Hello World</h1>
</div>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script>
</body>
</html>
The above code is basically a Bootstrap based markup, which is necessary to make it available seamless across a variety of devices. The framework is provided with all the needed meta tags, Bootstrap’s CSS and JavaScript from the CDN, along with the jQuery file. Since, the Internet Explorer 8 framework currently does not support CSS3 and HTML5, it is advisable to integrate html5shiv and respond.js files, so that both of them can be made compatible with each other.
In the above markup there is also a Bootstrap container which includes several components for it. It’s div element which consists class.container to create fixed layouts. It is also helpful in wrapping and positioning of the elements to the middle of the browser window.
So, up to this point, you have gained a pretty good understanding of Bootstrap framework and the components related to it. In the next part, we will learn about how different forms can be created using the same.
But before we start creating forms, let’s get a basic HTML
1. Creating Vertical Form Layout
Vertical forms are default Bootstrap forms in which styling can be applied to form controls without adding base class to the element or providing any extra changes to the markup.
2. Creating Horizontal Form Layout
In Horizontal form layout, labels are generally aligned on the right and floated on the left so that they can be appeared in the same line just as form controls. While creating horizontal forms, you need to try your hands with various changes within the markup. The following are the steps you need to follow:
- in the <form> element add the class .form-horizontal
- Inside the <div> element, start wrapping and labeling form controls and apply the class .form-group
- For aligning these labels and form controls, make use of Bootstrap’s <grid classes>
- Now, lastly add the class .control-label in the <label> element.
You can copy this code as well:
<form class=”form-horizontal”>
<div class=”form-group”>
<label for=”enterEmail” class=”control-label col-xs-2″>Email</label>
<div class=”col-xs-10″>
<input type=”email” class=”form-control” id=”enterEmail” placeholder=”Email”>
</div>
</div>
<div class=”form-group”>
<label for=”providePassword” class=”control-label col-xs-2″>Password</label>
<div class=”col-xs-10″>
<input type=”password” class=”form-control” id=”providePassword” placeholder=”Password”>
</div>
</div>
<div class=”form-group”>
<div class=”col-xs-offset-2 col-xs-10″>
<div class=”checkbox”>
<label><input type=”checkbox”> Remember me</label>
</div>
</div>
</div>
<div class=”form-group”>
<div class=”col-xs-offset-2 col-xs-10″>
<button type=”submit” class=”btn btn-primary”>Login</button>
</div>
</div>
</form>
3. The Process of Creating Inline Forms
There are situations when you need to create a form wherein all the elements are needed to be placed horizontally to compact the layout. You can do this easily by adding a Bootstrap class .form inline to the element in the above markup.
About Author
Founder
David Watson is the founder of DesignDrizzle and is a professional website designer for over 10 years. He has competence in creating visually appealing and user-friendly websites for all the clients. He likes to explore new and creative ideas for designing, photography effects and other inspirational subjects