Bootstrap 4 Contact Form Build a simple and working contact form with Bootstrap 4

In this post you''ll see how you can build a simple yet working form using only HTML5 and Bootstrap classes. No CSS will be necessary!

Using Bootstrap 4 you can build custom components quickly and easily by applying the Bootstrap classes.  Did you want to learn how to build modern and responsive components for your projects?  Bootstrap makes it easy and this post will show you how to build a simple contact form.

At the end, your contact form should look like this:

https://codepen.io/BlackNina/pen/MxoVqv?editors=1000

1. Setup Bootstrap 4

In order for us to start coding in the bootstrap framework, we first need to link the relevant files to our project so that we can make use of all the default bootstrap styles.

For the beginning, open your text editor, I personally prefer VS Code as I love its powerful extensions, and create a new project. Create files index.html and style.css.

CSS

Include this link in your project between head tags:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

2. Building the contact form

Copy and paste the following code in your index.html file

<section class="resume-section p-4 p-lg-5 text-center" id="contact">
        <div class="my-auto">
          <h2 class="mb-4">< Contact Information ></h2>

          <ul class="fa-ul mb-4 ml-0">
            <li id="mail-address">
<!--               Replace with your email address -->
                <i class="fas fa-envelope-open mr-2 contact-icons"></i
                >youremail@mail.com</a
              >
            </li>
            <li>
              <i class="fas fa-mobile-alt mr-2 contact-icons"></i>+48 888 888
            </li>
            <li>
              <i class="fas fa-map-marker-alt mr-2 contact-icons"></i>Athens, GR
            </li>
          </ul>

          <p>
            ...or leave your message below and I will be back to you as soon as
            possible.
          </p>

          <form
            class="contact-form d-flex flex-column align-items-center"
            action="https://formspree.io/youremail@mail.com"
            method="POST"
          >
            <div class="form-group w-75">
              <input
                type="name"
                class="form-control"
                placeholder="Name"
                name="name"
                required
              />
            </div>
            <div class="form-group w-75">
              <input
                type="email"
                class="form-control"
                placeholder="Email"
                name="name"
                required
              />
            </div>

            <div class="form-group w-75">
              <textarea
                class="form-control"
                type="text"
                placeholder="Message"
                rows="7"
                name="name"
                required
              ></textarea>
            </div>

            <button type="submit" class="btn btn-submit btn-info w-75">Submit</button>
          </form>
        </div>
      </section>

Copy and paste the following script right before the </body> closing tag to use the Font Awesome icons:

<script
      defer
      src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"
      integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP"
      crossorigin="anonymous"
    ></script>

As you can see above, I have used Bootstrap utilities to customize some elements instead of using CSS. For example class w-75 sets the width of the form fields to 75%. Class btn-info is responsible for the petrol blue color of our submit button. In fact, we have really many choices among the Bootstrap utilities to customize our elements. without the use of CSS.

You can read more about Bootstrap classes and utilities on its official documentation.

I used Formspree to make the contact form to work. No PHP, JS, or registration needed. You just need to replace youremail@mail.com with your email address to receive the submissions.

Thanks for reading! I hope this helps. If you have any feedback or suggestions, I would be glad to talk to you in the comments.