Skip to content

A decade of Canvas, now with AI.

How it works
Bootstrap 5Forms

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.

Bootstrap class

No dedicated Bootstrap class

Common 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 and classes

VariantDescription and classes
Inline input and buttonEmail field and subscribe button joined.input-group + form-control + btn
Stacked on mobileField above the button on small screens.d-grid gap-2
Dark bandFull-width signup strip with large controls.bg-dark text-white py-5 + form-control-lg
Consent checkboxExplicit opt-in under the field.form-check + form-check-input

Code example

HTML
<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

Example 1

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

  • 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.

FAQ

How do I make the newsletter form stack vertically on mobile but stay inline on desktop?
Use Bootstrap's .input-group for the inline layout and override it with a media query below md breakpoint, or switch to a stacked layout by wrapping the input and button in separate .col-12 and .col-md-auto columns inside a .row.g-2. This gives you a full-width input on small screens and a side-by-side layout on medium screens and above without any custom CSS.
How can I customise the button colour and input border to match my brand?
Override Bootstrap's CSS custom properties at the :root level. Set --bs-primary to your brand hex value to update the button and focus ring simultaneously. For the input border on focus, override --bs-input-focus-border-color. If you're using Sass, update $primary in your variables file before importing Bootstrap so every component inherits the change consistently.
How does Canvas Builder generate a Newsletter Form component?
When you describe a newsletter section in Canvas Builder, it outputs a fully structured Bootstrap 5 HTML block (including the .input-group, consent checkbox, and section wrapper) pre-filled with your brand's primary colour applied to the subscribe button and any heading styles matching your site's typography tokens. The output is responsive by default and production-ready, so you can drop it directly into your Canvas HTML template without modification.