From surveys to shipping forms to registration forms and quizzes, web forms are everywhere on the internet. They come in handy for countless reasons. You can use web forms to convert visitors into potential leads and keep track of existing customer’s personal information, purchases, feedback, and survey responses.
How you add this interactive element to your web design depends on how you build your site.
If you were creating a website on WordPress, for example, then you could install a plugin to add forms to your site. The HubSpot WordPress plugin, for example, makes it easy to create forms on your site using an intuitive drag and drop builder. Plus, these forms will automatically sync with your HubSpot CRM so you can better manage your contacts.
If you were creating a website with Bootstrap CSS, on the other hand, then you could use form classes to quickly add forms on your site. We’ll cover this process in detail in this post. Let’s get started.
Bootstrap Form CSS
Thanks to the predesigned templates included in Bootstrap, creating forms for your site is easy. You can use any of the predefined form styles, as shown in Bootstrap’s documentation, to quickly add forms on your site.
You’ll just need to add the necessary code into the body section of your index.html file. Say, for example, you want to add a form to capture a customer’s account information so they can log into your site faster and easier next time. It might look something like this:
Notice that you have the opening and closing tags for a <form> element. And, within those tags, you have a variety of HTML elements, including dividers, labels, inputs, and buttons, that all together make up the form. For these to work, they need to be styled with the correct form classes in Bootstrap.
We can see a few of these in action in the three containers of the snippet above. Let’s break down the elements and styling used in each.
See the first two <input> elements? These are styled with the .form-control class so that they span the entire width of the page and are responsive. On the front-end, these are where the user will enter in their email address and password.
These <input> elements are preceded by <label> elements so the user knows what information to enter in and to which box. Together, each <label> and <input> pair are wrapped in their own container, or <div> element, which is styled with the .form-group class.
The third container is styled with .form-group class as well as the .form-check class because it contains a checkbox. To create this checkbox, the <input> element is styled with the .form-check-input class (instead of the .form-control class applied to the other <input> elements). Lastly, the <label> element comes after the <input> element and is styled with the .form.check.label class.
Finally, there’s a button element included. This requires styling with the button class rather than a form class.
Now that we understand how to build a basic form in Bootstrap, let’s look at how else you can modify and extend the form class in some examples below.
Bootstrap Form CSS Examples
Below are some examples that demonstrate the range of Bootstrap’s form styles. Each example will show the different required classes, form layouts, and more.
I’ll be using the W3Schools Online Code Editor to create the examples so you can click any of the Source links to view the full code snippet behind the example.
Bootstrap Select Example
Let’s say you want to add a dropdown menu in your existing form. Then you’d add the following in your HTML, right before the <div> containing the checkbox.
<label for="exampleFormControlSelect1">How did you hear about us?</label>
Let’s say you want to ask the user the same question, “How did you hear about us?” But rather than offer a limited selection of answers, you want to include a text area so they can write whatever they want. Then you’d add the following in your HTML, right before the <div> containing the checkbox.
<label for="exampleFormControlTextarea1">How did you hear about us?</label>
If you’d like to let users upload a file before submitting a form, then you can use an <input> element and style it with the .form-control-file class. You’ll pair it with a <label> element and wrap it in a <div> styled with the .form-group class as usual. Here’s the code you’d add right before the button.
<label for="exampleFormControlFile1">Upload Resume and Cover Letter</label>
To build more complex forms, you can use Bootstrap’s grid classes. For example, say you want the input fields for email address and password to be side-by-side and the rest of the elements to be stacked vertically. You also want to remove the labels above the input fields and instead have that text inside the fields. Then you can replace the first two <div> containers with the following code:
Please note: I added some margin settings in the CSS to make the layout look better. You can see that code by clicking on the source link.
Bootstrap Inline Form Example
If you’re looking to take up less space, then you might want to create an inline form in which all of the elements are on one line. You can do this by adding the .form-inline class to the <form> element and some size-specific column classes.
You’ll see mb-2 was added throughout the code, for example, which sets the margin-bottom of those elements to .5rem in Bootstrap. Similarly, mr-sm-2 sets the margin-right of those elements to .5rem and the breakpoint to small.
Let’s use the example from above and turn it into an inline form. Here’s the code:
Note: If the device or viewport you’re using is less than 576 pixels wide, then the elements will stack on top of each other. If I reduce my screen to 400px, for example, the form will look like this:
Bootstrap Form Validation Example
Let’s say you want to include actionable feedback to users filling out your forms, like a reminder to check the “Remember me” box if they forgot before submitting. You can do so by applying validation classes to the Bootstrap <form> element.
For example, the .was-validated class will let users know what fields must be filled out or checked off before submitting, whereas the .needs-validation class will only let users know if fields are missing after they try to submit.
Whichever class you use, input fields that have been filled out will have a green border, while input fields that haven’t been filled out will have a red border. If you’d like to tell users exactly what information is missing (and what info has been successfully provided), then you can even add .valid-feedback and .invalid-feedback messages.
In the example below, let’s use the .needs-validation class so that the user will know if anything is missing.
Here’s the HTML you’ll need to add in the <body> of your HTML.
Web forms are an important design element for your website. They can enable you to generate newsletter signups, accept orders online, and keep track of both customers’ and potential customers’ information. Web forms come in all shapes and sizes in part because there’s so many different ways to create them.
If you’re using Bootstrap, then you can use the templates above to create different forms. Or, if you’re not using a development framework, you can build them completely from scratch. Or, if you’re using WordPress, you can use the HubSpot WordPress plugin.
Originally published Jun 1, 2020 7:00:00 AM, updated June 01 2020