64 lines
4.6 KiB
Twig
64 lines
4.6 KiB
Twig
{# Server rendered, no JavaScript. Errors are announced and each message sits at its field. #}
|
|
{% if form is null %}
|
|
<p class="form-missing">Dieses Formular ist nicht mehr vorhanden.</p>
|
|
{% elseif sent %}
|
|
<p class="form-success" role="status">{{ form.settings.success }}</p>
|
|
{% else %}
|
|
<form class="block-form" method="post" action="{{ path('form_submit', {slug: form.slug}) }}" novalidate>
|
|
<input type="hidden" name="page" value="{{ page.path }}">
|
|
<input type="hidden" name="block" value="{{ blockId }}">
|
|
<input type="hidden" name="issued" value="{{ issued }}">
|
|
<input type="hidden" name="issuedSignature" value="{{ issuedSignature }}">
|
|
{# Bait for automated senders. Hidden from view, from assistive technology and from tab order. #}
|
|
<div class="form-trap" aria-hidden="true"><label for="website-{{ blockId }}">Website</label><input id="website-{{ blockId }}" name="website" type="text" tabindex="-1" autocomplete="off"></div>
|
|
|
|
{% if errors is not empty %}
|
|
<p class="form-error-summary" role="alert">Bitte prüfe {{ errors|length }} {{ errors|length == 1 ? 'Eingabe' : 'Eingaben' }}. Die betroffenen Felder sind unten gekennzeichnet.</p>
|
|
{% endif %}
|
|
|
|
{% for field in form.fields %}
|
|
{% set id = blockId ~ '-' ~ field.name %}
|
|
{% set error = errors[field.name]|default(null) %}
|
|
{% set value = values[field.name]|default('') %}
|
|
{% set described = (field.help ? id ~ '-help ' : '') ~ (error ? id ~ '-error' : '') %}
|
|
<div class="form-field{{ error ? ' has-error' : '' }}">
|
|
{% if field.type == 'consent' %}
|
|
<div class="check-row">
|
|
<input id="{{ id }}" name="{{ field.name }}" type="checkbox" value="ja"{{ value ? ' checked' : '' }} required
|
|
{% if described|trim %}aria-describedby="{{ described|trim }}"{% endif %}{{ error ? ' aria-invalid="true"' : '' }}>
|
|
<label for="{{ id }}">{{ field.label }} <span class="required-mark" aria-hidden="true">*</span></label>
|
|
</div>
|
|
{% else %}
|
|
<label for="{{ id }}">{{ field.label }}{% if field.required %} <span class="required-mark" aria-hidden="true">*</span><span class="visually-hidden"> (Pflichtfeld)</span>{% endif %}</label>
|
|
{% if field.type == 'textarea' %}
|
|
<textarea id="{{ id }}" name="{{ field.name }}" rows="6" maxlength="5000"{{ field.required ? ' required' : '' }}
|
|
{% if described|trim %}aria-describedby="{{ described|trim }}"{% endif %}{{ error ? ' aria-invalid="true"' : '' }}>{{ value }}</textarea>
|
|
{% elseif field.type == 'select' %}
|
|
<select id="{{ id }}" name="{{ field.name }}"{{ field.required ? ' required' : '' }}
|
|
{% if described|trim %}aria-describedby="{{ described|trim }}"{% endif %}{{ error ? ' aria-invalid="true"' : '' }}>
|
|
<option value="">— bitte wählen —</option>
|
|
{% for option in field.options %}<option value="{{ option }}"{{ value == option ? ' selected' : '' }}>{{ option }}</option>{% endfor %}
|
|
</select>
|
|
{% else %}
|
|
<input id="{{ id }}" name="{{ field.name }}" value="{{ value }}" maxlength="200"
|
|
type="{{ {email: 'email', phone: 'tel'}[field.type]|default('text') }}"
|
|
autocomplete="{{ {email: 'email', phone: 'tel'}[field.type]|default('on') }}"
|
|
{{ field.required ? ' required' : '' }}
|
|
{% if described|trim %}aria-describedby="{{ described|trim }}"{% endif %}{{ error ? ' aria-invalid="true"' : '' }}>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if field.help %}<p class="field-note" id="{{ id }}-help">{{ field.help }}</p>{% endif %}
|
|
{% if error %}<p class="field-error" id="{{ id }}-error">{{ error }}</p>{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{% if turnstileKey|default('') %}
|
|
{# Cloudflare Turnstile. Braucht JavaScript; ohne Skript bleibt das Formular unabsendbar, und
|
|
genau deshalb ist die Prüfung eine Entscheidung und keine Voreinstellung. #}
|
|
<div class="cf-turnstile" data-sitekey="{{ turnstileKey }}" data-language="de"></div>
|
|
<noscript><p class="field-error">Zum Absenden dieses Formulars wird JavaScript benötigt. Schreib uns sonst gern direkt eine E-Mail.</p></noscript>
|
|
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
|
|
{% endif %}
|
|
<button class="button cms-button" type="submit">Absenden</button>
|
|
</form>
|
|
{% endif %}
|