Bootstrap 5 contact forms are essential for any business or portfolio website. This page covers 4 contact form layouts — basic, card, split panel and floating label — each ready to integrate with your backend.
Quick Setup
Contact forms need only Bootstrap 5 CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Classes Reference
| Class | What It Does |
|---|---|
.form-control | Styles all inputs and textarea |
.form-label | Label above each input |
.form-select | Styled select dropdown |
.form-floating | Floating label wrapper |
.form-text | Helper text below input |
.row g-3 | Grid layout with gap for form fields |
rows="4" | Sets textarea height |
1. Basic Bootstrap 5 Contact Form
A clean contact form with name, email, subject and message fields.
2. Bootstrap 5 Contact Form in Card
Contact form inside a card with brand header and contact info section.
3. Bootstrap 5 Contact Form with Info Panel
Two column layout with contact information on the left and form on the right.
4. Bootstrap 5 Floating Label Contact Form
Contact form using Bootstrap 5.3 floating labels for a modern, clean look.
Frequently Asked Questions
Use the Fetch API with preventDefault: form.addEventListener('submit', async (e) => { e.preventDefault(); const data = new FormData(form); const res = await fetch('/api/contact', { method: 'POST', body: data }); if(res.ok) showSuccess(); }). Handle the form data on your server side.
Add a file input: <input type='file' class='form-control' name='attachment'>. For drag and drop upload use a styled div with dragover event listeners. On the backend use multipart/form-data parsing. Add accept attribute to restrict file types.
Add the reCAPTCHA script to your page head and add <div class='g-recaptcha' data-sitekey='YOUR_KEY'></div> before the submit button. On the server verify the g-recaptcha-response token using Google's siteverify API before processing the form.
Hide the form and show a success alert after submit: form.style.display = 'none'; successMessage.style.display = 'block'. Or use Bootstrap's alert component: <div class='alert alert-success d-none' id='successMsg'>Message sent!</div>. Toggle d-none class after successful submission.
Add a tel input with appropriate attributes: <input type='tel' class='form-control' placeholder='+1 (555) 000-0000' pattern='[+][0-9]{1,3}[0-9]{10}'>. Use the pattern attribute for basic validation. For international phone formatting consider a library like intl-tel-input.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.