Web Designer Wall

Snippets Contact form

Bootstrap 5 Contact Form with Map

A contact section pairing a map panel and address card with a floating-label message form and direct phone and email links.

Bootstrap 5 No jQuery Jun 2019 3.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1040px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-6 wdw-map position-relative">
          <svg class="wdw-map-svg" viewBox="0 0 600 700" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Stylised map showing our office location">
            <rect width="600" height="700" class="m-land"/>
            <path class="m-water" d="M-20 560 C 120 520 200 600 330 580 S 520 520 640 560 V 720 H -20Z"/>
            <path class="m-park" d="M40 70h150a20 20 0 0 1 20 20v110a20 20 0 0 1-20 20H40a20 20 0 0 1-20-20V90a20 20 0 0 1 20-20z"/>
            <path class="m-park" d="M400 380h150a20 20 0 0 1 20 20v70a20 20 0 0 1-20 20H400a20 20 0 0 1-20-20v-70a20 20 0 0 1 20-20z"/>
            <g class="m-road" fill="none" stroke-linecap="round">
              <path d="M-10 250 H 610" stroke-width="16"/>
              <path d="M-10 430 L 610 360" stroke-width="12"/>
              <path d="M240 -10 V 710" stroke-width="16"/>
              <path d="M420 -10 L 380 710" stroke-width="10"/>
              <path d="M90 -10 L 120 540" stroke-width="8"/>
              <path d="M-10 120 H 240" stroke-width="7"/>
              <path d="M240 330 H 610" stroke-width="7"/>
              <path d="M500 -10 V 360" stroke-width="7"/>
              <path d="M120 470 H 380" stroke-width="7"/>
            </g>
            <g class="wdw-mpin" transform="translate(240 250)">
              <circle r="46" class="m-halo"/>
              <circle r="22" class="m-halo2"/>
              <path d="M0 -4 C -18 -30 -22 -44 -22 -54 a22 22 0 0 1 44 0 c0 10 -4 24 -22 50z" transform="translate(0 4)" class="m-pin-body"/>
              <circle cy="-50" r="8" fill="#fff"/>
            </g>
          </svg>
          <div class="wdw-map-card wdw-card-sm p-3 d-flex align-items-center gap-3">
            <span class="wdw-icon">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z"/><circle cx="12" cy="9.5" r="2.5"/></svg>
            </span>
            <div class="flex-grow-1 min-w-0">
              <p class="fw-bold mb-0 text-body-emphasis">Piazza del Colosseo, 1</p>
              <p class="small wdw-muted mb-0">00184 Roma RM, Italy</p>
            </div>
            <a href="https://www.openstreetmap.org/search?query=Colosseo%20Roma" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary rounded-pill d-none d-sm-inline-flex">Directions</a>
          </div>
        </div>

        <div class="col-lg-6 p-4 p-lg-5">
          <span class="wdw-eyebrow">Contact</span>
          <h2 class="wdw-heading h2 mt-1 mb-2">Let's talk about your project</h2>
          <p class="wdw-muted mb-4">Send a message and we will reply within one working day.</p>
          <form id="wdwContactForm" novalidate>
            <div class="row g-3">
              <div class="col-sm-6">
                <div class="form-floating"><input type="text" class="form-control" id="cName" placeholder="Name" autocomplete="name" required><label for="cName">Name or company</label></div>
              </div>
              <div class="col-sm-6">
                <div class="form-floating"><input type="text" class="form-control" id="cSubject" placeholder="Subject" required><label for="cSubject">Subject</label></div>
              </div>
              <div class="col-sm-6">
                <div class="form-floating"><input type="email" class="form-control" id="cEmail" placeholder="Email" autocomplete="email" required><label for="cEmail">Email</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"><textarea class="form-control wdw-textarea" id="cMessage" placeholder="Message" required></textarea><label for="cMessage">How can we help?</label></div>
              </div>
              <div class="col-12">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="cTerms" required>
                  <label class="form-check-label small" for="cTerms">I agree to the privacy terms</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 class="small text-success fw-semibold" id="wdwContactMsg" role="status" hidden>Thanks, your message is on its way.</span>
              </div>
            </div>
          </form>
          <hr class="my-4">
          <ul class="list-unstyled row g-3 mb-0 small">
            <li class="col-sm-6 d-flex align-items-center gap-2"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" class="text-primary flex-none" 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-2z"/></svg><a href="tel:+39123456" class="link-body-emphasis link-underline-opacity-0">(+39) 123 456</a></li>
            <li class="col-sm-6 d-flex align-items-center gap-2"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" class="text-primary flex-none" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m3 7 9 6 9-6"/></svg><a href="mailto:[email protected]" class="link-body-emphasis link-underline-opacity-0">[email protected]</a></li>
          </ul>
        </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