Linked Checkbox dla TYPO3

form_element_linked_checkbox czyni zgody RODO naprawdę klikalnymi

TYPO3-Core-Form-Framework zna checkbox, ale nie checkbox z linkowaną etykietą. Kto pracuje ze standardowym elementem, nie może w etykiecie umieścić linku do polityki prywatności lub regulaminu, a dokładnie to jest w praktyce wymaganiem pojawiającym się w każdym formularzu. Rozszerzenie form_element_linked_checkbox wypełnia tę lukę porządnym własnym elementem formularza, który czysto łączy tekst i link. Dla każdej instalacji TYPO3, która pracuje z natywnym Form-Framework, to rozszerzenie jest praktycznie obowiązkowe. Bez rozszerzenia pozostaje tylko workaround z rozszerzeniem tekstu etykiety o sąsiedni blok tekstowy, co nie tylko wygląda nieczysto, ale też jest problematyczne dla screen-readerów i dostępności cyfrowej.

Typowe scenariusze zastosowania leżą w obszarze compliance każdej strony firmowej

Pierwszym i najczęstszym scenariuszem są zgody RODO pod formularzami kontaktowymi, newsletterowymi i rekrutacyjnymi. Tekst “Zapoznałem się z polityką prywatności i zgadzam się na przetwarzanie moich danych” musi zawierać klikalny link do /polityka-prywatnosci, bez konieczności zaznaczania checkboxa przez odwiedzającego przed otwarciem. form_element_linked_checkbox dokładnie odwzorowuje ten przypadek.

Drugim scenariuszem są akceptacje regulaminów przy formularzach rejestracji i zakupu. Uczelnie stosują to przy zapisach na kursy, stowarzyszenia przy wnioskach członkowskich, projekty e-commerce z TYPO3-Form-Framework przy checkoutach. Często nie wystarczy tu tylko jeden link, tylko kilka (regulamin, pouczenie o prawie odstąpienia, polityka prywatności), które muszą być umieszczone w tej samej etykiecie.

Trzeci scenariusz dotyczy newsletterów z Double-Opt-In. Przed zapisem odbiorca musi jawnie potwierdzić, że subskrybuje newsletter, z linkiem do konkretnych informacji o ochronie danych newslettera. form_element_linked_checkbox pozwala używać w tym samym formularzu kilku checkboxów z własnym linkiem, dzięki czemu obok zgody RODO można osobno zapytać o wyraźną zgodę newsletterową. To ważne, bo RODO wymaga oddzielnych zgód, a ogólna checkbox “Zgadzam się ze wszystkim” nie wystarcza prawnie.

Architektura techniczna tkwi w systemie pluginów Form Framework

TYPO3-Form-Framework jest świadomie rozszerzalny: każde rozszerzenie może rejestrować własne elementy formularzy, które pojawiają się w edytorze YAML i są używalne w backendzie przez drag-and-drop. form_element_linked_checkbox wykorzystuje ten mechanizm i rejestruje nowy element “LinkedCheckbox” przez YAML Form-Setup i obszar definicji elementów formularzy. Redaktorzy przeciągają element do swojego formularza, dokładnie tak jak robiliby to ze standardowym checkboxem, i konfigurują etykietę, tekst linku i cel w szczegółowym panelu.

Wewnętrznie rozszerzenie rozszerza klasę Checkbox i dodaje properties dla linkTarget, linkText i wrapLabel. Renderowanie odbywa się przez własny partial Fluid, który dzieli tekst etykiety na “before”, “linkText” i “after” i rozpina klikalny obszar tylko nad częścią linku. Kliknięcie linku otwiera stronę docelową, bez przełączania checkboxa. Dla dostępności cyfrowej to ważne, bo screen-readery czytają link jako oddzielny element, a checkbox może być obsługiwany niezależnie od tego.

Konfiguracja odbywa się bezpośrednio w edytorze YAML Form-Framework: po przeciągnięciu elementu do formularza pojawiają się pola “Etykieta przed linkiem”, “Tekst linku”, “Etykieta po linku” i “Cel linku” w prawej szczegółowej kolumnie. Cel może być wewnętrzną stroną, linkiem do pliku lub zewnętrznym URL. Walidacja obowiązkowa jest ustawiana jak przy standardowym elemencie przez zakładkę Validators.

Częste problemy dotyczą wielojęzyczności, stylizacji i komunikatów walidacji

Pierwszy temat wsparcia to tłumaczenie. Etykieta składa się z trzech części, a każda część musi być oddzielnie pielęgnowana w każdym języku. W praktyce oznacza to: dla dwujęzycznej instalacji (PL/EN) pielęgnacja się podwaja. Kto pracuje z ext:l10nmgr, powinien wyraźnie referencjonować klucze LLL w definicji formularza, żeby import/eksport działał porządnie. Trick z większych projektów: trzy części etykiety przechowywać w jednym kluczu LLL z placeholderami i przy wyjściu składać po stronie serwera. To wyraźnie redukuje liczbę stringów do tłumaczenia.

Drugim tematem jest stylizacja. Wiele systemów designu pracuje z niestandardowymi checkboxami, które są odtwarzane przez CSS z konstruktu span lub label. Domyślny szablon rozszerzenia dostarcza prosty wrapper, który koliduje z niektórymi frameworkami CSS. Zalecamy nadpisać partial w pakiecie overlay i dopasować konstrukcję do reszty stylizacji formularza.

Po trzecie, komunikaty walidacji są częstą pułapką. Gdy użytkownik nie zaznaczy checkboxa, powinno pojawić się “Proszę zgodzić się z polityką prywatności”, a nie domyślny komunikat “Pole wymagane”. Rozszerzenie wspiera niestandardowe komunikaty błędów przez formElementsDefinition w YAML Form; komunikat można dostosować per element. Dla dostępności cyfrowej to ważne, bo screen-readery bezpośrednio odczytują komunikat błędu, a nieprecyzyjne komunikaty nie dają pomocy. Zalecamy formułować każdy komunikat błędu tak, aby był zrozumiały niezależnie od kontekstu.

TYPO3 v12 i v13 są w pełni wspierane, migracja v10 wymaga dostosowania YAML

form_element_linked_checkbox jest dostępne dla TYPO3 v11, v12 i v13. Struktura YAML Form-Framework zmieniła się między v10 a v12 w szczegółach, przede wszystkim przy rejestracji elementów custom. Przy upgrade instalacji v10 definicje formularzy, które używają elementu, muszą być przestawione na nową składnię YAML.

W projektach Gosign migrujemy rozszerzenie jako część refactoringu Form-Framework, nie pojedynczo. Nakład pracy jest zazwyczaj minimalny, bo element w każdym formularzu jest referencjonowany tylko przez swój identyfikator typu. Przy migracji sprawdzamy dodatkowo, czy teksty zgody RODO po upgrade TYPO3 są poprawnie renderowane w każdym języku, i aktualizujemy linki polityki prywatności, jeśli zostały zmienione w strukturze URL lub zawartości tekstowej.