Web Designer Wall

Snippets Contact form

Bootstrap 5 Contact Form with Expandable Panel

A dark footer panel with social links and a contact form that expands and collapses from a single button.

Bootstrap 5 No jQuery May 2019 2.4K views 

<section class="wdw-stage">
  <div class="container" style="max-width:760px">
    <footer class="wdw-aurora contact-panel rounded-5 p-4 p-md-5 text-center overflow-hidden">
      <div class="position-relative">
        <span class="small text-uppercase fw-bold opacity-75" style="letter-spacing:.08em">Say hello</span>
        <h1 class="h2 fw-bold mt-2 mb-4">Have a project in mind?</h1>
        <button type="button" class="btn btn-light rounded-pill px-4 fw-bold contact-toggle" data-bs-toggle="collapse" data-bs-target="#contactPanel" aria-expanded="true" aria-controls="contactPanel">
          <span class="contact-label">Hide form</span>
          <svg class="contact-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <ul class="list-unstyled d-flex justify-content-center gap-2 my-4 contact-social">
          <li><a href="#" aria-label="Instagram"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".6" fill="currentColor"/></svg></a></li>
          <li><a href="#" aria-label="LinkedIn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg></a></li>
          <li><a href="#" aria-label="GitHub"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21"/></svg></a></li>
          <li><a href="#" aria-label="Email"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></a></li>
        </ul>
        <div class="collapse show text-start" id="contactPanel">
          <form class="contact-form row g-3 p-3 p-md-4 rounded-4" novalidate>
            <div class="col-sm-6"><label for="cf-name" class="form-label small fw-semibold">Your name</label><input type="text" id="cf-name" class="form-control" placeholder="Jane Doe" required autocomplete="name"></div>
            <div class="col-sm-6"><label for="cf-email" class="form-label small fw-semibold">Email</label><input type="email" id="cf-email" class="form-control" placeholder="[email protected]" required autocomplete="email"></div>
            <div class="col-12"><label for="cf-msg" class="form-label small fw-semibold">Message</label><textarea id="cf-msg" class="form-control" rows="3" placeholder="Tell me a bit about your project…" required></textarea></div>
            <div class="col-12 d-flex align-items-center gap-3 flex-wrap">
              <button type="submit" class="btn btn-primary rounded-pill px-4">Send message</button>
              <span class="small cf-status" role="status"></span>
            </div>
          </form>
        </div>
      </div>
    </footer>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More contact form snippets