web/wp-content/themes/mozilla-builders/blocks/mozilla-newsletter-signup-form/mozilla-newsletter-signup-form.twig

<section class="mzp-c-newsletter mt-16 pt-3 border-t">

    <form id="newsletter-form" class="mzp-c-newsletter-form md:grid md:grid-cols-24 gap-x-grid-site-gutter" 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="{{ current_url }}">

        <header class="mzp-c-newsletter-header md:col-span-10 max-md:mb-6">
            <h2 class="mzp-c-newsletter-title type-sans-md uppercase leading-tighter">{{ heading ?: 'Love the Web?' }}</h2>
            <p class="mzp-c-newsletter-tagline mt-3">{{ description ?: 'Get the Mozilla newsletter and help us keep it open and free.' }}</p>
        </header>

        <fieldset class="mzp-c-newsletter-content md:col-start-13 md:col-span-12 lg:col-start-15 lg:col-span-10">
            <div class="mzp-c-form-errors hidden" id="newsletter-errors">
                <ul class="mzp-u-list-styled">
                    <li class="error-email-invalid hidden border p-4 border-orange-dark mb-4">
                        Please enter a valid email address
                    </li>
                    <li class="error-select-country hidden border p-4 border-orange-dark mb-4">
                        Please select a country or region
                    </li>
                    <li class="error-select-language hidden border p-4 border-orange-dark mb-4">
                        Please select a language
                    </li>
                    <li class="error-newsletter-checkbox hidden border p-4 border-orange-dark mb-4">
                        Please check at least one of the newsletter options.
                    </li>
                    <li class="error-privacy-policy hidden border p-4 border-orange-dark mb-4">
                        You must agree to the privacy notice
                    </li>
                    <li class="error-try-again-later hidden border p-4 border-orange-dark mb-4">
                        We are sorry, but there was a problem with our system. Please try again later!
                    </li>
                </ul>
            </div>

            <label for="id_email" class="block">Your email address:</label>
            <input type="email" id="id_email" name="email" required="" maxlength="320" placeholder="yourname@example.com" class="mzp-js-email-field type-sans-sm type-content bg-main mt-2 flex w-full px-5 py-10 text-content border-none transition-shadow shadow-inner shadow-content focus:shadow-inner-thick focus:shadow-content focus:outline-0">

            <div id="newsletter-details" class="mzp-c-newsletter-details">

                <label for="id_country" class="block mt-6">Country</label>
                <div class="relative before:content-[''] before:block before:shrink-0 before:bg-current before:mask-arrow-down before:size-8 before:absolute before:right-5 before:bottom-1/2 before:translate-y-2/4 before:pointer-events-none">
                    <select name="country" id="id_country" class="type-sans-sm type-content bg-main mt-2 flex w-full px-5 py-10 text-content border-none transition-shadow shadow-inner shadow-content focus:shadow-inner-thick focus:shadow-content focus:outline-0 appearance-none">
                        <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>
                </div>

                <label for="id_lang" class="block mt-6">Language</label>
                <div class="relative before:content-[''] before:block before:shrink-0 before:bg-current before:mask-arrow-down before:size-8 before:absolute before:right-5 before:bottom-1/2 before:translate-y-2/4 before:pointer-events-none">
                    <select name="language" id="id_lang" class="type-sans-sm type-content bg-main mt-2 flex w-full px-5 py-10 text-content border-none transition-shadow shadow-inner shadow-content focus:shadow-inner-thick focus:shadow-content focus:outline-0 appearance-none">
                        <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>
                </div>

                <fieldset class="mzp-u-inline mt-6 hidden">
                    <legend>I want information about:</legend>
                    <p class="flex max-sm:flex-col gap-0.5 sm:gap-2 mt-2">
                        <label for="id_newsletters_0" class="mzp-u-inline sm:w-1/2 font-bold relative flex items-center hocus:cursor-pointer pl-[70px] min-h-[60px]">
                            <input type="checkbox" name="newsletters" value="mozilla-builder" id="id_newsletters_0" class="appearance-none peer" checked> Mozilla Builders
                            <span class="absolute left-0 top-0 size-[60px] transition-shadow shadow-inner shadow-content peer-focus:shadow-inner-thick peer-focus:shadow-content focus:outline-0 after:hidden after:w-[20px] after:h-[35px] after:absolute after:block after:top-[5px] after:left-[20px] after:border-content after:border-t-0 after:border-r-[3px] after:border-b-[3px] after:border-l-0 after:rotate-45 peer-checked:after:block"></span>
                        </label>
                    </p>
                </fieldset>

                <p class="mt-6">
                    <label for="privacy" class="mzp-u-inline relative flex items-center hocus:cursor-pointer pl-[70px] min-h-[60px]">
                        <input type="checkbox" id="privacy" name="privacy" class="appearance-none peer" required aria-required="true">
                        <span>I’m okay with Mozilla handling my info as explained in <a href="https://www.mozilla.org/privacy/websites/" class="underline hocus:no-underline">this Privacy Notice</a></span>
                        <span class="absolute left-0 top-0 size-[60px] transition-shadow shadow-inner shadow-content peer-focus:shadow-inner-thick peer-focus:shadow-content focus:outline-0 after:hidden after:w-[20px] after:h-[35px] after:absolute after:top-[5px] after:left-[20px] after:border-content after:border-t-0 after:border-r-[3px] after:border-b-[3px] after:border-l-0 after:rotate-45 peer-checked:after:block"></span>
                    </label>
                </p>
            </div>

            <p class="mzp-c-form-submit mt-6">
                <button type="submit" class="mzp-c-button w-full p-10 uppercase text-center text-action-reverse bg-action border border-action transition-colors hocus:text-action-focus-reverse hocus:bg-action-focus hocus:border-action-focus" id="newsletter-submit">Sign up now</button>
                <span class="mzp-c-fieldnote block mt-6">We will only send you Mozilla-related information.</span>
            </p>
        </fieldset>
    </form>

    <div id="newsletter-thanks" class="mzp-c-newsletter-thanks hidden">
        <div class="md:grid md:grid-cols-24 gap-x-grid-site-gutter mt-6">
            <h3 class="uppercase font-bold md:col-start-13 md:col-span-12 lg:col-start-15 lg:col-span-10">Thanks!</h3>
            <p class="md:col-start-13 md:col-span-12 lg:col-start-15 lg:col-span-10">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>
    </div>

</section>

<script>
  // Wait until DOM has loaded
  document.addEventListener('DOMContentLoaded', function() {
    const successCustomCallback = () => {
        console.log('Form success');
    };
    const errorCustomCallback = (msg) => {
        if (msg) {
            console.log(msg);
        }
    };
    console.log(window.MzpNewsletter);
    window.MzpNewsletter.init(successCustomCallback, errorCustomCallback);
  });
</script>