Back to Contact
Contact

Split Contact Form

Form on the left, info on the right.

#contact#form

Live preview

Source code

html
<section class="py-5 bg-light">
  <div class="container py-4">
    <div class="row g-4">
      <div class="col-lg-7">
        <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5">
          <h3 class="fw-bold mb-4">Send us a message</h3>
          <form class="row g-3">
            <div class="col-md-6"><input class="form-control" placeholder="Name"></div>
            <div class="col-md-6"><input class="form-control" placeholder="Email"></div>
            <div class="col-12"><input class="form-control" placeholder="Subject"></div>
            <div class="col-12"><textarea class="form-control" rows="5" placeholder="Message"></textarea></div>
            <div class="col-12"><button class="btn btn-primary px-4">Send Message</button></div>
          </form>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="card border-0 shadow-sm rounded-4 p-4 h-100">
          <h5 class="fw-bold mb-4">Get in touch</h5>
          <p class="d-flex align-items-start"><i class="bi bi-geo-alt-fill text-primary me-3 fs-5"></i>123 Innovation Ave, New York</p>
          <p class="d-flex align-items-start"><i class="bi bi-envelope-fill text-primary me-3 fs-5"></i>info@codeshikhi.com</p>
          <p class="d-flex align-items-start"><i class="bi bi-telephone-fill text-primary me-3 fs-5"></i>01987733320</p>
        </div>
      </div>
    </div>
  </div>
</section>

More designs in this section