Bootstrap 5Forms

Bootstrap 5 Contact Form

A Bootstrap 5 contact form is a structured HTML form component that collects user input — typically name, email, subject, and message — and submits it to a backend handler or third-party service. It uses Bootstrap's form control classes, grid layout, and validation utilities to produce an accessible, mobile-responsive form. Use it on any page where users need a direct channel to reach you: service pages, landing pages, support sections, or portfolio sites.

Primary Class

.contact-form

Common Use Cases

→A freelance designer's portfolio site where prospective clients submit project enquiries including budget range and timeline
→A SaaS product's support page where users report bugs or request features with a categorised subject dropdown
→A local restaurant or venue website where customers ask about private hire, bookings, or dietary requirements
→A B2B services company's 'Get a Quote' page that captures company name, role, and service interest before a sales call

Variants & Classes

Variant	Description	Classes
Contact Form Default	Standard contact form with Bootstrap's default styling.	`contact-form`
Contact Form Responsive	Responsive variant that adapts to different screen sizes.	`contact-form contact-form-responsive`

Code Example

<section class="py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-7">
        <h2 class="mb-1">Get in Touch</h2>
        <p class="text-muted mb-4">We typically respond within one business day.</p>
        <form novalidate>
          <div class="row g-3">
            <div class="col-sm-6">
              <label for="contactName" class="form-label">Full Name</label>
              <input type="text" class="form-control" id="contactName" placeholder="Jane Smith" required>
              <div class="invalid-feedback">Please enter your full name.</div>
            </div>
            <div class="col-sm-6">
              <label for="contactEmail" class="form-label">Email Address</label>
              <input type="email" class="form-control" id="contactEmail" placeholder="[email protected]" required>
              <div class="invalid-feedback">Please enter a valid email address.</div>
            </div>
            <div class="col-12">
              <label for="contactSubject" class="form-label">Subject</label>
              <select class="form-select" id="contactSubject" required>
                <option value="" disabled selected>Select a topic</option>
                <option value="general">General Enquiry</option>
                <option value="support">Technical Support</option>
                <option value="billing">Billing Question</option>
                <option value="partnership">Partnership Opportunity</option>
              </select>
              <div class="invalid-feedback">Please select a subject.</div>
            </div>
            <div class="col-12">
              <label for="contactMessage" class="form-label">Message</label>
              <textarea class="form-control" id="contactMessage" rows="5" placeholder="Tell us how we can help..." required></textarea>
              <div class="invalid-feedback">Please include a message.</div>
            </div>
            <div class="col-12">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="contactConsent" required>
                <label class="form-check-label text-muted" for="contactConsent">
                  I agree to the <a href="/privacy">Privacy Policy</a> and consent to being contacted.
                </label>
                <div class="invalid-feedback">You must agree before submitting.</div>
              </div>
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary px-4">Send Message</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Live Examples

Basic Contact Form

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated contact form with custom colours
✓Contact Form with interactive states
✓Responsive contact form for all screen sizes

Best Practices

Use novalidate + JavaScript for client-side validation

Add the `novalidate` attribute to your `<form>` tag and use Bootstrap's built-in validation styles by toggling the `was-validated` class on submit. This gives you full control over when error states appear rather than relying on inconsistent browser-native UI.

Limit fields to what you will actually act on

Every extra field reduces completion rates. If you only need name, email, and message to respond meaningfully, remove the subject dropdown — you can always ask follow-up questions once the conversation has started.

Pair textarea rows with a character counter

Set `rows="5"` on your `<textarea>` to communicate expected message length, and consider adding a lightweight JavaScript character counter beneath it using `form-text text-muted` — this reduces vague one-word submissions.

Include a consent checkbox for GDPR compliance

If your site serves EU users, a required `form-check` linking to your privacy policy is a legal requirement under GDPR Article 6. Bootstrap's validation states make it easy to block submission until the box is checked without custom CSS.

FAQ

How do I actually send contact form submissions — does Bootstrap handle that?

Bootstrap handles the visual layer only — it provides no backend logic. To process submissions you have three practical options: (1) point the form's `action` attribute at a server-side script (PHP `mail()`, Node.js with Nodemailer, etc.); (2) use a form-as-a-service like Formspree, Netlify Forms, or Basin by setting `action` to their endpoint URL and `method="POST"`; or (3) use `fetch()` in JavaScript to POST form data to your own API route. For most static sites, Formspree or Netlify Forms is the fastest path — you just swap out the `action` attribute and they handle delivery, spam filtering, and email forwarding.

How do I customise the form control focus colour to match my brand?

Bootstrap 5 form controls use a focus ring derived from `$primary` in Sass. If you're compiling Sass, override `$primary` before importing Bootstrap. If you're using the CDN, target the focus state directly in CSS: `.form-control:focus { border-color: #your-color; box-shadow: 0 0 0 0.25rem rgba(your-rgb, 0.25); }`. For the submit button, swap `btn-primary` for a custom utility class or override `--bs-btn-bg` and `--bs-btn-border-color` using Bootstrap 5's CSS custom properties on the button element itself.

How does Canvas Builder generate a contact form for my site?

When you describe a contact form in Canvas Builder — for example 'add a contact section with name, email, and message fields' — it generates fully structured Bootstrap 5 HTML using the Canvas template's existing colour variables and spacing scale. The output is production-ready: it includes proper `label` associations, `invalid-feedback` blocks for validation, and a responsive two-column layout on desktop that stacks to single-column on mobile. You can specify custom fields, a consent checkbox, or a particular button style in your prompt, and Canvas Builder will incorporate those details into the generated markup.