Linked Checkbox für TYPO3

form_element_linked_checkbox macht DSGVO-Einwilligungen wirklich klickbar

Das TYPO3-Core-Form-Framework kennt eine Checkbox, aber keine Checkbox mit verlinktem Label. Wer mit dem Standard-Element arbeitet, kann im Label keinen Link zur Datenschutzerklärung oder zu den AGB setzen - und genau das ist in der Praxis eine Anforderung, die bei jedem Formular auftaucht. Die Extension form_element_linked_checkbox schließt diese Lücke mit einem sauberen Custom-Form-Element, das Text und Link sauber kombiniert. Für jede TYPO3-Installation, die mit dem nativen Form-Framework arbeitet, ist diese Erweiterung praktisch Pflicht. Ohne die Extension bleibt nur der Workaround, den Label-Text mit einem nebenstehenden Textblock zu erweitern, was nicht nur unsauber wirkt, sondern auch für Screenreader und Barrierefreiheit problematisch ist.

Typische Einsatzszenarien liegen im Compliance-Umfeld jeder Unternehmensseite

Das erste und häufigste Szenario sind DSGVO-Einwilligungen unterhalb von Kontakt-, Newsletter- und Bewerbungsformularen. Der Text “Ich habe die Datenschutzerklärung gelesen und stimme der Verarbeitung meiner Daten zu” muss einen klickbaren Link auf /datenschutz enthalten, ohne dass der Besucher das Häkchen zum Öffnen setzen muss. form_element_linked_checkbox bildet diesen Fall exakt ab.

Ein zweites Szenario sind AGB-Bestätigungen bei Registrierungs- und Kaufformularen. Hochschulen nutzen das bei Kursanmeldungen, Vereine bei Mitgliedsanträgen, E-Commerce-Projekte mit dem TYPO3-Form-Framework bei Checkouts. Hier ist oft nicht nur ein Link gefragt, sondern mehrere (AGB, Widerrufsbelehrung, Datenschutz), die im selben Label untergebracht werden müssen.

Das dritte Szenario betrifft Double-Opt-In-Newsletter. Vor der Anmeldung muss der Empfänger explizit bestätigen, dass er den Newsletter abonniert, mit Link auf die Newsletter-spezifischen Datenschutzhinweise. form_element_linked_checkbox erlaubt es, mehrere Checkboxen mit je eigenem Link im selben Formular zu verwenden, sodass neben der Datenschutz-Einwilligung auch die explizite Newsletter-Zustimmung als separates Element abgefragt werden kann. Das ist wichtig, weil die DSGVO separate Einwilligungen verlangt und eine pauschale “Ich stimme allem zu”-Checkbox rechtlich nicht ausreicht.

Technische Architektur steckt im Form-Framework-Pluginsystem

Das TYPO3-Form-Framework ist bewusst erweiterbar ausgelegt: Jede Extension kann eigene Form-Elemente registrieren, die im YAML-Editor auftauchen und im Backend per Drag-and-Drop verwendbar sind. form_element_linked_checkbox nutzt diesen Mechanismus und registriert ein neues Element “LinkedCheckbox” über die Form-Setup-YAML und den Form-Element-Definitions-Bereich. Redakteure ziehen das Element in ihr Formular, genau wie sie das mit einer Standard-Checkbox tun würden, und konfigurieren Label, Link-Text und Ziel im Detail-Panel.

Intern erbt das Element die Konfiguration der Checkbox und fügt Properties für pageUid, linkText und additionalLinks hinzu. Das Rendering läuft über ein eigenes Fluid-Partial; den Link setzt vorher ein Hook an die Stelle des Platzhalters %s im Label und verlinkt nur den Link-Teil. Der Klick auf den Link öffnet die Zielseite, ohne die Checkbox zu togglen. Für die Barrierefreiheit ist das wichtig, weil Screenreader den Link als separates Element vorlesen und die Checkbox unabhängig davon bedient werden kann.

Konfiguration erfolgt direkt im YAML-Editor des Form-Framework: Nach dem Ziehen des Elements in ein Formular erscheinen neben dem Label die Felder für Seite, Link-Text und weitere Links in der rechten Detail-Spalte. Das Ziel ist eine Seite aus dem Seitenbaum, weitere Seiten-Links kommen über „Additional links“ dazu. Die Pflicht-Validierung wird wie beim Standard-Element über den Validators-Tab gesetzt.

Häufige Probleme betreffen Mehrsprachigkeit, Styling und Validator-Meldungen

Das erste Supportthema ist die Übersetzung. Das Label besteht aus Label-Text und Link-Text, und jeder Teil muss in jeder Sprache separat gepflegt werden. In der Praxis heißt das: Für eine zweisprachige Installation (DE/EN) verdoppelt sich die Pflege. Wer mit ext:l10nmgr arbeitet, sollte die LLL-Schlüssel explizit in der Form-Definition referenzieren, damit der Import/Export sauber funktioniert. Die Extension hilft dabei selbst: Steht der Platzhalter %s im Label, setzt sie den Link genau dort ein, statt ihn anzuhängen. So bleibt der Satz in jeder Sprache ein zusammenhängender String.

Das zweite Thema ist das Styling. Viele Design-Systeme arbeiten mit benutzerdefinierten Checkboxen, die per CSS aus einem span- oder label-Konstrukt nachgebildet werden. Das Default-Template der Extension liefert einen einfachen Wrapper, der mit einigen CSS-Frameworks kollidiert. Wir empfehlen, das Partial im Paket-Overlay zu überschreiben und den Aufbau an das restliche Formular-Styling anzupassen.

Drittens sind Validator-Fehlermeldungen ein häufiger Stolperstein. Wenn der Nutzer die Checkbox nicht anklickt, soll “Bitte stimmen Sie der Datenschutzerklärung zu” erscheinen, nicht die Default-Meldung “Pflichtfeld”. Die Extension unterstützt benutzerdefinierte Error-Messages per formElementsDefinition in der Form-YAML; die Meldung kann pro Element angepasst werden. Für Barrierefreiheit ist das wichtig, weil Screenreader die Error-Message direkt vorlesen und unspezifische Meldungen keine Hilfestellung geben. Wir empfehlen, jede Error-Message so zu formulieren, dass sie unabhängig vom Kontext verständlich ist.

TYPO3 v12 und v13 werden voll unterstützt, v10-Migration betrifft vor allem Templates

form_element_linked_checkbox ist für TYPO3 v11, v12 und v13 verfügbar, Version 6.0.0 auch für v14. Die YAML-Struktur des Form-Framework hat sich zwischen v10 und v12 in Details geändert, vor allem bei der Registrierung von Custom-Elementen. Beim Upgrade einer v10-Installation bleiben Form-Definitionen, die das Element verwenden, unverändert; anzupassen sind überschriebene Templates, weil der Link seit Version 3.0 per Hook entsteht.

In Gosign-Projekten migrieren wir die Extension als Teil des Form-Framework-Refactorings, nicht einzeln. Der Aufwand ist meist minimal, weil das Element in jedem Formular nur über seinen Typ-Bezeichner referenziert wird. Wir prüfen bei der Migration außerdem, ob die DSGVO-Einwilligungstexte nach dem TYPO3-Upgrade in jeder Sprache korrekt gerendert werden, und aktualisieren die Datenschutzlinks, falls sie in URL-Struktur oder Text-Content verändert wurden.