Newsletter

Newsletter subscribtion form

The standard newsletter subscription form.

This example only provides the essentials of the form component. Making this subscription form fully functional requires some additional functionality. See the Basket example for more.

<aside class="mzp-c-newsletter">
  <div class="mzp-c-newsletter-image">
    <img src="../../../static/img/newsletter/newsletter-image.png"
     width="346" height="346" alt="">
  </div>

  <form id="newsletter-form" class="mzp-c-newsletter-form" name="newsletter-form"
   action="/path/to/handler/" method="post">
    <header class="mzp-c-newsletter-header">
      <h3 class="mzp-c-newsletter-title">Love the Web?</h3>
      <p class="mzp-c-newsletter-tagline">Get the Mozilla newsletter and help us keep it open and
        free.</p>
    </header>

    <fieldset class="mzp-c-newsletter-content">
      <div class="mzp-c-form-errors" id="newsletter-errors"></div>

      <p>
        <label for="email">Your email address</label>
        <input type="email" class="mzp-js-email-field" id="email" name="email"
         placeholder="yourname@example.com" required aria-required="true">
      </p>

      <div id="newsletter-details" class="mzp-c-newsletter-details">
        <p>
          <label for="country">Country</label>
          <select id="country" name="country" required aria-required="true">
            <option value="United States">United States</option>
            <option value="Germany">Germany</option>
            <option value="France">France</option>
            <option value="Spain">Spain</option>
            <option value="Japan">Japan</option>
            <option>And so on...</option>
          </select>
        </p>

        <p>
          <label for="language">Language</label>
          <select id="language" name="lang" required aria-required="true">
            <option value="English (US)">English (US)</option>
            <option value="Deutsch">Deutsch</option>
            <option value="Français">Français</option>
            <option value="Español">Español</option>
            <option value="日本語">日本語</option>
          </select>
        </p>

        <fieldset class="mzp-u-inline">
          <legend>Format</legend>
          <p>
            <label for="format-html" class="mzp-u-inline">
              <input type="radio" id="format-html" name="fmt" value="H" checked> HTML
            </label>
            <label for="format-text" class="mzp-u-inline">
              <input type="radio" id="format-text" name="fmt" value="T"> Text
            </label>
          </p>
        </fieldset>

        <p>
          <label for="privacy" class="mzp-u-inline">
            <input type="checkbox" id="privacy" name="privacy" required aria-required="true"> I’m okay with Mozilla handling my info as explained
            in <a href="https://www.mozilla.org/privacy/websites/">this Privacy Notice</a>
          </label>
        </p>
      </div>

      <p class="mzp-c-form-submit">
        <button type="submit" class="mzp-c-button" id="newsletter-submit">Sign up now</button>
        <span class="mzp-c-fieldnote">We will only send you Mozilla-related information.</span>
      </p>
    </fieldset>
  </form>

  <div id="newsletter-thanks" class="mzp-c-newsletter-thanks">
    <h3>Thanks!</h3>
    <p>If you haven’t previously confirmed a subscription to a Mozilla-related
      newsletter you may have to do so. Please check your inbox
      or your spam filter for an email from us.</p>
  </div>

</aside>

<script src="../../../assets/protocol/protocol/js/protocol-newsletter.js"></script>

Notes

  • Some newsletters are only available in one language, so don’t require a language selection.