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 schliesst 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 erweitert die Extension die Checkbox-Klasse und fügt Properties für linkTarget, linkText und wrapLabel hinzu. Das Rendering läuft über ein eigenes Fluid-Partial, das den Label-Text in “before”, “linkText” und “after” zerlegt und einen klickbaren Bereich nur über den Link-Teil spannt. 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 die Felder “Label vor Link”, “Link-Text”, “Label nach Link” und “Link-Ziel” in der rechten Detail-Spalte. Das Ziel kann eine interne Seite, ein Dateilink oder eine externe URL sein. 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 drei Teilen, und jeder Teil muss in jeder Sprache separat gepflegt werden. In der Praxis heisst 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. Ein Trick aus grösseren Projekten: Die drei Label-Teile in einem einzigen LLL-Key mit Platzhaltern hinterlegen und bei der Ausgabe serverseitig zusammensetzen. Das reduziert die Zahl der zu übersetzenden Strings deutlich.

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 braucht YAML-Anpassung

form_element_linked_checkbox ist für TYPO3 v11, v12 und v13 verfügbar. 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 müssen Form-Definitionen, die das Element verwenden, auf die neue YAML-Syntax umgestellt werden.

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 ausserdem, 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.