Bootstrap 4 Contact form

Bootstrap 4 Contact form component

Bootstrap contact forms are components designed to collect users info in exchange for providing them information, promotions and content usually by emails.

Basic Bootstrap 4 version

Show code Edit in sandbox

HTML

        
            
<!--Section: Contact v.2-->
<section class="mb-4">

  <!--Section heading-->
  <h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
  <!--Section description-->
  <p class="text-center w-responsive mx-auto mb-5">Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within
      a matter of hours to help you.</p>

  <div class="row">

      <!--Grid column-->
      <div class="col-md-9 mb-md-0 mb-5">
          <form id="contact-form" name="contact-form" action="mail.php" method="POST">

              <!--Grid row-->
              <div class="row">

                  <!--Grid column-->
                  <div class="col-md-6">
                      <div class="md-form mb-0">
                          <input type="text" id="name" name="name" class="form-control">
                          <label for="name" class="">Your name</label>
                      </div>
                  </div>
                  <!--Grid column-->

                  <!--Grid column-->
                  <div class="col-md-6">
                      <div class="md-form mb-0">
                          <input type="text" id="email" name="email" class="form-control">
                          <label for="email" class="">Your email</label>
                      </div>
                  </div>
                  <!--Grid column-->

              </div>
              <!--Grid row-->

              <!--Grid row-->
              <div class="row">
                  <div class="col-md-12">
                      <div class="md-form mb-0">
                          <input type="text" id="subject" name="subject" class="form-control">
                          <label for="subject" class="">Subject</label>
                      </div>
                  </div>
              </div>
              <!--Grid row-->

              <!--Grid row-->
              <div class="row">

                  <!--Grid column-->
                  <div class="col-md-12">

                      <div class="md-form">
                          <textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
                          <label for="message">Your message</label>
                      </div>

                  </div>
              </div>
              <!--Grid row-->

          </form>

          <div class="text-center text-md-left">
              <a data-mdb-ripple-init class="btn btn-primary" onclick="document.getElementById('contact-form').submit();">Send</a>
          </div>
          <div class="status"></div>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-md-3 text-center">
          <ul class="list-unstyled mb-0">
              <li><i class="fas fa-map-marker-alt fa-2x"></i>
                  <p>San Francisco, CA 94126, USA</p>
              </li>

              <li><i class="fas fa-phone mt-4 fa-2x"></i>
                  <p>+ 01 234 567 89</p>
              </li>

              <li><i class="fas fa-envelope mt-4 fa-2x"></i>
                  <p>contact@mdbootstrap.com</p>
              </li>
          </ul>
      </div>
      <!--Grid column-->

  </div>

</section>
<!--Section: Contact v.2-->

Above is an example template for a Contact form in the Bootstrap 4 version based on jQuery. V4 is an older version of Bootstrap and we discourage implementing it in new projects.

Below you will find the same component but in the latest, more modern Bootstrap 5. We encourage you to use the v5 version instead, the v5 is more lightweight, more reliable and based on pure JavaScript instead of jQuery.

This page only compares the two version, you can find full documentation - with multiple options & API details via one of the links below:
Bootstrap v5 - full documentation Bootstrap v4 - full documentation

Basic Bootstrap 5 version

Show code Edit in sandbox

HTML

        
            
      <form id="contact-form" action="mail.php" method="POST">
        <h2>Contact us</h2>
      
        <!-- Name input -->
        <div data-mdb-input-init class="form-outline mb-4">
          <input type="text" id="name" name="name" class="form-control" />
          <label class="form-label" for="name">Name</label>
        </div>
      
        <!-- Email input -->
        <div data-mdb-input-init class="form-outline mb-4">
          <input type="email" id="email" name="email" class="form-control" />
          <label class="form-label" for="email">Email address</label>
        </div>
      
        <!-- Subject input -->
        <div data-mdb-input-init class="form-outline mb-4">
          <input type="text" id="subject" name="subject" class="form-control" />
          <label class="form-label" for="subject">Subject</label>
        </div>
      
        <!-- Message input -->
        <div data-mdb-input-init class="form-outline mb-4">
          <textarea class="form-control" id="message" name="message" rows="4"></textarea>
          <label class="form-label" for="message">Message</label>
        </div>
      
        <!-- Submit button -->
        <button data-mdb-button-init id="submit-form" type="submit" data-mdb-ripple-init class="btn btn-primary btn-block mb-4">
          Send
        </button>
      </form>