loading...

Bootstrap 4 – Creating and customizing forms

At last, we are ready to move on to the final part of our landing page, the Contact Us form. Note that we will not be writing any of the actual JavaScript that transfers the contents of the form to the server. Instead, we will learn how to use Bootstrap to lay out our form elements in an elegant and responsive manner.

Typically, contact forms require at least three pieces of information from the user: the user’s name (so that the recipient of the form data will know who they are talking to), the user’s email address (so that the recipient of the form data can reply to the user), and the actual message (what the user wants to send to the recipient). As such, we will be creating a form that will consist of three inputs: a name field, an email address field, and a text area for the user to write their message.

Let’s dig right into it. Start by creating an empty form below the  Contact Us header:

<div  >
    <h3>Contact Us</h3>
    <form>
        <!--Our form will go here-->
    </form>
</div>

At the heart of Bootstrap’s form layout is the  form-group class. On its own, all this class does is to set a 1rem bottom margin. However, as we will see, combining the form group with form controls gives us a powerful way of controlling our form’s appearance.

By default, Bootstrap lays out its form elements vertically—that is, each element is stacked above the other. Let’s go ahead and add a  name field to our form. Insert the following snippet in between our previously created form tags:

<div class="form-group">
    <label for="name">Your name</label>
    <input type="text"                          
     placeholder="Name">
</div>

Save and hit refresh. As you can see, the label takes over the entire first row, with the  name input field appearing on the second row (figure 4.14). Note how we applied the  form- control class to our  name input field. This class is what styles our actual input element. Among other things, applying the form-control class will change the element’s height and its position (to relative), clears its bottom margin, sets the element’s z-index (to 2), and gives the element a nice inset effect by adjusting the border style, border color, and border-radius. Removing this class from our input will result in just a simple, plain input box being displayed.

Now, what if we want slightly smaller form elements? Well, we can apply our own styles; for example, we can change the font size or height of our input element. However, Bootstrap provides us with form-control-lg and form-control-sm. The latter reduces the line-height of nested form controls as well as their font-size, border-radius, and padding. On the other hand, the  former form-control-lg class increases the form controls by again changing their font size and line-height. Go ahead and apply either one to our form group. To see the differences between these classes, consider the following code:

<div class="form-group">
   <label for="name">
   Your name (large)</label>
   <input
      type="text"
      class="form-control form-control-lg"
      placeholder="Name">
</div>
<div class="form-group">
   <label for="name">
   Your name (default)</label>
   <input
      type="text"
      class="form-control"
      placeholder="Name">
</div>
<div class="form-group">
   <label for="name">Your name (small)</label>
   <input
      type="text"
      
      placeholder="Name">
</div>

Then, take a look at figure 4.14:

Figure 4.14: Showing the difference between form-control-lg, the default form control, and form-control-sm

Note how (figure 4.14) our  name field stretches across the entire page, taking up a lot of valuable real estate. Seeing how users will certainly not need all this space for their names, you might wish to align the  label and  name input field. Luckily, Bootstrap makes this quite easy for us by offering horizontal form layouts and inline forms through the  form-inline class. Applying it to our  form element will change the display style of form controls and form groups contained within the form to  inline-block. This will align the various components within your  form element. Go ahead and apply it:

<form class="form-inline">
    <div class="form-group">
        <label for="name">Your name</label>
        <input
            type="text"
            
            
            placeholder="Name">
    </div>
</form>

Take a look at the screenshot in figure 4.15:

Figure 4.15: Our vertical name form group

This is much better, but we are not done quite yet. Try adding a second form group to the form. It will end up on the same line as our name form group. Furthermore, the input fields are now a bit too small to be of practical use. Try customizing them by combining the lessons that you learned in this chapter with the lessons you learned in  Chapter 2, Making a Style Statement .

While we can save valuable space by aligning labels and input boxes, there is a second approach that we can take to combine input description with the actual input fields: icons and placeholder texts (refer to figure 4.16). The idea is that we combine icons and placeholder texts to indicate the expected input. The advantage behind this approach is that we will not be losing space to label elements.

First, let’s remove the previously inserted label element and edit the input’s placeholder attribute to contain the string Your name. Our name form group should now consist of a single input element:

<form>
    <div class="form-group">
        <input
            type="text"
            
            placeholder="Your name">
    </div>
</form>

Let’s go ahead and duplicate this form group so that we now also have an input for our user’s email address:

<form>
    <div class="form-group">
        <input
            type="text"
            class="form-control"
            placeholder="Your name">
    </div>
    <div class="form-group">
        <input
            type="email"
            
            placeholder="Your email address">
    </div>
</form>

Now let’s go ahead and select two Font Awesome icons that best describe the expected input. We recommend the following:

  • A user symbol to indicate the user’s name:  fa fa-user
  • An  @ symbol to indicate the user’s email address:  fa fa-at

To combine the input elements with the icons, we first apply Bootstrap’s  input-group class to the form control—that is, our form control’s  class attribute should now be set to . Next, we create the  <i> tag for our Font Awesome icon, insert it before our input element, and then wrap the icon with a  span element. We set the  span class attribute to :

<form>
    <div class="form-group input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">
                <i class="fa fa-user"></i>
            </span>
         </div>
         <input 
            type="text"
            class="form-control"
            placeholder="Your name">
    </div>

    <div class="form-group input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">
                <i class="fa fa-at"></i></span>
        </div>
        <input
            type="text"
            
            placeholder="Your email address">
    </div>
</form>

The above code produces the form displayed in figure 4.16 below.

Figure 4.16: Combining placeholder text with icons to denote the expected input
Under the hood
The  input-group class modifies the display, position, and  width properties of a  form-control element. In combination with an  input- group-addon, this allows you to insert elements to the left or right of input elements.

Our form is almost done. All that is left is to add a text area for our message (using the  textarea element) and a Send button. To achieve the former, go ahead and create a new  form-group. However, instead of the  form-group containing an  input box, add a  label and a  textarea. Just as with the  input elements, the  textarea should be a form control (so go ahead and set its class attribute to  form-control):

<form>
    <div class="form-group input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">
                <i class="fa fa-user"></i>
            </span>
         </div>
         <input 
            type="text"
            class="form-control"
            placeholder="Your name">
    </div>

    <div class="form-group input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">
                <i class="fa fa-at"></i></span>
        </div>
        <input
            type="text"
            class="form-control"
            placeholder="Your email address">
    </div>
    <div class="form-group">
        <label for="name">Your message</label>
        <textarea
            class="form-control"
            rows="5"
            >
        </textarea>
     </div>
     <div class="form-group">
          <button class="btn btn-success">
            <i ></i> Send
            </button>
     </div>
</form>

The last missing part of the puzzle is our Send button. Although we won’t be writing the event listeners for this button, we will now learn just how easy it is to create a good-looking Bootstrap button.

The parent class of any button is the  btn class. In essence, this class adjusts the padding, margin, border radius, font size, and line height of any element that it is applied to. The nine context classes offered by Bootstrap are  btn-primary,  btn-secondary,  btn-success,  btn-link,  btn-info,  btn- danger, btn-light, btn-dark, and  btn-warning (take a look at figure 4.17):

Figure 4.17: The five Bootstrap button context styles. From left to right: default, success, danger, info, and warning

Let’s go ahead and complete our form by inserting a  button element and applying the  success context class. Create a new form group below our text area. Inside the form group, create a button element and set its class to  btn btn-success. Insert a nice icon and add some text to the button:

<div  >
    <h3>Contact Us</h3>
    
<form>
    <div class="form-group input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">
                <i class="fa fa-user"></i>
            </span>
         </div>
         <input 
            type="text"
            class="form-control"
            placeholder="Your name">
    </div>

    <div class="form-group input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">
                <i class="fa fa-at"></i></span>
        </div>
        <input
            type="text"
            class="form-control"
            placeholder="Your email address">
    </div>
    <div class="form-group">
        <label for="name">Your message</label>
        <textarea
            class="form-control"
            rows="5"
            >
        </textarea>
     </div>
     <div class="form-group">
          <button class="btn btn-success">
            <i ></i> Send
            </button>
     </div>
  </form>
</div>

Last but not least, we can add some descriptive text to our Contact Us section. In this case, we will use placeholder text generated using  http://generator.lorem-ipsum.info/ (a useful tool if you ever require placeholder text for demo purposes):

<h3>Contact Us</h3>
<p>Lorem ipsum dolor sit amet, modo integre ad est, omittam temporibus ex sit, dicam molestie eum ne. His ad nonumy mentitum offendit, ea tempor timeam nec, doming latine liberavisse his ne. An vix movet dolor. Ut pri qualisque reprehendunt, altera insolens torquatos in per. Mei veri omnium omittam at, ea qui discere ceteros.</p>
Figure 4.18: The Contact Us section along with the Send button (example08.html)

While the inputs are pretty explanatory in the case of the preceding example, there may be inputs that require an explanation. As such, you can add descriptive text using the  form- text class:

<p >Some text describing my input.</p>

All that the  form-text class does is to set the element’s display property to block and add a top margin of 0.25 rem to the element.

Furthermore, it should be noted that we wrapped both the Contact Us title texts inside the  h3 header tag. This is appropriate in this case, as the title blends nicely with the content. However, for cases in which the title should stand out more, or should not blend in with the content, one should use Bootstrap’s display heading class  display-*, where  * denotes a number between  1 and  4. As with the header tags, the smaller the number, the bigger the font. The largest display class applies a font size of 6 rem to the target element and decreases this for each successive display class (so, for example,  display-2 sets the font size to  5.5 rem).

The display style definition also sets the font weight to 300. Figure 4.19 contrasts the use of  display-* against the use of the HTML header tags:

Figure 4.19: Contrasting Bootstrap’s display classes against the HTML header tags
Increasing the font size and weight of paragraphs
In order to emphasize the text contained within paragraphs (as opposed to their headers), the  lead class should be used. This class changes the font size to 1.25 rem and the font weight to 300.

Comments are closed.

loading...