kantarciandClaude Opus 5
c8a8fa7460
Forms gained steps, conditions, image choices, number fields with units and a summary step; the DEEG price finder uses all of it. Plugins are manifest plus Twig: blocks, settings, containers, routes, presets and theme packs, switched per installation. The review backlog is done: archive pages render through the normal page pipeline, forms and post lists work inside areas and sections, repeated sections get their own ids, breakpoints and colours come from the palette, backup and update work on MySQL and lock each other out. The task worker no longer shortens a process that has no time limit: set_time_limit() sets the limit instead of extending it, which turned an unlimited CLI run into eighty seconds and killed the full test suite far away from the scheduler. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
111 lines
9.6 KiB
Twig
111 lines
9.6 KiB
Twig
{# Server rendered, no JavaScript needed. Errors are announced and each message sits at its field.
|
|
Schritte sind fieldsets: ohne Skript ein langes Formular mit Abschnitten, mit form-steps.js ein
|
|
Schritt nach dem anderen. Bedingungen stehen als Datenattribute am Feld; der Server prüft sie
|
|
beim Absenden selbst und verlangt nichts, was gar nicht galt. #}
|
|
{% 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 %}
|
|
{% set hasSteps = form.fields|filter(f => f.type == 'step')|length > 0 %}
|
|
<form class="block-form{{ hasSteps ? ' form-stepped' : '' }}" data-form="{{ form.slug }}" method="post" action="{{ path('form_submit', {slug: form.slug}) }}" novalidate{% if hasSteps %} data-steps{% endif %}{% if form.settings.summary|default(false) %} data-summary{% endif %}>
|
|
<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' : '') %}
|
|
{% set condition %}{% if field.showIf|default(null) %} data-show-if="{{ field.showIf.field }}" data-show-values="{{ field.showIf.values|join('|') }}"{% endif %}{% endset %}
|
|
{% set requiredMark %}{% if field.required %} <span class="required-mark" aria-hidden="true">*</span><span class="visually-hidden"> (Pflichtfeld)</span>{% endif %}{% endset %}
|
|
{% if field.type == 'step' %}
|
|
{% if not loop.first and form.fields[0:loop.index0]|filter(f => f.type == 'step')|length > 0 %}</fieldset>{% endif %}
|
|
<fieldset class="form-step" data-step{{ condition }}>
|
|
<legend class="form-step-title" tabindex="-1">{{ field.label }}</legend>
|
|
{% if field.help %}<p class="form-step-intro">{{ field.help }}</p>{% endif %}
|
|
{% elseif field.type == 'consent' %}
|
|
<div class="form-field{{ error ? ' has-error' : '' }}" data-field data-label="{{ field.label }}"{{ condition }}>
|
|
<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>
|
|
{% 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>
|
|
{% elseif field.type == 'radio' or field.type == 'checkboxes' %}
|
|
{# Eine Gruppe: die Beschriftung ist die legend, jede Option hat ihr eigenes Feld. Bei
|
|
der Mehrfachauswahl steht required nicht am Kästchen - das hieße „alle ankreuzen“ -
|
|
sondern an der Gruppe; Skript und Server prüfen es dort. #}
|
|
{# Hat eine Option ein Bild, wird die ganze Auswahl zur Bildauswahl: jede Option eine
|
|
Karte mit Bild und Text, das Kästchen bleibt darin für Tastatur und Vorlesesoftware. #}
|
|
{% set bildauswahl = field.images|default({})|length > 0 %}
|
|
<fieldset class="form-field form-choice{{ bildauswahl ? ' form-choice-images' : '' }}{{ error ? ' has-error' : '' }}" data-field data-label="{{ field.label }}"{{ condition }}{% if field.type == 'checkboxes' and field.required %} data-required{% endif %}
|
|
{% if described|trim %}aria-describedby="{{ described|trim }}"{% endif %}>
|
|
<legend>{{ field.label }}{{ requiredMark }}</legend>
|
|
{% set picked = field.type == 'checkboxes' ? value|split(', ') : [value] %}
|
|
{% if bildauswahl %}<div class="form-choice-grid">{% endif %}
|
|
{% for option in field.options %}
|
|
{% set bild = optionImages[field.images[option]|default('')]|default(null) %}
|
|
<div class="{{ bildauswahl ? 'form-choice-card' : 'check-row' }}">
|
|
<input id="{{ id }}-{{ loop.index }}" name="{{ field.name }}{{ field.type == 'checkboxes' ? '[]' : '' }}" type="{{ field.type == 'checkboxes' ? 'checkbox' : 'radio' }}" value="{{ option }}"{{ option in picked ? ' checked' : '' }}{{ field.type == 'radio' and field.required ? ' required' : '' }}{{ error ? ' aria-invalid="true"' : '' }}>
|
|
<label for="{{ id }}-{{ loop.index }}">{% if bildauswahl %}<span class="form-choice-picture">{% if bild %}<img src="{{ bild.src }}" alt="" width="{{ bild.width }}" height="{{ bild.height }}" loading="lazy" decoding="async">{% endif %}</span><span class="form-choice-text">{{ option }}</span>{% else %}{{ option }}{% endif %}</label>
|
|
</div>
|
|
{% endfor %}
|
|
{% if bildauswahl %}</div>{% 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 %}
|
|
</fieldset>
|
|
{% else %}
|
|
<div class="form-field{{ error ? ' has-error' : '' }}" data-field data-label="{{ field.label }}"{{ condition }}>
|
|
<label for="{{ id }}">{{ field.label }}{{ requiredMark }}{% if field.unit|default('') %}<span class="visually-hidden"> in {{ field.unit }}</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>
|
|
{% elseif field.type == 'number' %}
|
|
<div class="form-number{{ field.unit|default('') ? ' has-unit' : '' }}">
|
|
<input id="{{ id }}" name="{{ field.name }}" value="{{ value }}" type="number" step="any" inputmode="decimal"
|
|
{% if field.min is not null %}min="{{ field.min }}"{% endif %} {% if field.max is not null %}max="{{ field.max }}"{% endif %}
|
|
{{ field.required ? ' required' : '' }}
|
|
{% if described|trim %}aria-describedby="{{ described|trim }}"{% endif %}{{ error ? ' aria-invalid="true"' : '' }}>
|
|
{% if field.unit|default('') %}<span class="form-unit" aria-hidden="true">{{ field.unit }}</span>{% endif %}
|
|
</div>
|
|
{% 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 %}
|
|
{% 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>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if hasSteps %}</fieldset>{% endif %}
|
|
{% 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">{{ form.settings.buttonLabel|default('Absenden') }}</button>
|
|
</form>
|
|
{% endif %}
|