Web Designer Wall

Snippets Contact form

Bootstrap 5 Contact Form with Floating Labels and Info Panel

A split contact section with an indigo info panel listing address, email, phone and social links beside a floating-label form that validates and confirms on submit.

Bootstrap 5 No jQuery Oct 2020 2.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 960px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <aside class="col-lg-5 wdw-aurora p-4 p-md-5 d-flex flex-column">
          <span class="wdw-eyebrow text-white-50">Contact</span>
          <h2 class="fw-bold mt-1 mb-3">Let's get in touch</h2>
          <p class="text-white-50 mb-4">Tell us about your project and we'll reply within one business day.</p>
          <ul class="list-unstyled d-grid gap-3 mb-4">
            <li class="d-flex align-items-center gap-3"><span class="ci"><i class="bi bi-geo-alt" aria-hidden="true"></i></span><span>240 Market Street, New York, USA</span></li>
            <li class="d-flex align-items-center gap-3"><span class="ci"><i class="bi bi-envelope" aria-hidden="true"></i></span><a href="mailto:[email protected]" class="text-white link-underline-opacity-0">[email protected]</a></li>
            <li class="d-flex align-items-center gap-3"><span class="ci"><i class="bi bi-telephone" aria-hidden="true"></i></span><a href="tel:+19895550198" class="text-white link-underline-opacity-0">+1 989 555 0198</a></li>
          </ul>
          <div class="mt-auto d-flex gap-2" role="group" aria-label="Social media">
            <a href="#" class="ci ci-link" aria-label="Facebook"><i class="bi bi-facebook" aria-hidden="true"></i></a>
            <a href="#" class="ci ci-link" aria-label="X"><i class="bi bi-twitter-x" aria-hidden="true"></i></a>
            <a href="#" class="ci ci-link" aria-label="Instagram"><i class="bi bi-instagram" aria-hidden="true"></i></a>
            <a href="#" class="ci ci-link" aria-label="LinkedIn"><i class="bi bi-linkedin" aria-hidden="true"></i></a>
          </div>
        </aside>
        <div class="col-lg-7 p-4 p-md-5">
          <h3 class="h4 fw-bold mb-4">Send us a message</h3>
          <form id="contact-form" novalidate>
            <div class="row g-3">
              <div class="col-sm-6 form-floating-wrap">
                <div class="form-floating"><input type="text" class="form-control" id="cf-name" placeholder="Name" autocomplete="name" required><label for="cf-name">Your name</label></div>
              </div>
              <div class="col-sm-6">
                <div class="form-floating"><input type="tel" class="form-control" id="cf-phone" placeholder="Phone" autocomplete="tel"><label for="cf-phone">Phone (optional)</label></div>
              </div>
              <div class="col-12">
                <div class="form-floating"><input type="email" class="form-control" id="cf-email" placeholder="Email" autocomplete="email" required><label for="cf-email">Email address</label><div class="invalid-feedback">Please enter a valid email.</div></div>
              </div>
              <div class="col-12">
                <div class="form-floating"><textarea class="form-control" id="cf-msg" placeholder="Message" style="height: 130px; min-height: 130px" required></textarea><label for="cf-msg">Message</label></div>
              </div>
              <div class="col-12 d-flex flex-wrap align-items-center gap-3">
                <button type="submit" class="btn btn-primary rounded-pill px-4">Send message <i class="bi bi-send" aria-hidden="true"></i></button>
                <span class="small text-success fw-semibold" id="cf-status" role="status" hidden>Thanks! We'll be in touch soon.</span>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More contact form snippets