51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Example form

100% 
<form id="form_01" class="o-form">
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell">
                <fieldset class="o-form__field">
                    <legend>Anrede<span class="required">*</span></legend>
                    <input type="radio" class="o-form__input o-form__input--radio o-form__input--hidden" name="radioButtons" value="frau" id="radio-anrede-f" required>
                    <label class="o-form__label o-form__label--radio" for="radio-anrede-f">Frau</label>
                    <input type="radio" class="o-form__input o-form__input--radio o-form__input--hidden" name="radioButtons" value="mann" id="radio-anrede-m">
                    <label class="o-form__label o-form__label--radio" for="radio-anrede-m">Herr</label>
                </fieldset>
            </div>
            <div class="cell large-6 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">Nachname<span class="required">*</span></label>
                    </div>
                    <span class="o-form__status o-form__status--warning">
          
        </span>
                    <span class="o-form__info" id="input-01"></span>
                </div>
            </div>
            <div class="cell large-6 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">Vorname<span class="required">*</span></label>
                    </div>
                    <span class="o-form__status o-form__status--warning">
          
        </span>
                    <span class="o-form__info" id="input-01"></span>
                </div>
            </div>
            <div class="cell large-8 medium-8">
                <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">Straße<span class="required">*</span></label>
                    </div>
                    <span class="o-form__status o-form__status--warning">
          
        </span>
                    <span class="o-form__info" id="input-01"></span>
                </div>
            </div>
            <div class="cell large-4 medium-4">
                <div class="o-form__field">
                    <div class="o-form__fluid">
                        <input title="" type="number" class="o-form__input o-form__input--number " placeholder="Bitte ausfüllen" aria-describedby="input-04" pattern="number">
                        <label class="o-form__label">Hausnummer</label>
                    </div>
                    <span class="o-form__info" id="input-04"></span>
                </div>
            </div>
            <div class="cell large-4 medium-4">
                <div class="o-form__field">
                    <div class="o-form__fluid">
                        <input title="" type="number" class="o-form__input o-form__input--number " placeholder="Bitte ausfüllen" aria-describedby="input-04" pattern="number">
                        <label class="o-form__label">PLZ</label>
                    </div>
                    <span class="o-form__info" id="input-04"></span>
                </div>
            </div>
            <div class="cell large-8 medium-8">
                <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">Ort<span class="required">*</span></label>
                    </div>
                    <span class="o-form__status o-form__status--warning">
          
        </span>
                    <span class="o-form__info" id="input-01"></span>
                </div>
            </div>
            <div class="cell">
                <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<span class="required">*</span></label>
                    </div>
                    <span class="o-form__status o-form__status--warning">
          
        </span>
                    <span class="o-form__info" id="input-01"></span>
                </div>
            </div>
            <div class="cell">
                <div class="o-form__field">
                    <div class="o-form__fluid">
                        <textarea class="o-form__textarea" placeholder="Schreiben Sie uns" rows="10" required></textarea>
                        <label class="o-form__label">
             Ihre Nachricht<span class="required">*</span>        </label>
                    </div>
                </div>
            </div>

            <div class="cell">
                <fieldset class="o-form__field">
                    <legend>Themen auswählen<span class="required">*</span></legend>
                    <input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="thema1" id="thema1" required>
                    <label class="o-form__label o-form__label--checkbox" for="thema1">
            Hildesheimer</label>
                    <input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="thema2" id="thema2">
                    <label class="o-form__label o-form__label--checkbox" for="thema2">
            Themen des Tages</label>
                    <input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="thema3" id="thema3">
                    <label class="o-form__label o-form__label--checkbox" for="thema3">
            Sport</label>
                    <input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="thema4" id="thema4">
                    <label class="o-form__label o-form__label--checkbox" for="thema4">
            Regional</label>
                </fieldset>
            </div>

            <div class="cell">
                <fieldset class="o-form__field">
                    <div class="o-form__fluid">
                        <select id="select_1" required class="o-form__select">
                            <option value="abo1">Abo EXTRA</option>
                            <option value="abo2">Abo Basis-Paket</option>
                            <option value="abo3">Abo Premium-Paket</option>
                            <option value="abo4">Abo Exklusiv-Paket</option>
                    </select>
                        <label class="o-form__label">Abo auswählen<span class="required">*</span></label>
                    </div>
                    <p class="o-form__info" id="select_desc_1">*Pflichtfeld</p>
                    <span class="o-form__status o-form__status--warning">
          
        </span>
                </fieldset>
            </div>

            <div class="cell">
                <fieldset class="o-form__field">
                    <legend>Datenschutz<span class="required">*</span></legend>
                    <input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="confirm_privacy" id="from_privacy" required>
                    <label class="o-form__label o-form__label--checkbox" for="from_privacy">
            Mit dem Absenden Ihrer Anfrage erklären Sie sich mit der Verarbeitung Ihrer angegebenen Daten zum Zweck der Bearbeitung Ihrer Anfrage einverstanden (<a href='#'>Datenschutzerklärung</a>).*</label>
                </fieldset>
            </div>
            <div class="cell medium-4 medium-offset-8">
                <input type="submit" class="o-form__input c-button c-button--full" value="Absenden">
            </div>
        </div>
    </div>
</form>
 
<form id="form_01" class="o-form">
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell"> {% render '@radio' with {
                    "legend":"Anrede",
                    "items": [
                        {
                            "label": "Frau",
                            "id": "radio-anrede-f",
                            "value": "frau"
                        },{
                            "label": "Herr",
                            "id": "radio-anrede-m",
                            "value": "mann"
                        }]
                } %}</div>
            <div class="cell large-6 medium-6">
                {% render '@input' with { "label":"Nachname"} %}
            </div>
            <div class="cell large-6 medium-6">{% render '@input' with { "label":"Vorname" } %}
            </div>
            <div class="cell large-8 medium-8">
                {% render '@input' with { "label":"Straße" } %}
            </div>
            <div
                class="cell large-4 medium-4">
                {% render '@input--number' with { "label":"Hausnummer" } %}
            </div>
            <div class="cell large-4 medium-4">
                {% render '@input--number' with { "label":"PLZ" } %}
            </div>
            <div class="cell large-8 medium-8">
                {% render '@input' with { "label":"Ort" } %}
            </div>
            <div class="cell">
                {% render '@input' with { "label":"E-Mail" } %}
            </div>
            <div class="cell">
                {% render '@textarea' with { "label":"Ihre Nachricht" } %}
            </div>

            <div class="cell">
                {% render '@checkbox' with {
                    "legend":"Themen auswählen",
                    "items": [
                        {
                            "label": "Hildesheimer",
                            "id": "thema1",
                            "value": "thema1"
                        },{
                            "label": "Themen des Tages",
                            "id": "thema2",
                            "value": "thema2"
                        },{
                            "label": "Sport",
                            "id": "thema3",
                            "value": "thema3"
                        },{
                            "label": "Regional",
                            "id": "thema4",
                            "value": "thema4"
                        }
                    ]} %}
            </div>

            <div class="cell">
                {% render '@select' with {
                    "label":"Abo auswählen",
                    "items": [
                        {
                            "option": "Abo EXTRA",
                            "value": "abo1"
                        },{
                            "option": "Abo Basis-Paket",
                            "value": "abo2"
                        },{
                            "option": "Abo Premium-Paket",
                            "value": "abo3"
                        },{
                            "option": "Abo Exklusiv-Paket",
                            "value": "abo4"
                        }
                    ]} %}
            </div>

            <div class="cell">
                {% render '@checkbox' with {
                    "legend":"Datenschutz",
                    "items": [
                        {
                            "label": "Mit dem Absenden Ihrer Anfrage erklären Sie sich mit der Verarbeitung Ihrer angegebenen Daten zum Zweck der Bearbeitung Ihrer Anfrage einverstanden (<a href='#'>Datenschutzerklärung</a>).*",
                            "id": "from_privacy",
                            "value": "confirm_privacy"
                        }
                    ]} %}
            </div>
            <div class="cell medium-4 medium-offset-8">
                {% render '@submit' with { "label":"Absenden"} %}
            </div>
        </div>
    </div>
</form>
 
/* No context defined for this component. */

There are no notes for this item.