Mozilla Protocol
  • 19.1.0

Newsletter: Default

The standard newsletter subscription form.

This component provides both form styling and the functionality required to POST directly to Basket.

Note: the example form on this page is fully functional.

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();

You can also pass custom callbacks for both sign-up success and failure, which can be useful for things like analytics events.

const successCustomCallback = () => {
  // custom on success code
};

const errorCustomCallback = () => {
  // custom on error code
};

MzpNewsletter.init(successCustomCallback, errorCustomCallback);

Tips

  • Make sure to initialize the component after the DOM has loaded.
  • Both country and language fields are optional.
  • If there is only one newsletter, you can use a hidden input field for the newsletter ID instead of a checkbox.
  • Use success@example.com as the email to have the request return successfully but not actually record a subscription, and failure@example.com to always return failure.
  • The source_url hidden input field value should match the URL of the page where the newsletter form appears. This is used to attribute where the sign-up originated from.
<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" 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">

                <label for="id_country">Country</label>
                <select name="country" id="id_country">
                    <option value="us">United States</option>
                    <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>
                </select>

                <label for="id_lang">Language</label>
                <select name="language" id="id_lang">
                    <option value="en">English</option>
                    <option value="de">Deutsch</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>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"></script>
<script>
    const successCustomCallback = () => {
        console.log('Form success');
    };
    const errorCustomCallback = (msg) => {
        if (msg) {
            console.log(msg);
        }
    };
    window.MzpNewsletter.init(successCustomCallback, errorCustomCallback);
</script>