Web Designer Wall

Snippets Contact form

Bootstrap 5 Contact Form with Details Panel

A split contact section with a brand panel for address, phone and email next to a floating-label form. The form validates on submit and confirms when sent.

Bootstrap 5 No jQuery Oct 2020 2.9K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1000px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-5 wdw-aurora p-4 p-lg-5 d-flex flex-column justify-content-between gap-4">
          <div>
            <span class="wdw-eyebrow text-white-50">Contact</span>
            <h1 class="display-6 fw-bold mt-2 mb-3">Get in touch</h1>
            <p class="text-white-50 mb-0">Ask for a quote, request a demo or tell us you would like to join the team. We reply within one working day.</p>
          </div>
          <ul class="list-unstyled d-grid gap-3 mb-0">
            <li class="d-flex gap-3 align-items-center"><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="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>102 Don Street, Riga</li>
            <li class="d-flex gap-3 align-items-center"><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="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/></svg><a class="link-light link-underline-opacity-0" href="tel:+021234567">+02 1234 567</a></li>
            <li class="d-flex gap-3 align-items-center"><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="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg><a class="link-light link-underline-opacity-0" href="mailto:[email protected]">[email protected]</a></li>
          </ul>
        </div>
        <div class="col-lg-7 p-4 p-lg-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="cName" placeholder="Your name" required autocomplete="name"><label for="cName">Your name</label></div>
              </div>
              <div class="col-sm-6">
                <div class="form-floating"><input type="tel" class="form-control" id="cPhone" placeholder="Phone" autocomplete="tel"><label for="cPhone">Phone (optional)</label></div>
              </div>
              <div class="col-12">
                <div class="form-floating"><input type="email" class="form-control" id="cMail" placeholder="Email" required autocomplete="email"><label for="cMail">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="cMsg" placeholder="Message" required style="height:140px;min-height:140px"></textarea><label for="cMsg">How can we help?</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</button>
                <span id="cStatus" class="small text-success fw-semibold" role="status"></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