Web Designer Wall

Snippets Form

Bootstrap 5 Contact Form with Validation and Info Panel

A contact section with a validated message form beside a brand panel listing address, phone and email. Fields use floating labels and show inline errors on submit.

Bootstrap 5 No jQuery Apr 2020 2.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1040px">
    <div class="row g-4 align-items-stretch">
      <div class="col-lg-8">
        <form class="wdw-card p-4 p-md-5 h-100" id="contactForm" novalidate>
          <span class="wdw-eyebrow mb-2">Contact</span>
          <h2 class="wdw-heading h2 mb-1">Get in touch</h2>
          <p class="wdw-muted mb-4">Tell us about your project and we will reply within one business day.</p>
          <div class="row g-3">
            <div class="col-md-6 form-floating">
              <input type="text" class="form-control" id="cName" placeholder="Name" autocomplete="name" required>
              <label for="cName" class="ms-2">Name</label>
              <div class="invalid-feedback">Please tell us your name.</div>
            </div>
            <div class="col-md-6 form-floating">
              <input type="tel" class="form-control" id="cPhone" placeholder="Phone" autocomplete="tel" pattern="[0-9+()\s\-]{7,}">
              <label for="cPhone" class="ms-2">Phone (optional)</label>
              <div class="invalid-feedback">Enter a valid phone number.</div>
            </div>
            <div class="col-md-6 form-floating">
              <input type="email" class="form-control" id="cEmail" placeholder="Email" autocomplete="email" required>
              <label for="cEmail" class="ms-2">Email</label>
              <div class="invalid-feedback">Enter a valid email address.</div>
            </div>
            <div class="col-md-6 form-floating">
              <input type="text" class="form-control" id="cSubject" placeholder="Subject" required>
              <label for="cSubject" class="ms-2">Subject</label>
              <div class="invalid-feedback">Add a short subject.</div>
            </div>
            <div class="col-12 form-floating">
              <textarea class="form-control" id="cMessage" placeholder="Message" style="height:9rem" minlength="10" required></textarea>
              <label for="cMessage" class="ms-2">Message</label>
              <div class="invalid-feedback">Write at least 10 characters.</div>
            </div>
          </div>
          <div class="d-flex align-items-center gap-3 mt-4 flex-wrap">
            <button class="btn btn-primary rounded-pill px-4" type="submit">Send message</button>
            <span id="contactOk" class="text-success fw-semibold d-none" role="status">Thanks, your message was sent.</span>
          </div>
        </form>
      </div>
      <div class="col-lg-4">
        <aside class="wdw-card wdw-aurora p-4 p-md-5 h-100 d-flex flex-column gap-4 border-0">
          <h2 class="h4 fw-bold mb-0">Contact info</h2>
          <ul class="list-unstyled d-grid gap-4 mb-0">
            <li class="d-flex gap-3">
              <span class="contact-ico"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.500C5 14.800 12 21 12 21z"/><circle cx="12" cy="9.500" r="2.500"/></svg></span>
              <div><strong class="d-block">123 Any Street</strong><span class="opacity-75 small">2nd Floor, Delhi, India 110021</span></div>
            </li>
            <li class="d-flex gap-3">
              <span class="contact-ico"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.500 1.500a11 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-2z"/></svg></span>
              <div><strong class="d-block">Call us</strong><span class="opacity-75 small">+91 1234 123 123</span></div>
            </li>
            <li class="d-flex gap-3">
              <span class="contact-ico"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>
              <div><strong class="d-block">Mail us</strong><a href="mailto:[email protected]" class="text-white opacity-75 small">[email protected]</a></div>
            </li>
          </ul>
        </aside>
      </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 Form snippets