Paywall: Register

100%
<form class="o-form">
    <div class="o-paywall o-paywall--register">
        <div class="o-paywall__header">
            <span class="c-badge c-badge--user c-badge--large c-badge--outline">HAZ+</span>
            <div class="c-steps">
                <div class="c-steps__item is-current"><span class="c-step__number">1</span></div>
                <div class="c-steps__item"><span class="c-step__number">2</span></div>
                <div class="c-steps__item"><span class="c-step__number">3</span></div>
            </div>
        </div>
        <div class="o-paywall__body">
            <div class="grid-x grid-padding-y grid-padding-x">
                <div class="cell">
                    <h3 class="u-inline-block">
                        Registrieren Sie sich:
                    </h3>
                </div>
                <div class="cell medium-6">
                    <div class="o-form__field">
                        <div class="o-form__fluid">
                            <input title="" type="text" class="o-form__input o-form__input--text " placeholder="Bitte ausfüllen" aria-describedby="input-01" required>
                            <label class="o-form__label">E-Mail-Adresse<span class="required">*</span></label>
                        </div>
                        <span class="o-form__status o-form__status--warning">
          
        </span>
                        <span class="o-form__info" id="input-01">[object Object]</span>
                    </div>
                </div>
                <div class="cell medium-6">
                    <div class="o-form__field">
                        <div class="o-form__fluid">
                            <input title="" type="text" class="o-form__input o-form__input--text " placeholder="Bitte ausfüllen" aria-describedby="input-01" required>
                            <label class="o-form__label">Passwort<span class="required">*</span></label>
                        </div>
                        <span class="o-form__status o-form__status--warning">
          
        </span>
                        <span class="o-form__info" id="input-01">[object Object]</span>
                    </div>
                </div>
                <div class="cell">
                    <fieldset class="o-form__field">
                        <legend></legend>
                        <input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="confirm_privacy" id="from_privacy">
                        <label class="o-form__label o-form__label--checkbox" for="from_privacy">
            Ich stimme den <a href="#">Allgemeinen Geschäftsbedingungen</a> und den <a href="#">Datenschutzbestimmungen</a> zu. Meine Angaben dürfen von der Gebrüder Gerstenberg GmbH & Co. KG für Einladungen zu Leserbefragungen, Gewinnspiele sowie für Informationen zu digitalen und gedruckten Verlagsprodukten genutzt werden. Eine Weitergabe an Dritte erfolgt nicht. Diese Einwilligungserklärung kann ich <a href="#">hier</a> widerrufen oder jederzeit per E-Mail an <a href="#">leserservice(at)hildesheimer-allgemeine.de</a> senden.</label>
                    </fieldset>
                </div>
            </div>
            <div class="o-paywall__footer">
                <div class="grid-x grid-padding-x grid-padding-y">
                    <div class="cell medium-6">
                        <a class="c-button c-button--ghost" href="#">
    Zurück
</a>
                    </div>
                    <div class="cell medium-6 medium-text-right">
                        <a class="c-button" href="#">
    Weiter
</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<form class="o-form">
    <div class="o-paywall o-paywall--register">
        <div class="o-paywall__header">
            {% render '@badge--user' with { additionalClasses: 'c-badge--large c-badge--outline' } %}
            {% render '@steps' with { current: 1 } %}
        </div>
        <div class="o-paywall__body">
            <div class="grid-x grid-padding-y grid-padding-x">
                <div class="cell">
                    {% render '@heading--h3' with { text: 'Registrieren Sie sich:', classes: "u-inline-block" } %}
                </div>
                <div class="cell medium-6">
                    {% render '@input' with {
                        label: 'E-Mail-Adresse',
                        input: {
                            id: 'email',
                            type: 'email',
                            required: true,
                            placeholder: 'E-Mail-Adresse',
                        },
                        description: {
                            text: '',
                        },
                    } %}
                </div>
                <div class="cell medium-6">
                    {% render '@input' with {
                        label: 'Passwort',
                        input: {
                            id: 'password',
                            type: 'password',
                            required: true,
                            placeholder: 'Passwort',
                        },
                        description: {
                            text: '',
                        },
                    } %}
                </div>
                <div class="cell">
                    {% render '@checkbox' with {
                        legend: '',
                        required: false,
                        items: [
                            {
                                label: 'Ich stimme den <a href="#">Allgemeinen Geschäftsbedingungen</a> und den <a href="#">Datenschutzbestimmungen</a> zu. Meine Angaben dürfen von der Gebrüder Gerstenberg GmbH & Co. KG für Einladungen zu Leserbefragungen, Gewinnspiele sowie für Informationen zu digitalen und gedruckten Verlagsprodukten genutzt werden. Eine Weitergabe an Dritte erfolgt nicht. Diese Einwilligungserklärung kann ich <a href="#">hier</a> widerrufen oder jederzeit per E-Mail an <a href="#">leserservice(at)hildesheimer-allgemeine.de</a> senden.',
                                id: 'from_privacy',
                                value: 'confirm_privacy',
                            }
                        ],
                    } %}
                </div>
            </div>
            <div class="o-paywall__footer">
                <div class="grid-x grid-padding-x grid-padding-y">
                    <div class="cell medium-6">
                        {% render '@button--ghost' with { text: 'Zurück' } %}
                    </div>
                    <div class="cell medium-6 medium-text-right">
                        {% render '@button' with { text: 'Weiter' } %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
/* No context defined for this component. */

There are no notes for this item.