Bootstrap 5 Newsletter Form
A Newsletter Form in Bootstrap 5 is an inline or stacked email capture component used to collect subscriber email addresses, typically paired with a submit button and optional consent checkbox. It combines Bootstrap's form controls, grid utilities, and button classes to create a compact, conversion-focused UI block. Use it in page footers, hero sections, blog sidebars, or dedicated landing sections where you want to grow an email list.
Primary Class
.newsletter-formCommon Use Cases
- →A SaaS product footer that captures emails for product update announcements and changelog notifications
- →An e-commerce site offering a 10% discount code in exchange for signing up to a weekly deals newsletter
- →A developer blog sidebar collecting subscribers who want new tutorial posts delivered directly to their inbox
- →A pre-launch landing page building a waitlist before a product goes live, with a single email field and CTA button
Variants & Classes
| Variant | Description |
|---|---|
| Newsletter Form Default | Standard newsletter form with Bootstrap's default styling. |
| Newsletter Form Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<section class="bg-dark text-white py-5">
<div class="container">
<div class="row justify-content-center text-center mb-4">
<div class="col-lg-6">
<h2 class="fw-bold">Stay in the loop</h2>
<p class="text-white-50">Get weekly tips on web development, design systems, and productivity — straight to your inbox. No spam, unsubscribe anytime.</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-6">
<form>
<div class="input-group mb-3">
<input
type="email"
class="form-control form-control-lg"
placeholder="Enter your email address"
aria-label="Email address"
aria-describedby="btn-subscribe"
required
/>
<button
class="btn btn-primary px-4"
type="submit"
id="btn-subscribe"
>
Subscribe
</button>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="consentCheck"
required
/>
<label class="form-check-label text-white-50 small" for="consentCheck">
I agree to receive marketing emails and accept the
<a href="/privacy" class="text-white">Privacy Policy</a>.
</label>
</div>
</form>
</div>
</div>
</div>
</section>Live Examples
Basic Newsletter Form
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated newsletter form with custom colours
- ✓Newsletter Form with interactive states
- ✓Responsive newsletter form for all screen sizes
Best Practices
Use input-group to keep the field and button on one line
Bootstrap's `.input-group` class binds the email input and submit button together visually without any custom CSS — add `.form-control-lg` and `.btn-lg` together for a more prominent call-to-action that performs better on landing pages.
Always include a GDPR consent checkbox
Add a `.form-check` with a `required` attribute directly below the input group — this keeps you legally compliant in the EU and builds subscriber trust without requiring a separate modal or page.
Use aria-label and aria-describedby for accessibility
Inline forms often omit visible labels, so set `aria-label` on the email input and `aria-describedby` pointing to the button's `id` — this ensures screen readers announce both the field purpose and the associated action.
Validate email format client-side with Bootstrap's built-in validation
Add the `novalidate` attribute to the `<form>` tag and trigger Bootstrap's validation with a short JS snippet that adds `.was-validated` on submit — this surfaces the native `.invalid-feedback` message ('Please enter a valid email address.') without any third-party library.