Formulare mit Validierung, Einwilligung und Spamschutz (Arbeitspaket D)

Migration 20260912000700 legt form und form_submission an. Der
Formularblock im Seiteninhalt enthält nur die Adresse: Felder,
Empfänger und Einwilligungstext liegen in der Datenbank, damit ein
gespeichertes Dokument nicht ändern kann, wonach gefragt wird oder
wohin eine Anfrage geht.

Serverseitige Validierung mit einer Meldung je Feld über
aria-describedby und aria-invalid; eine Ablehnung rendert die Seite
mit HTTP 422 und allen Eingaben neu, eine gültige Absendung wird mit
HTTP 303 zurückgeleitet. Alles ohne JavaScript.

Spamschutz ohne Dienst Dritter: Honeypot, signierter Zeitstempel
gegen zu schnelle und zu alte Absendungen, fünf Absendungen je
Absender und Stunde. Ein erkannter Bot bekommt dieselbe Antwort wie
ein Erfolg. Die Absenderadresse wird nie gespeichert, nur ein Hash.

Gespeichert wird vor dem Versand, damit ein kaputter Mailversand
keine Anfrage verliert. Kein CSRF-Token auf dem öffentlichen Weg,
weil das eine Sitzung und damit ein Cookie auf jeder öffentlichen
Seite bedeuten würde; Begründung in ADR 017. Dateiuploads fehlen
bewusst.

Ein echter Fehler von den Tests gefunden: das Stundenfenster des
Limits entstand aus lokaler Zeit, die Zeitstempel aber aus UTC - auf
einer Uhr vor UTC hätte das Limit nie gegriffen.

Geprüft: 117 PHP-Tests / 450 Assertions unter PHP 8.2.12 und 8.4.22,
14 JavaScript-Modelltests, Lint/Format/Container, composer audit.
Der E-Mail-Versand wurde nie wirklich ausgeführt; keine Browser- oder
Lighthouse-Läufe.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

templates/blocks/block.html.twig

@@ -10,7 +10,7 @@
     {% set tag = type == 'section' ? 'section' : 'div' %}
     <{{ tag }} id="{{ block.id }}" class="block-{{ type }} tone-{{ layout.tone|default('paper') }} width-{{ layout.width|default('normal') }}{{ designClasses }}">
         {% if type == 'section' %}<div class="shell section-inner">{% endif %}
-        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({})} only %}{% endfor %}
+        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({})} only %}{% endfor %}
         {% if type == 'section' %}</div>{% endif %}
     </{{ tag }}>
 {% elseif type == 'heading' %}
@@ -39,7 +39,7 @@
     </figure>
 {% elseif type == 'logos' %}
     <ul id="{{ block.id }}" class="block-logos{{ designClasses }}">
-        {% for child in block.children|default([]) %}<li>{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({})} only %}</li>{% endfor %}
+        {% for child in block.children|default([]) %}<li>{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({})} only %}</li>{% endfor %}
     </ul>
 {% elseif type == 'cta' %}
     <div id="{{ block.id }}" class="block-cta{{ designClasses }}">
@@ -59,6 +59,10 @@
     <hr id="{{ block.id }}" class="block-divider{{ designClasses }}">
 {% elseif type == 'spacer' %}
     <div id="{{ block.id }}" class="block-spacer spacer-{{ props.size }}{{ designClasses }}" aria-hidden="true"></div>
+{% elseif type == 'form' %}
+    <div id="{{ block.id }}" class="block-formwrap{{ designClasses }}">
+        {% include 'blocks/form.html.twig' with (forms[block.id]|default({form: null, sent: false, errors: {}, values: {}, blockId: block.id, page: {path: ''}, issued: 0, issuedSignature: ''})) only %}
+    </div>
 {% elseif type == 'tabs' %}
     {# Without the script this is an anchor list followed by every panel: complete and readable.
        tabs.js turns it into a tab widget; it only changes presentation, never content. #}
@@ -66,22 +70,22 @@
         <ul class="tabs-nav">
             {% for child in block.children|default([]) %}<li><a href="#{{ child.id }}">{{ child.props.title }}</a></li>{% endfor %}
         </ul>
-        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({})} only %}{% endfor %}
+        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({})} only %}{% endfor %}
     </div>
 {% elseif type == 'tabitem' %}
     <section id="{{ block.id }}" class="block-tabitem{{ designClasses }}">
         <h3 class="tabs-heading">{{ props.title }}</h3>
-        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({})} only %}{% endfor %}
+        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({})} only %}{% endfor %}
     </section>
 {% elseif type == 'accordion' %}
     <div id="{{ block.id }}" class="block-accordion{{ designClasses }}">
-        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({})} only %}{% endfor %}
+        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({})} only %}{% endfor %}
     </div>
 {% elseif type == 'accordionitem' %}
     <details id="{{ block.id }}" class="block-accordionitem{{ designClasses }}"{% if props.open|default(false) %} open{% endif %}>
         <summary>{{ props.title }}</summary>
         <div class="accordion-body">
-            {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({})} only %}{% endfor %}
+            {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({})} only %}{% endfor %}
         </div>
     </details>
 {% elseif type == 'postlist' %}
@@ -90,7 +94,7 @@
     </div>
 {% elseif type == 'gallery' %}
     <div id="{{ block.id }}" class="block-gallery{{ designClasses }}" role="group" aria-label="Bildergalerie">
-        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({})} only %}{% endfor %}
+        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({})} only %}{% endfor %}
     </div>
 {% else %}
     {#

templates/blocks/form.html.twig

@@ -0,0 +1,56 @@
+{# 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 %}
+    <button class="button" type="submit">Absenden</button>
+</form>
+{% endif %}