Introduction
Bootstrap has a load of built in tools to allow you to create any manner of form for your project. If you need to put a thing in a form, the likelihood is Bootstrap has some simple tools and styles available to allow you to do so pretty easily. In this tutorial we’ll be putting together a pretty standard contact form that you might find on a website. Check out our other tutorial to find out how to wire up your contact form to the back end.
If you haven’t got time or don’t need to read this full tutorial and simply want a contact form to copy just scroll to the bottom of the article and read the final section, “Putting It All Together”.
Verification
Something worth remembering is to add the type attribute to all inputs in your form. For example you would want to add type="email" to the <input> where you want users to add their email address.
<input type="email" class="form-control" id="emailAddress" placeholder="Email address">There are a number of new input controls, like email verification, and adding a type attribute allows you to take advantage of these. In this email example, if a user does not add a valid email address they will be prompted to do so upon attempting to submit the form. You can see a basic example of this in action here.
The available input types are text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Bootstrap supports all of these.
Bootstrap also has a number of customisations for verification but we’ll look into that in another article.
Form Structure
When you put together multiple fields to create a form you should add a number of Bootstrap classes to the elements contained within your form as well as their surrounding <div>s . I’ll go into each of these in turn but, to start with, I have shown the way the parts fit together in the code below. Note that I have removed all attributes (excluding class) and content from the elements to make the code easier to read.
<form>
<div class="form-row">
<div class="form-group">
<label></label>
<input class="form-control">
</div>
</div>
</form>Form Row
The use of .form-row allows you to place multiple input fields in a single row within your form. You might use this for having a separate field for First Name and Last Name within a form. You could simply use the Bootstrap class .row to achieve this but .form-row creates a more compact layout that suits forms better.
I’ve removed the <label>s from the code shown below, again for clarity, but the example shows the First Name / Last Name structure I refer to. You can also check it out and have a go yourself here where I have also included the alternate .row option to show the difference between the two.
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First Name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last Name">
</div>
</div>
</form>Form Group
.form-group is used to bring together labels, controls, optional help text, and form validation messaging. The class can be added to pretty much any element but realistically you’re likely to add it to either a <div> or a <fieldset> most times. In the example below I’ve only added <label>s and <input>s as I’ll come onto help text in a bit.
<form>
<div class=”form-group”>
<label for=”firstName”>First Name</label>
<input type=”text” class=”form-control” id=”firstName”>
</div>
<div class=”form-group”>
<label for=”lastName”>Last Name</label>
<input type=”text” class=”form-control” id=”lastName”>
</div>
</form>Form Controls
You will be using a number of textual form controls to put your form together. These include <input>, <textarea> and <select>. In order to style each of these elements you add Bootstrap’s .form-control class. Doing so affects what each of those elements look like, what they do when in focus, their size and a few other bits and pieces. You should note that the elements will also have a width of 100% applied to them.
To see each of these elements and how they look with .form-control added try out the code below. Alternatively check out this try it yourself example.
<form>
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" placeholder="First Last">
</div>
<div class="form-group">
<label for="yourColour">Your Favourite Colour</label>
<select class="form-control" id="yourColour">
<option>Red</option>
<option>Blue</option>
<option>Yellow</option>
<option>Other</option>
</select>
</div>
<div class="form-group">
<label for="yourComments">Comments</label>
<textarea class="form-control" id="yourComments" rows="4"></textarea>
</div>
</form>Sizing
As with most things Bootstrap offer there are various sizing options for .form-control. Alongside the standard size set by .form-control you can have larger controls by adding .form-control-lg and smaller controls by adding .form-control-sm. You can add these to <input>s as well as <select>s. Check out the working example I’ve created to show the code below in action.
<input class="form-control form-control-lg" type="text" placeholder="Large">
<input class="form-control" type="text" placeholder="Standard">
<input class="form-control form-control-sm" type="text" placeholder="Small">Bootstrap Custom Forms
Using the .form-control class on elements will mean browsers apply their own default styles to those elements. Bootstrap have made their own styles for some elements, namely checkboxes, range-selectors, select menus and file uploads. Whilst you do not have to use the Bootstrap styles it will make your site more consistent across browsers if you do.
As we’re just looking to put together a fairly standard contact form in this tutorial I’m not going to go into range-selectors or file uploads here. If you want to know more about that I’ll go into it in another tutorial.
Checkboxes
If you have some terms and conditions that are relevant to your form you may want to use checkboxes to ensure your users’ acceptance of your terms. You can easily improve upon default checkboxes using the Bootstrap classes .custom-control and .custom-checkbox to wrap your checkbox and its <label>.
You should also add .custom-control-input to the <input> and .custom-control-label to the <label>. Doing so will improve their layout and behaviour, vertically stacking them with nice spacing whilst allowing options for a disabled state. The layout of your code is slightly different to previous examples so pay particular attention to the order and attributes of the elements as shown below. Have a go yourself here.
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="bootstrapCheckbox">
<label class="custom-control-label" for="bootstrapCheckbox">Bootstrap Checkbox</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" value="" id="disabledCheckbox" disabled>
<label class="custom-control-label" for="disabledCheckbox">Disabled checkbox</label>
</div>Select Menus
To apply Bootstrap’s custom styling to select menus you simply add .custom-select to your <select> menu. As you probably expect now, sizing options are available by also adding .custom-select-lg for larger selects or .custom-select-sm for smaller ones as shown in the code below.
<select class="custom-select">
<option selected>Choose an option</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<select class="custom-select custom-select-lg">
<option selected>Choose an option</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<select class="custom-select custom-select-sm">
<option selected>Choose an option</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>Bootstrap also supports the multiple attribute.
<select class="custom-select" multiple>
<option selected>Choose an option</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>Help Text
Sometimes a <label> and placeholder text will not be enough to tell users what they are supposed to do with a particular form field. In this event, Bootstrap has a nice .form-text class which you can use to add some help text under a field. The .form-text will be placed under the field and it adds a little top margin to space them nicely.
You can put your help text inside various tags… personally I like to use <small>. You can also add utility classes to style the text up as you wish. I like to use .text-muted. To help users of assistive technology you should also add an aria-describedby attribute to your <input> containing the id of the help text. Check out the code below or see the live example.
<label for="userPassword">Password</label>
<input type="password" id="userPassword" class="form-control" aria-describedby="passwordHelpText">
<small id="passwordHelpText" class="form-text text-muted">
Your password must be at least 8 characters long. It must contain at least one UPPERCASE letter, one lowercase letter and one number. Special characters are allowed. Emojis are not allowed.
</small>Putting It All Together
Now we’ve looked at each of the parts of a standard contact form in turn we’ll put it all together. I’m going to use Bootstrap’s grid classes to make a more compact, user-friendly contact form but you can do whatever suits your site best. You can experiment using my example here or copy-paste the code shown below.
I hope this tutorial has proved helpful. Don’t forget to check out our other article on how to wire this up to the back end of your site.
<form id="contact-form">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name *</label>
<input type="text" name="first_name" class="form-control" id="first_name" placeholder="First Last" required>
</div>
<div class="form-group col-md-6">
<label for="email">Email *</label>
<input type="email" name="email" class="form-control" id="email" placeholder="e.g. something@somewhere.com" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="company_name">Company name</label>
<input type="text" name="company_name" class="form-control" id="company_name" placeholder="e.g. Acme Enterprises">
</div>
<div class="form-group col-md-6">
<label for="service">Select service *</label>
<select class="custom-select" name="service" id="service" aria-describedby="service_help" required>
<option value="" disabled selected>- please select -</option>
<option value="software development">Software Development</option>
<option value="web design">Website Design</option>
<option value="support">Support Services</option>
<option value="other">Other</option>
</select>
<small id="service_help" class="form-text text-muted">
If the service you require is not listed please select "Other" and provide any relevent information in the "Comments" field.
</small>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label for="comments">Comments</label>
<textarea class="form-control bg-white" name="comments" id="comments" rows="3"></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="privacyStatement">
<label class="custom-control-label" for="privacyStatement">I have read and understood the privacy statement</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>Like this story? Please follow us on Twitter.
At Welcm we design, develop and support touch screen applications and systems.
If you have a project you would like to discuss please send an enquiry from our contact page, email us at enquiries@welcm.uk or call us on 01252 950 650.
We also make Visitor Management Easy at https://welcm.ly
