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.

  • 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/protocol-newsletter.js"></script>