Which Bootstrap version is this for?

Bootstrap 5. It uses form-label and spacing utilities rather than the form-group wrapper that v4 used. On v4 the form renders but the fields sit flush against each other.

Do I need Bootstrap's JavaScript bundle?

Not for the form to submit. You only need it for Bootstrap's own validation styling — and if you are not initialising it, remove the needs-validation class so native browser validation still shows.

How do I change the button colour?

Swap btn-primary for another contextual class, or override the primary colour in your Bootstrap build. Editing the button's inline styles defeats the point of using the framework.

Can I put two fields on one row?

Wrap them in div.row and give each col-md-6. They sit side by side from the medium breakpoint up and stack below it.

Bootstrap contact form

Stock Bootstrap 5 markup with no custom CSS at all. If your site already loads Bootstrap, this drops in and inherits your theme — including whatever you changed about the primary colour.

The rendered result. The code below is the source — it is not run inside this preview.

Replace YOUR_FORM_ID with a form of your own and this sends to your inbox.

Create your form

contact.html

<form action="https://submit.formpost.ai/YOUR_FORM_ID" method="POST" class="needs-validation">
  <h2 class="h4 mb-4">Contact us</h2>

  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name" name="name" required>
  </div>

  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" name="email" required>
    <div class="form-text">We will only use it to reply.</div>
  </div>

  <div class="mb-3">
    <label for="message" class="form-label">Message</label>
    <textarea class="form-control" id="message" name="message" rows="4" required></textarea>
  </div>

  <button type="submit" class="btn btn-primary w-100">Send message</button>
</form>

The classes doing the work

Class	On	Effect
form-control	input, textarea	Full width, padding, border, focus ring
form-label	label	Block display and the spacing above the field
form-text	helper div	Small muted note under a field
mb-3	field wrapper	The vertical rhythm between fields
btn btn-primary	button	Your theme's primary button

Bootstrap 5 dropped form-group

If you are copying markup from an older tutorial you will see div.form-group around each field. It no longer exists — v5 replaced it with spacing utilities, which is why the wrappers here are mb-3. Old markup will render, just without any gaps between fields, which is the usual symptom of a v4 snippet pasted into a v5 project.

Validation without the JavaScript bundle

The needs-validation class is part of Bootstrap's own validation script, which suppresses native browser messages and shows styled ones instead. If you are not initialising that script, remove the class — otherwise you get neither Bootstrap's messages nor the browser's, and a rejected field with no explanation.

Plain required attributes give you working browser validation with no JavaScript at all. Start there and add Bootstrap's version only if you want the styled messages.

Two columns, the Bootstrap way

<div class="row">
  <div class="col-md-6 mb-3"> ... first name ... </div>
  <div class="col-md-6 mb-3"> ... last name ... </div>
</div>

col-md-6 gives you side-by-side from the medium breakpoint up and stacked below it. Splitting the name into two fields means neither is called name any more, so set the notification subject in your form settings to pull both parts back together.

Questions about this contact form

Which Bootstrap version is this for?: Bootstrap 5. It uses form-label and spacing utilities rather than the form-group wrapper that v4 used. On v4 the form renders but the fields sit flush against each other.
Do I need Bootstrap's JavaScript bundle?: Not for the form to submit. You only need it for Bootstrap's own validation styling — and if you are not initialising it, remove the needs-validation class so native browser validation still shows.
How do I change the button colour?: Swap btn-primary for another contextual class, or override the primary colour in your Bootstrap build. Editing the button's inline styles defeats the point of using the framework.
Can I put two fields on one row?: Wrap them in div.row and give each col-md-6. They sit side by side from the medium breakpoint up and stack below it.