No Time Dad

A blog about web development written by a busy dad

How to Create a Bootstrap Contact Form

I previously wrote about creating a contact form using tailwindcss, so I thought it’d only be fair to create a Bootstrap contact form. Even though Bootstrap has been around longer I feel more comfortable using Tailwindcss for building sites. Most likely because I think Tailwind is closer to writing traditional css, which I like.

Below is a screenshot of the contact form and the corresponding html.

bootstrap-contact-form

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
      crossorigin="anonymous"
    ></script>

    <title>Contact Form</title>
  </head>

  <body>
    <div class="container">
      <div class="p-4">
        <form>
          <div class="row mb-3">
            <div class="col">
              <label for="first-name" class="form-label">First name</label>
              <input
                class="form-control"
                type="text"
                id="first-name"
                required
              />
            </div>
            <div class="col">
              <label for="last-name" class="form-label">Last name</label>
              <input class="form-control" type="text" id="last-name" required />
            </div>
          </div>
          <div class="row">
            <div class="col">
              <label for="email" class="form-label">Email</label>
              <input class="form-control" type="email" id="email" required />
            </div>
            <div class="col">
              <label for="phone" class="form-label">Phone</label>
              <input class="form-control" type="tel" id="phone" />
              <div id="phone-help" class="form-text">Optional</div>
            </div>
          </div>
          <div class="row mb-3">
            <div class="col">
              <label for="subject" class="form-label">Subject</label>
              <input class="form-control" type="text" id="subject" required />
            </div>
          </div>
          <div class="row">
            <div class="col">
              <label for="message" class="form-label">Message</label>
              <textarea
                class="form-control"
                rows="4"
                id="message"
                required
              ></textarea>
              <div id="message-help" class="form-text">Max. 500 characters</div>
            </div>
          </div>
          <div class="d-flex justify-content-end">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

Bootstrap doesn’t really use css grid anymore, and instead relies on flexbox for layouts. The row utility class initilizes a flexbox container via display: flex; and flex-wrap: wrap;.Not much grid going on here even though it’s still “visually” a two column layout similar to my tailwindcss contact form example.

A couple things I feel like I gave up by using Bootstrap in this example is the ability to push the label helper text to the right, and using css gap to help with spacing.

For the label helper text, I tried to create a flexbox container to push the text to the right like I did in the tailwind example but Bootstrap wasn’t having it. I ended up using their form-text class in a div under the input, which appears to be how bootstrap wants this to be done anyways. I did have to adjust for the extra space that form-text adds, which is why some elements don’t have the mb-3 utility class applied.

Not being able to use the css gap property wasn’t a huge deal. I likely could’ve got it working since browser support for flexbox gap is much better now, but I didn’t see any examples of its usage in the Bootstrap docs. Instead, I used Bootstrap mb-3 utility class to add space between some of the rows, which is equivalent to margin-bottom: 1rem;.

So, who is the winner here; Tailwindcss or Bootstrap? Well, I think Tailwindcss. And that’s 100% personal preference. It just felt easier to control everything. But, Bootstrap has a lot of things out of the box like forms and buttons that Tailwind doesn’t have. I guess it comes down to time and desire to customize.