Web Designer Wall

Snippets Contact

Bootstrap 5 Contact Form with Floating Labels

A two-column contact form with floating labels, inline validation and a topic selector, beside a brand panel listing email, phone and address.

Bootstrap 5 No jQuery Jun 2020 2.4K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 1000px">
    <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 gap-4">
          <div>
            <span class="wdw-eyebrow text-white-50">Contact</span>
            <h1 class="fw-bold mt-2 mb-3" style="letter-spacing:-.02em">Let's talk about your project</h1>
            <p class="mb-0 text-white-50">Send a few details and we will get back to you within one working day.</p>
          </div>
          <ul class="list-unstyled d-flex flex-column gap-3 mt-auto mb-0">
            <li class="d-flex align-items-center gap-3">
              <span class="wdw-contact-ico"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span>
              [email protected]
            </li>
            <li class="d-flex align-items-center gap-3">
              <span class="wdw-contact-ico"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg></span>
              +1 (555) 012-3456
            </li>
            <li class="d-flex align-items-center gap-3">
              <span class="wdw-contact-ico"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s7-6 7-11a7 7 0 0 0-14 0c0 5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg></span>
              214 Mercer Street, New York
            </li>
          </ul>
        </aside>

        <div class="col-lg-7 p-4 p-md-5">
          <form id="contactForm" novalidate>
            <div class="row g-3">
              <div class="col-sm-6">
                <div class="form-floating">
                  <input type="text" class="form-control" id="cfName" placeholder="Your name" required autocomplete="name">
                  <label for="cfName">Your name</label>
                  <div class="invalid-feedback">Please tell us your name.</div>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-floating">
                  <input type="email" class="form-control" id="cfEmail" placeholder="Email" required autocomplete="email">
                  <label for="cfEmail">Email address</label>
                  <div class="invalid-feedback">Enter a valid email address.</div>
                </div>
              </div>
              <div class="col-12">
                <div class="form-floating">
                  <select class="form-select" id="cfTopic" aria-label="Topic">
                    <option>New project</option><option>Support</option><option>Partnership</option>
                  </select>
                  <label for="cfTopic">Topic</label>
                </div>
              </div>
              <div class="col-12">
                <div class="form-floating">
                  <textarea class="form-control wdw-textarea" id="cfMessage" placeholder="Message" required minlength="10"></textarea>
                  <label for="cfMessage">How can we help?</label>
                  <div class="invalid-feedback">Write at least a short message (10 characters).</div>
                </div>
              </div>
              <div class="col-12 d-flex flex-wrap align-items-center justify-content-between gap-3">
                <small class="wdw-muted">We reply within one working day.</small>
                <button type="submit" class="btn btn-primary rounded-pill px-4">Send message</button>
              </div>
              <div class="col-12"><div id="cfStatus" class="alert alert-success d-none mb-0" role="status">Thanks, your message is on its way.</div></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 snippets