Zum Inhalt springen

Seit sechs Jahren (und mittlerweile fünf LTS-Versionen!) ist das Form Framework bereits im TYPO3 Core enthalten. Und auch meine drei Extensions "form_distribution" (07/2017), "form_examples" (01/2018) und "form_variants" (10/2018) haben ein paar Jahre auf dem Buckel.
Für jede TYPO3-Version existiert auf GitHub ein eigener, für diese Version optimierter Branch der drei Extensions. "form_examples" wurde darüber hinaus immer wieder um neue Beispiele ergänzt.

Also alles prima?

Tatsächlich habe ich bei der Vorbereitung eines Talks zu "Form Framework Grundlagen" im April festgestellt, dass ich die Extensions heute anders umsetzen würde.

Für den Talk hatte ich die Extensions provisorisch aktualisiert – mit dem dort erhaltenen Feedback im Gepäck ging es die letzten Wochen dann darum, jede Komponente einmal auf den Prüfstand zu stellen.

Die Ziele:

  1. Weniger Komplexität
  2. Mehr Praxisnähe
  3. Bessere Nachvollziehbarkeit
  4. Keine Auswirkung von Konfigurationen auf andere Formulare

Die nachfolgenden Punkte umfassen nur die Änderungen, nicht die kompletten Extension-Features.

TYPO3-Kompatibilität

Die Überarbeitung erfolgte auf Grundlage von TYPO3 v12. Für alle drei Extensions habe ich Backports für TYPO3 v11 und v10 erstellt und dabei versionsspezifische Anpassungen in Konfigurationen und Templates vorgenommen. Die Branches für TYPO3 v8 und v9 bleiben in den GitHub-Repositories vorhanden, sind aber obsolet.

Das Starter Kit – EXT:form_distribution

Das Starter Kit wurde in mehrfacher Hinsicht vereinfacht und selten benötigte Komplexität entfernt.

Vereinfachte Konfiguration

Ich hatte im Starter Kit eine Möglichkeit integriert, Formular-Templates im Frontend nach Seitenbaum zu trennen. So hätte man das Bootstrap-Framework für Website A verwenden können und ein anderes HTML-Markup für Website B. Auf die gleiche Weise hätte man verschiedene Übersetzungen je Seitenbaum laden können.

In eigenen Projekten habe ich eine solche Trennung schon häufiger benötigt. Oftmals besitzen TYPO3-Projekte aber nur einen Seitenbaum. Daher lädt das Starter Kit nun alle Konfigurationen global, was die Einrichtung erleichtert.

Diese Möglichkeit der Trennung werde ich bald in einem neuen Tutorial beschreiben. Und ich werde dies mit zwei weiteren Lösungswegen vergleichen.

Wegfall des eigenen Form-Prototyps

Der bislang vorhandene Prototyp "basicContactForm" war überflüssig und wurde entfernt.

Logische Template-Struktur

Inzwischen gibt es eine offizielle Empfehlung zur Verzeichnisstruktur in Sitepackages. An dieser habe ich mich orientiert, Ordner angelegt und entsprechende Template-Pfade vorkonfiguriert.

Vorbereitete Sprachdateien

Wer eine mehrsprachige Website betreut, kann die Einbindung von XLIFF-Dateien in der Formular-Konfiguration einfach aktivieren.

Für das enthaltene Kontaktformular werden XLIFF-Dateien für Deutsch und Englisch mitgeliefert.

Die Beispiel-Sammlung – EXT:form_examples

Begrenzung der Konfigurationen durch eigene Formular-Prototypen

Bislang hatte ich den "standard"-Prototypen des Form Frameworks erweitert. Problem dabei: das hatte Auswirkungen auf alle Formulare in der TYPO3-Installation. Dasselbe galt auch für Ergänzungen im Form Editor des TYPO3-Backends.

Mit Prototypen lassen sich auch der Form Editor und die Plugin-Overrides beeinflussen: ihr könnt für einen ausgewählten Prototyp z.B.:

  • im Form Editor nur noch Textfelder und Checkboxen zur Verfügung stellen und
  • alle Finisher bis auf den SaveToDatabase-Finisher entfernen;
  • im Plugin den Override eines neuen Finishers erlauben

Daher werden alle Formular-Konfigurationen nun im neuen Prototyp "standardExamples" definiert. Der Name soll nahelegen, dass ihr die darin enthaltenen Konfigurationen in eurem TYPO3-Projekt auch gern im "standard"-Prototypen setzen könnt.

Außerdem gibt es eigene Prototypen für die FluidEmail-Beispiele sowie für ein Beschwerdeformular. Auch hier war das Motiv die Begrenzung der Konfigurationen auf einzelne Formulare.

Damit ihr die Arbeit mit verschiedenen Prototypen besser nachvollziehen könnt, habe ich sie im Form Manager ergänzt:

Individuelle FluidEmail-Templates – generell und für einzelne Formulare

Das bestehende Beispielformular wurde um ein zweites ergänzt, um mehrere Vorgehensweisen getrennt demonstrieren zu können. Die Konfigurationen habe ich logischer gestaltet.

Neue Grundkonfiguration

  • Eigener Prototyp zur Begrenzung der Konfigurationen
  • Individuelle E-Mail-Templates für EmailToSender und EmailToReceiver
  • Mehrsprachige Formulare und E-Mails

Beide Beispielformulare versenden dadurch unterschiedliche E-Mail-Templates an Absender und Empfänger. Das ermöglicht individuelle Inhalte und Designs je E-Mail.

Eine neue "Footer"-Section erlaubt es zudem, den Inhalt des E-Mail-Footers über das Mail-Template zu setzen (statt über das grundlegendere E-Mail-Layout).

Durch einen Blick in die Templates und Konfigurationen wird sich vieles von selbst erklären. Ergänzend gibt es ein Tutorial zur Verwendung von FluidEmail im Form Framework.

E-Mail-Template-Auswahl im Form Editor

Über die Form Configuration wird bereits ein eigener templateName für beide E-Mail-Finisher gesetzt. Im zweiten Beispielformular überschreiben wir diesen Wert jetzt in dessen Form Definition, um eine E-Mail mit anderem Inhalt an den Absender senden könnte.

Das so zugewiesene E-Mail-Template verwendet auch ein zweites E-Mail-Layout mit anderer Farbgebung.

Um den templateName-Override nicht händisch in YAML setzen zu müssen, habe ich mit geringem Aufwand ein Auswahlfeld für den EmailToSender-Finisher im Form Editor ergänzt. So kann der Redakteur das E-Mail-Template selbst im Backend auswählen.

Nur in TYPO3 v12 gibt es derzeit ein Problem mit dem Sprachhandling in E-Mails: Formularfeld-Labels und E-Mail-Betreff werden zwar durch das eigene Handling des Form Frameworks korrekt übersetzt. Aber die selbst ergänzten E-Mail-Texte werden direkt per f:translate ViewHelper übersetzt – und da greift die Frontendsprache aktuell nicht.
Ich vermute einen Core-Bug durch die vorgenommenen Anpassungen am Übersetzungsverhalten. Dies muss ich aber noch näher untersuchen.

Erweiterte Template-Struktur

Wie im Starter Kit, so habe ich mich auch hier an der offiziellen Empfehlung orientiert. Ergänzt wurde hier eine Trennung (inkl. Vererbung) nach Prototyp, wie ich am Beispiel des neuen Beschwerdeformulars zeige.

Übersetzungsdateien

Alle Formulare, bei denen die mitgelieferten XLIFF-Übersetzungsdateien geladen werden, sind jetzt auch vollständig übersetzt. Die Labels innerhalb der XLIFF-Dateien wurden praxisgerecht gruppiert.

Dokumentation

In Templates und Konfigurationen habe ich einige Hinweise ergänzt, die Funktionen identifizieren und mögliche Arbeitsweisen erläutern.

In den XLIFF-Dateien wurden die Kommentare zu möglichen Übersetzungs­schlüsseln erweitert.

Die README.md wurde komplett überarbeitet und neu strukturiert.

Die Condition-Beispiele – EXT:form_variants

Übersetzung mit Varianten

In den Conditions hatte ich die aktuelle Frontend-Sprache aus der Locale ausgelesen:

condition: 'siteLanguage("locale") == "de_DE.UTF-8"'

Da sich die Schreibweise je nach System aber unterscheiden kann (z.B. de_DE), lese ich jetzt den ISO-639-1-Code der Sprache aus der Site Configuration aus:

condition: 'siteLanguage("twoLetterIsoCode") == "de"'

Finisher-Overrides

Auch Finisher können mit Form-Varianten angepasst werden – die Arbeitsweise ist hier aber anders. Hierzu habe ich ein neues Beispiel-Formular ergänzt.

Diverses

Auch hier wurde die Extension-Struktur aktualisiert und veraltete Konfigurationen entfernt.

Nächste Schritte

Die Extensions wurden runderneuert. Nun sind die Tutorials fällig:

Mein erstes Tutorial zum Form Framework (aus 2017) erklärt bislang die gesamte Form-Konfiguration im eigenen Sitepackage; darauf aufbauend dann die Einrichtung unterschiedlicher Templates durch einen neuen Prototypen.

Ein Prototyp ist aber nur eine von drei Möglichkeiten, individuelle/abweichende Templates innerhalb einer TYPO3-Installation zu erhalten. Daher werde ich das bestehende Tutorial so anpassen, dass es speziell die Arbeit mit mehreren Formular-Prototypen behandelt.

In einem neuen, bereits in Arbeit befindlichen Artikel werde ich dann die drei Lösungs­möglichkeiten miteinander vergleichen (und auf bestehende Tutorials zur Einrichtung verlinken). Denn im TYPO3 Form Framework führen immer mehrere Wege zum Ziel – und der beste ist vom Projekt abhängig.

Nachtrag: der Artikel "TYPO3 Form Framework: 3 Lösungen für individuelle Templates" ist jetzt verfügbar und das bestehende Tutorial wurde überarbeitet.

Zur News-Übersicht