Back to Contact
Contact

Contact with Map

#contact

Live preview

Source code

html
<div class="container py-5">
  <div class="row g-4">
    <div class="col-md-6">
      <h2 class="fw-bold">Get in touch</h2>
      <p class="text-muted">We reply within 24 hours.</p>
      <form>
        <div class="mb-3"><label class="form-label small fw-semibold">Your name</label><input class="form-control" placeholder="John Doe"></div>
        <div class="mb-3"><label class="form-label small fw-semibold">Email</label><input type="email" class="form-control" placeholder="you@example.com"></div>
        <div class="mb-3"><label class="form-label small fw-semibold">Message</label><textarea class="form-control" rows="4"></textarea></div><button class="btn btn-primary w-100">Send message</button>
      </form>
    </div>
    <div class="col-md-6">
      <div class="rounded-4 overflow-hidden border h-100"><iframe src="https://www.openstreetmap.org/export/embed.html?bbox=90.36%2C23.75%2C90.42%2C23.79&amp;layer=mapnik" style="width:100%;height:100%;min-height:400px;border:0" title="Location map"></iframe></div>
    </div>
  </div>
</div>

More designs in this section