Formular @form
<form class="form">
<div class="form__fields">
<div class="form__col">
<div class="form__field">
<fieldset class="form-group">
<legend class="label form-group__label">Anrede<abbr class="label__required" title="Required field">*</abbr></legend>
<div class="form-group__item form-group__item--horizontal"><label class="radio" for="radio-form-group-e0b3-0"><input class="radio__input" type="radio" required="required" id="radio-form-group-e0b3-0" name="anrede" /><span class="radio__indicator"></span><span class="radio__label">Frau</span></label></div>
<div class="form-group__item form-group__item--horizontal"><label class="radio" for="radio-form-group-e0b3-1"><input class="radio__input" type="radio" required="required" id="radio-form-group-e0b3-1" name="anrede" /><span class="radio__indicator"></span><span class="radio__label">Herr</span></label></div>
</fieldset>
</div>
</div>
<div class="form__col">
<div class="form__field">
<div class="form-group"><label class="label form-group__label" for="form-group-45bd">Titel</label>
<div class="form-group__input"><input class="input" id="form-group-45bd" type="text" /></div>
</div>
</div>
</div>
<div class="form__col form__col--50-50">
<div class="form__field">
<div class="form-group"><label class="label form-group__label" for="form-group-2145">Vorname<abbr class="label__required" title="Required field">*</abbr></label>
<div class="form-group__input"><input class="input" id="form-group-2145" type="text" required="required" /></div>
</div>
</div>
<div class="form__field">
<div class="form-group"><label class="label form-group__label" for="form-group-5663">Nachname<abbr class="label__required" title="Required field">*</abbr></label>
<div class="form-group__input"><input class="input" id="form-group-5663" type="text" required="required" /></div>
</div>
</div>
</div>
<div class="form__col form__col--25-75">
<div class="form__field">
<div class="form-group"><label class="label form-group__label" for="form-group-221d">Code<abbr class="label__required" title="Required field">*</abbr></label>
<div class="form-group__input"><input class="input" id="form-group-221d" type="text" required="required" /></div>
</div>
</div>
<div class="form__field">
<div class="form-group"><label class="label form-group__label" for="form-group-cf9a">Institution</label>
<div class="form-group__input"><input class="input" id="form-group-cf9a" type="text" /></div>
</div>
</div>
</div>
<div class="form__col form__col--75-25">
<div class="form__field">
<div class="form-group"><label class="label form-group__label" for="form-group-847b">Institution2</label>
<div class="form-group__input"><input class="input" id="form-group-847b" type="text" /></div>
</div>
</div>
<div class="form__field">
<div class="form-group"><label class="label form-group__label" for="form-group-cdb6">Code2<abbr class="label__required" title="Required field">*</abbr></label>
<div class="form-group__input"><input class="input" id="form-group-cdb6" type="text" required="required" /></div>
</div>
</div>
</div>
<div class="form__col form__col--50-50">
<div class="form__field">
<div class="form-group"><label class="label form-group__label" for="form-group-8d14">Telefon</label>
<div class="form-group__input"><input class="input" id="form-group-8d14" type="text" /></div>
</div>
</div>
<div class="form__field">
<div class="form-group"><label class="label form-group__label" for="form-group-c413">E-Mail<abbr class="label__required" title="Required field">*</abbr></label>
<div class="form-group__input"><input class="input" id="form-group-c413" type="email" required="required" /></div>
</div>
</div>
</div>
<div class="form__col">
<div class="form__field">
<div class="form-group"><label class="label form-group__label" for="form-group-258f">Ihre Nachricht<abbr class="label__required" title="Required field">*</abbr></label>
<div class="form-group__input"><textarea class="input input--textarea" id="form-group-258f" type="textarea" required="required"></textarea></div>
</div>
</div>
</div>
<div class="form__col">
<div class="form__field"><label class="checkbox" for="checkbox-fe18"><input class="checkbox__input" type="checkbox" id="checkbox-fe18" name="checkbox-fe18" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ich bin damit einverstanden, dass meine Daten von der Stiftung und ihren Programm-Partnern verarbeitet, gespeichert und im Zusammenhang mit dem jeweiligen Programm genutzt werden.</span></label></div>
</div>
<div class="form__col">
<div class="form__field"><label class="checkbox" for="checkbox-e47d"><input class="checkbox__input" type="checkbox" required="required" id="checkbox-e47d" name="checkbox-e47d" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ich bestätige, dass ich den <a class="link" href="#"> Datenschutzhinweis</a> der Baden-Württemberg Stiftung zur Kenntnis genommen habe.<abbr class="label__required" title="Pflichtfeld">*</abbr></span></label></div>
</div>
<div class="form__col">
<div class="form__field"><label class="checkbox" for="checkbox-5b6e"><input class="checkbox__input" type="checkbox" id="checkbox-5b6e" name="checkbox-5b6e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ich möchte in Zukunft per E-Mail Informationen über ähnliche Veranstaltungen und Angebote der Baden-Württemberg Stiftung erhalten.</span></label></div>
</div>
</div>
<div class="form__button"><button class="button button--primary" type="submit"><span class="button__text">Formular Absenden</span></button></div>
</form>
{
"fields": [
{
"items": [
{
"settings": {
"groupHorizontal": true,
"label": {
"label": "Anrede",
"required": true
},
"group": [
{
"use": "radio",
"settings": {
"required": true,
"text": "Frau",
"name": "anrede"
}
},
{
"use": "radio",
"settings": {
"required": true,
"text": "Herr",
"name": "anrede"
}
}
]
}
}
]
},
{
"items": [
{
"settings": {
"label": {
"label": "Titel"
},
"settings": {
"placeholder": null
}
}
}
]
},
{
"column": "50-50",
"items": [
{
"settings": {
"label": {
"label": "Vorname",
"required": true
},
"settings": {
"required": true,
"placeholder": null
}
}
},
{
"settings": {
"label": {
"label": "Nachname",
"required": true
},
"settings": {
"required": true,
"placeholder": null
}
}
}
]
},
{
"column": "25-75",
"items": [
{
"settings": {
"label": {
"label": "Code",
"required": true
},
"settings": {
"required": true,
"placeholder": null
}
}
},
{
"settings": {
"label": {
"label": "Institution"
},
"settings": {
"placeholder": null
}
}
}
]
},
{
"column": "75-25",
"items": [
{
"settings": {
"label": {
"label": "Institution2"
},
"settings": {
"placeholder": null
}
}
},
{
"settings": {
"label": {
"label": "Code2",
"required": true
},
"settings": {
"required": true,
"placeholder": null
}
}
}
]
},
{
"column": "50-50",
"items": [
{
"settings": {
"label": {
"label": "Telefon"
},
"settings": {
"placeholder": null
}
}
},
{
"settings": {
"label": {
"label": "E-Mail",
"required": true
},
"settings": {
"type": "email",
"required": true,
"placeholder": null
}
}
}
]
},
{
"items": [
{
"settings": {
"label": {
"label": "Ihre Nachricht",
"required": true
},
"settings": {
"type": "textarea",
"required": true,
"placeholder": null
}
}
}
]
},
{
"items": [
{
"use": "checkbox--unchecked",
"settings": {
"text": "Ich bin damit einverstanden, dass meine Daten von der Stiftung und ihren Programm-Partnern verarbeitet, gespeichert und im Zusammenhang mit dem jeweiligen Programm genutzt werden."
}
}
]
},
{
"items": [
{
"use": "checkbox--unchecked",
"settings": {
"required": true,
"text": "Ich bestätige, dass ich den #[a.link(href='#') Datenschutzhinweis] der Baden-Württemberg Stiftung zur Kenntnis genommen habe.\n"
}
}
]
},
{
"items": [
{
"use": "checkbox--unchecked",
"settings": {
"text": "Ich möchte in Zukunft per E-Mail Informationen über ähnliche Veranstaltungen und Angebote der Baden-Württemberg Stiftung erhalten."
}
}
]
}
],
"submit": {
"link": null,
"text": "Formular Absenden",
"align": null
}
}