components/newsletter/newsletter.html

<aside class="mzp-c-newsletter">
  <div class="mzp-c-newsletter-image">
    <img src="{{ '/img/newsletter-image.png' | path }}" width="346" height="346" alt="">
  </div>

  <form id="newsletter-form" class="mzp-c-newsletter-form" action="https://basket.mozilla.org/news/subscribe/" method="post">
    <!-- The value for the source_url field below should match the URL of your page where the newsletter form appears-->
    <input type="hidden" name="source_url" value="https://www.mozilla.org/">

    <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 hidden" id="newsletter-errors">
        <ul class="mzp-u-list-styled">
          <li class="error-email-invalid hidden">
            Please enter a valid email address
          </li>
          <li class="error-select-country hidden">
            Please select a country or region
          </li>
          <li class="error-select-language hidden">
            Please select a language
          </li>
          <li class="error-newsletter-checkbox hidden">
            Please check at least one of the newsletter options.
          </li>
          <li class="error-privacy-policy hidden">
            You must agree to the privacy notice
          </li>
          <li class="error-try-again-later hidden">
            We are sorry, but there was a problem with our system. Please try again later!
          </li>
        </ul>
      </div>

      <label for="id_email">Your email address:</label>
      <input type="email" id="id_email" name="email" required="" maxlength="320" placeholder="yourname@example.com" class="mzp-js-email-field">

      <div id="newsletter-details" class="mzp-c-newsletter-details">
        {% render '@select', { label: 'Country', name: 'country', required: True, id: 'id_country', options: '@newsletter.options' } %}
        {% render '@select', { required: True, id: 'id_lang' }, true %}

        <fieldset class="mzp-u-inline">
          <legend>I want information about:</legend>
          <p>
            <label for="id_newsletters_0" class="mzp-u-inline">
              <input type="checkbox" name="newsletters" value="mozilla-foundation" id="id_newsletters_0" checked> Mozilla Foundation
            </label>

            <label for="id_newsletters_1" class="mzp-u-inline">
              <input type="checkbox" name="newsletters" value="mozilla-and-you" id="id_newsletters_1" checked> Firefox
            </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 hidden">
    <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="{{ '/protocol/js/newsletter.js' | path }}"></script>
<script>
const successCustomCallback = () => {
  console.log('Form success');
};

const errorCustomCallback = (msg) => {
  if (msg) {
    console.log(msg);
  }
};

window.MzpNewsletter.init(successCustomCallback, errorCustomCallback);
</script>