Web Designer Wall

Snippets Newsletter

Bootstrap 5 Newsletter Sign-up Styles

A newsletter sign-up shown in three styles (split photo, minimal and spotlight) with validation, and a button that reacts as the cursor approaches.

Bootstrap 5 No jQuery Jul 2019 2K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 960px">
    <div class="text-center mb-4">
      <span class="wdw-eyebrow">Newsletter sign-up</span>
      <h2 class="wdw-heading h3 mt-1 mb-3">Three ways to ask for an email</h2>
      <div class="nl-seg d-inline-flex p-1 rounded-pill bg-body border" role="tablist" aria-label="Newsletter style">
        <button type="button" class="btn btn-sm rounded-pill px-3 active" role="tab" aria-selected="true" aria-controls="nl-1" id="nlt-1" data-nl="1">Split photo</button>
        <button type="button" class="btn btn-sm rounded-pill px-3" role="tab" aria-selected="false" aria-controls="nl-2" id="nlt-2" data-nl="2" tabindex="-1">Minimal</button>
        <button type="button" class="btn btn-sm rounded-pill px-3" role="tab" aria-selected="false" aria-controls="nl-3" id="nlt-3" data-nl="3" tabindex="-1">Spotlight</button>
      </div>
    </div>

    <!-- Style 1 -->
    <div class="nl-panel" id="nl-1" role="tabpanel" aria-labelledby="nlt-1">
      <div class="wdw-card overflow-hidden"><div class="row g-0">
        <div class="col-md-6 p-4 p-md-5 d-flex flex-column justify-content-center">
          <span class="wdw-eyebrow">The Night Tour</span>
          <h3 class="wdw-heading h2 mt-1 mb-2">Be first in line for tickets.</h3>
          <p class="wdw-muted mb-4">Presale codes, new dates and the occasional surprise show, straight to your inbox.</p>
          <form class="nl-form" novalidate>
            <label for="nlE1" class="visually-hidden">Email address</label>
            <div class="input-group">
              <input type="email" id="nlE1" class="form-control rounded-start-pill ps-4" placeholder="Email address" autocomplete="email" required>
              <button class="btn btn-primary rounded-end-pill px-4 nl-btn" type="submit">Sign up</button>
            </div>
            <p class="small mt-2 mb-0 nl-msg" role="status" aria-live="polite"></p>
          </form>
        </div>
        <div class="col-md-6 nl-photo" role="img" aria-label="DJ mixing on a turntable under purple stage lights"></div>
      </div></div>
    </div>

    <!-- Style 2 -->
    <div class="nl-panel" id="nl-2" role="tabpanel" aria-labelledby="nlt-2" hidden>
      <div class="wdw-card p-4 p-md-5 text-center mx-auto" style="max-width: 640px">
        <span class="wdw-icon mb-3"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span>
        <h3 class="wdw-heading h2 mb-2">Sign up to the newsletter</h3>
        <p class="wdw-muted mb-4">New releases and tour news, once a month.</p>
        <form class="nl-form" novalidate>
          <div class="form-floating mb-3 text-start"><input type="email" id="nlE2" class="form-control" placeholder="Email address" autocomplete="email" required><label for="nlE2">Email address</label></div>
          <button class="btn btn-primary rounded-pill px-5 nl-btn" type="submit">Submit</button>
          <p class="small mt-3 mb-0 nl-msg" role="status" aria-live="polite"></p>
        </form>
      </div>
    </div>

    <!-- Style 3 -->
    <div class="nl-panel" id="nl-3" role="tabpanel" aria-labelledby="nlt-3" hidden>
      <div class="wdw-card wdw-aurora overflow-hidden nl-spot p-4 p-md-5 text-center">
        <h3 class="fw-bold display-6 mb-2 nl-title" style="letter-spacing:-.02em">Sign up to the newsletter</h3>
        <p class="opacity-75 mb-4">Move your cursor toward the button.</p>
        <form class="nl-form mx-auto" style="max-width: 460px" novalidate>
          <label for="nlE3" class="visually-hidden">Email address</label>
          <input type="email" id="nlE3" class="form-control form-control-lg rounded-pill text-center mb-3 border-0" placeholder="Email address" autocomplete="email" required>
          <button class="btn btn-light rounded-pill px-5 fw-bold nl-btn text-dark" type="submit">Submit</button>
          <p class="small mt-3 mb-0 nl-msg" role="status" aria-live="polite"></p>
        </form>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More newsletter snippets