Mozilla Protocol
  • 16.1.0

Newsletter: Default

The standard newsletter subscription form.

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

Usage

Import using Webpack as an ES module:

import MzpNewsletter from '@mozilla-protocol/core/protocol/js/newsletter';

Import using Webpack as CommonJS:

const MzpNewsletter = require('@mozilla-protocol/core/protocol/js/newsletter');

Import as a global variable via a <script> tag:

const MzpNewsletter = window.MzpNewsletter;

You can then initialize the component using init().

MzpNewsletter.init();

Tips

  • Make sure to initialize the component after the DOM has loaded.
  • Some newsletters are only available in one language, so don’t require a language selection.
<aside class="mzp-c-newsletter">
    <div class="mzp-c-newsletter-image">
        <img src="../../img/newsletter-image.png" width="346" height="346" alt="">
    </div>

    <form id="newsletter-form" class="mzp-c-newsletter-form" name="newsletter-form" action="#" method="">
        <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>
                <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</label>
                <select name="country" id="">
                    <option value="DE">Germany</option>
                    <option value="FR">France</option>
                    <option value="IN">India</option>
                    <option value="JP">Japan</option>
                    <option value="ES">Spain</option>
                    <option value="US">United States</option>
                    <option value="">And so on…</option>
                </select>

                <label for="language">Language</label>
                <select name="language" id="language">
                    <option value="de">Deutsch</option>
                    <option value="en">English</option>
                    <option value="es">Español</option>
                    <option value="fr">Français</option>
                    <option value="hi-IN">हिन्दी (भारत)</option>
                    <option value="ja">日本語</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="../../protocol/js/newsletter.js"></script>
<script>
    window.MzpNewsletter.init();
</script>