I will start this article by stating that using a framework is not always the solution to designing web forms. However, the Bootstrap css framework makes the process of building intuitive web form design simple. High conversion rates are mandatory on the web nowadays. Keep your web forms 100% responsive, short and simple with the help of the Bootstrap css framework.
Real world examples of web form design
Login Forms
A login form in Bootstrap is just an inline form with a few input groups inside. To create an inline form, we add the ‘form-inline’ class to the <form> tag.
Inside this form, each separate field will need to be declared inside a form group
Form groups usually contain a label and input field. However, you can place single items such as buttons inside a form group as well.
Below is an example layout of a horizontal web form.
form
form-group
label (Email)
input
form-group
label (Password)
input
form-group
button (Login)
Please excuse the pseudo-code…
Great web form design with Bootstrap is a breeze with the help of its simple to use form classes.
In order for Bootstrap to recognize each input as a form input, we must include the ‘form-control‘ class in each text field and button.
Most forms will have a submit button. These should have the ‘btn’ class added to them in order for Bootstrap to recognize them as form buttons. Additionally, they should contain a ‘btn-default‘ or ‘btn-primary‘ class to style your forms’ buttons according to either the default Bootstrap theme or a custom bootswatch.
Additonally, adding the ‘sr-only‘ class to any element will cause it to only be rendered for screen readers.
Example:
<form class="inline-form">
<label class="sr-only">Email</label>
<input class="form-control" placeholder="Email" type="email">
</form>
Vertical web form design with Bootstrap
Let us create a common registration form using Bootstrap’s column classes.
Below is an example layout of a vertical web form.
form
form-group
label (Email)
input
form-group
label (Name)
input
form-group
label (Password)
input
form-group
button (Register)
As you can tell, it is created with the same layout as horizontal forms. However, you do not add the ‘inline-form’ class to the form tag. Simply create a form with labels, inputs and a submit button. Each of these fields will also go inside a div with the ‘form-group row‘ class.
However, in order for vertical forms to be displayed correctly we must declare the column sizes for the field elements.
Example:
<form> <div class="form-group row"> <div class="col-xs-12 col-sm-4"><label class="for="name">Name *</label></div> <div class="col-xs-12 col-sm-8"><input class="form-control" id="name" placeholder="Your Name" type="text"></div> </div> <div class="form-group row"> <div class="col-xs-12 col-sm-4"><label for="email">Email *</label></div> <div class="col-xs-12 col-sm-8"><input class="form-control" id="email" placeholder="[email protected]" type="email"></div> </div> <div class="form-group row"> <div class="col-xs-12 col-sm-4"><label for="password">Password *</label></div> <div class="col-xs-12 col-sm-8"><input class="form-control" id="password" placeholder="Password" type="password"></div> </div> <div class="form-group row"> <div class="col-xs-12 col-sm-offset-4"><input class="btn btn-success" type="submit" value="Register"></div> </div> </form>
Try using the Bootstrap css framework for your web forms. It has saved so many hours of my time in web form creation. Hopefully, I have inspired you to utilize it for your future web form designs.
Please leave a comment if you have any questions regarding Bootstrap web form creation. I will be happy to answer them when I get a chance!
