On a successful submission the form is hidden and a “thank you” message is shown in its place.
<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 hidden" 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" id="newsletter-errors">
<ul class="mzp-u-list-styled">
<li class="error-email-invalid">
Please enter a valid email address
</li>
<li class="error-privacy-policy">
You must agree to the privacy notice
</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">
<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>