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.

Grow Your Business With HubSpot's Tools for WordPress Websites

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:

bootstrap basic form example

Source

Here’s the code you’d use:

 

 

    <form>

  <div class="form-group">

    <label for="exampleInputEmail1">Email address</label>

    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">

  </div>

  <div class="form-group">

    <label for="exampleInputPassword1">Password</label>

    <input type="password" class="form-control" id="exampleInputPassword1">

  </div>

  <div class="form-group form-check">

    <input type="checkbox" class="form-check-input" id="exampleCheck1">

    <label class="form-check-label" for="exampleCheck1">Remember me</label>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

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.

 

 

    <div class="form-group">

    <label for="exampleFormControlSelect1">How did you hear about us?</label>

    <select class="form-control" id="exampleFormControlSelect1">

      <option>Select one</option>

      <option>Ad</option>

      <option>Friend</option>

      <option>Flyer</option>

      <option>TV</option>

      <option>Blog</option>

    </select>

  </div>

 

Here’s the result:

bootstrap form with select example

Source

Bootstrap Text Area Example

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.

 

 

     <div class="form-group">

    <label for="exampleFormControlTextarea1">How did you hear about us?</label>

    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>

  </div>

 

Here’s the result:

bootstrap form with text area example

Source

Bootstrap Attachment Example

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.

 

 

     <div class="form-group">

    <label for="exampleFormControlFile1">Upload Resume and Cover Letter</label>

    <input type="file" class="form-control-file" id="exampleFormControlFile1">

  </div>

 

Here’s the result:

bootstrap form with attachment example

Source

Bootstrap Form Grid Example

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:

 

 

    <div class="row">

    <div class="col">

      <input type="text" class="form-control" placeholder="Email address">

    </div>

    <div class="col">

      <input type="text" class="form-control" placeholder="Password">

    </div>

    </div>

 

Here’s the result:

Bootstrap grid form example

Source

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:

 

 

    <form class="form-inline">

  <label class="sr-only" for="inlineFormInputName2">Name</label>

  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputEmail" placeholder="Email Address">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Email Address</label>

  <div class="input-group mb-2 mr-sm-2">

    <input type="text" class="form-control" id="inlineFormInputPassword" placeholder="Password">

  </div>

  <div class="form-check mb-2 mr-sm-2">

    <input class="form-check-input" type="checkbox" id="inlineFormCheck">

    <label class="form-check-label" for="inlineFormCheck">

      Remember me

    </label>

  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>

</form>



Here’s the result:

Bootstrap inline form example

Source

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:

Boostrap inline form on mobile device will revert back to vertical stack (default)

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.

 

 

    <form action="/action_page.php" class="needs-validation" novalidate>

    <div class="form-group">

      <label for="email">Email Address</label>

      <input type="text" class="form-control" id="uname" placeholder="Enter email address" name="uname" required>

      <div class="valid-feedback">Thanks for entering a valid email address.</div>

      <div class="invalid-feedback">Please enter your email address.</div>

    </div>

    <div class="form-group">

      <label for="pwd">Password</label>

      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>

      <div class="valid-feedback">Thanks for entering a valid password.</div>

      <div class="invalid-feedback">Please enter your password.</div>

    </div>

    <div class="form-group form-check">

      <label class="form-check-label">

        <input class="form-check-input" type="checkbox" name="remember" required> Remember me

        <div class="invalid-feedback">Please check this box to continue.</div>

      </label>

    </div>

    <button type="submit" class="btn btn-primary">Submit</button>

  </form>

 

And here's the starter JavaScript you’ll need to add below that in the <body> of your HTML.

 

 

   <script>

// Disable form submissions if there are invalid fields

(function() {

  'use strict';

  window.addEventListener('load', function() {

    // Get the forms we want to add validation styles to

    var forms = document.getElementsByClassName('needs-validation');

    // Loop over them and prevent submission

    var validation = Array.prototype.filter.call(forms, function(form) {

      form.addEventListener('submit', function(event) {

        if (form.checkValidity() === false) {

          event.preventDefault();

          event.stopPropagation();

        }

        form.classList.add('was-validated');

      }, false);

    });

  }, false);

})();

</script>

 

Here’s the result:

Bootstrap CSS form validation exampleSource

Adding Forms to Your Bootstrap Site

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.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Jun 1, 2020 7:00:00 AM, updated June 01 2020

Topics:

Bootstrap CSS