Web Designer Wall

Snippets Input

Bootstrap 5 Floating Label Contact Form

A two-column contact form with a brand panel, subject chips, floating-label fields and a confirmation state that replaces the form after sending.

Bootstrap 5 No jQuery Aug 2019 2.1K 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 justify-content-between gap-4">
          <div>
            <span class="wdw-eyebrow text-white-50 mb-2">Contact</span>
            <h1 class="fw-bold h2 text-white mb-2">Let's build something good</h1>
            <p class="mb-0 text-white-50">Tell us a little about your project. A real person replies within one working day.</p>
          </div>
          <ul class="list-unstyled d-grid gap-3 mb-0">
            <li class="d-flex align-items-center gap-3">
              <span class="wdw-icon" style="background:rgba(255,255,255,.16);color:#fff"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg></span>
              <span><span class="d-block small text-white-50">Email</span>[email protected]</span>
            </li>
            <li class="d-flex align-items-center gap-3">
              <span class="wdw-icon" style="background:rgba(255,255,255,.16);color:#fff"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/></svg></span>
              <span><span class="d-block small text-white-50">Phone</span>+1 (555) 014-2280</span>
            </li>
            <li class="d-flex align-items-center gap-3">
              <span class="wdw-icon" style="background:rgba(255,255,255,.16);color:#fff"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span>
              <span><span class="d-block small text-white-50">Reply time</span>Under 24 hours</span>
            </li>
          </ul>
        </aside>

        <div class="col-lg-7 p-4 p-md-5">
          <form id="floatForm" novalidate>
            <fieldset class="mb-4">
              <legend class="fs-6 fw-semibold mb-2">What is this about?</legend>
              <div class="d-flex flex-wrap gap-2">
                <input type="radio" class="btn-check" name="ffSubject" id="ffS1" value="project" checked>
                <label class="btn btn-outline-secondary btn-sm rounded-pill px-3" for="ffS1">New project</label>
                <input type="radio" class="btn-check" name="ffSubject" id="ffS2" value="support">
                <label class="btn btn-outline-secondary btn-sm rounded-pill px-3" for="ffS2">Support</label>
                <input type="radio" class="btn-check" name="ffSubject" id="ffS3" value="other">
                <label class="btn btn-outline-secondary btn-sm rounded-pill px-3" for="ffS3">Something else</label>
              </div>
            </fieldset>

            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="ffName" placeholder="What's your name?" autocomplete="name" required aria-describedby="ffNameErr">
              <label for="ffName">What's your name?</label>
              <div class="invalid-feedback" id="ffNameErr">Please tell us your name.</div>
            </div>
            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="ffEmail" placeholder="Your email" autocomplete="email" required aria-describedby="ffEmailErr">
              <label for="ffEmail">Your email</label>
              <div class="invalid-feedback" id="ffEmailErr">Enter a valid email address.</div>
            </div>
            <div class="form-floating mb-4">
              <textarea class="form-control" id="ffMsg" placeholder="What's your message?" required aria-describedby="ffMsgErr"></textarea>
              <label for="ffMsg">What's your message?</label>
              <div class="invalid-feedback" id="ffMsgErr">A short message helps us help you.</div>
            </div>
            <button type="submit" class="btn btn-primary rounded-pill w-100">Send message</button>
          </form>

          <div id="ffOk" class="text-center py-5 d-none" role="status" tabindex="-1">
            <span class="wdw-icon mb-3" style="width:3.5rem;height:3.5rem"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>
            <h2 class="wdw-heading h3 mb-2">Message sent</h2>
            <p class="wdw-muted mb-4">Thanks! We will get back to you within one working day.</p>
            <button type="button" class="btn btn-outline-secondary rounded-pill" id="ffReset">Send another message</button>
          </div>
        </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.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More input snippets