Newsletter

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

      <div>
        <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">
      </div>

      <div id="newsletter-details"
       class="mzp-c-newsletter-details">
        <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>

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

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