Die EXT:form ist die offizielle und leistungsstarke Formularextension von TYPO3. Sie ist seit TYPO3 v8 im Core enthalten und ermöglicht die Erstellung von komplexen Formularen über eine einfache Konfigurationsoberfläche oder YAML-Dateien.
Hauptfunktionen der EXT:form
1. Drag & Drop Form Builder
- In TYPO3s Backend gibt es eine visuelle Oberfläche, mit der man Formulare einfach zusammenstellen kann.
2. Flexible Konfiguration mit YAML
- Die Formulare werden in YAML-Dateien gespeichert, wodurch sie leicht angepasst und wiederverwendet werden können.
3. Vielfältige Formularelemente
- Texteingaben, Dropdowns, Checkboxen, Radiobuttons, Datei-Uploads etc.
4. Mehrstufige Formulare
- Unterstützung für mehrseitige Formulare.
5. Validierung & Logik
- Validierungen sind möglich (z. B. Pflichtfelder, E-Mail-Format etc.).
- Bedingungen und Logiken können definiert werden.
6. E-Mail-Benachrichtigungen
- Formulardaten können per E-Mail versendet oder gespeichert werden.
7. Erweiterbarkeit
- Anpassung durch eigene Validatoren, Finisher und Rendering-Templates.
8. Spam-Schutz
- Unterstützung von reCAPTCHA und Honeypot-Techniken.
Architektur der Formulare
Formulare in EXT:form bestehen aus mehreren Komponenten:
- Form definition (YAML oder Backend-Konfiguration)
- RenderEngine (Fluid-Templates für Frontend-Anzeige)
- Finisher (z. B. E-Mail-Versand oder Speicherung in der Datenbank)
Typische Anwendungsfälle
- Kontaktformulare
- Anmeldeformulare für Events
- Feedback-Formulare
- Bewerbungsformulare mit Datei-Upload
In diesem Video besprechen wir die grundlegende Funktionsweise der TYPO3 Extension „Forms“. Mit Forms sind Sie in der Lage, eigene Formulare zu definieren und auf Ihrer Website einzubinden.
Das Erstellen eines Formulars erfolgt in drei Schritten:
- Anlegen eines neuen Formulars
- Definition der einzelnen Felder des Formulars
- Definition der Finisher
1. Anlegen eines neuen Formulars
Gehen Sie hierzu auf das Modul „Forms“. Falls Sie das Modul nicht sehen, müssen Sie es von Ihrem Administrator freischalten lassen. Es ist nicht ratsam, dass jeder TYPO3-Redakteur Formulare erstellen kann. Hier sieht man nun die bereits existierenden Formulare. Wir wollen als Beispiel ein Formular „Angebotsanfrage“ aufnehmen.
Dazu klicken wir auf „Create new form“ und wählen dann „Blank form“ aus.
Dann geben wir den Namen des Formulars an und bestätigen das Ganze.
2. Anlegen der Felder des Formulars
Man sieht hier schon die Möglichkeit, mehrstufige Formulare definieren zu können. In unserem Fall benötigen wir das aber nicht., weshalb ich jetzt nur Step1 überschreibe.
Im nächsten Schritt legen wir nun mit „Create new Element“ die einzelnen Felder an, die das Formular enthalten soll. TYPO3 bietet eine ganze Reihe von Feldtypen mit unterschiedlicher Funktionalität.
Ich fange mal mit der Anrede als Auswahlfeld erscheinen. Hierfür bietet sich ein Single-Select-Feld an.
Nach der Auswahl haben wir am rechten Rand die Möglichkeit, bestimmte Eigenschaften für das jeweilige Feld zu konfigurieren. Im Grunde genommen ist das alles selbsterklärend. Deshalb gehe ich das mal in hoher Geschwindigkeit durch.
Die nächsten Felder wären dann Vor- und Nachname, die beide Textfelder sind. Einen Default-Wert gibt es dafür natürlich nicht. Eine Autocomplete-Funktion ist für den User nützlich, da er seinen Namen wahrscheinlich schon öfter mal eingegeben hat.
Ein weiteres Feld wäre dann die eMail-Adresse. Hier kann man ebenfalls Autocomplete-Funktion nutzen und einen Validator setzen, der die Syntax der angegebenen Mailadresse prüft.
Als nächstes bieten wir dann noch eine Produktauswahl an, zu der ein Angebot angefragt werden kann.
Und abschließend dann noch die Möglichkeit eine Textnachricht(Textarea = mehrzeiliges Textelement) zu ermöglichen.
Das speichern wir und schauen es uns in der Vorschau an.
3. Definition des Finischer
Als letzter Schritt bei der Definition eines neuen Formulars, ist nun festzulegen, was damit überhaupt passieren soll. Dazu gehen wir wieder auf das Formular, benennen den Submit-Button um und definieren dann sogenannte Finisher:
Mit „Email to sender“ legen wir die Parameter für die Bestätigungsmail an den Besucher fest. Dabei kann man mit {+} auf die im Formular angegebenen Werte zugreifen.
Mit dem Finisher „Email to receiver“ wird dann die Mail an den Betreiber der Website konfiguriert. In “Sender address” sollte die Mailadresse angegeben werden, mit der TYPO3 Mails SPAM-sicher versendet. Unter „Reply-To Recipients“ kann dann die Mailadresse des Besuchers hinterlegt werden.
Als letztes muss dann noch definiert werden, was nach Abschicken des Formulars im Browser angezeigt werden soll. Hier kann man eine Nachricht oder ein Content-Element anzeigen oder gleich an eine Danke-Seite verweisen. Wir entscheiden uns hier für Letzteres und legen diese Seite an, damit sie im Finisher referenziert werden kann.
Das fertige Formular kann dann als Inhaltselement vom Typ „Form“ auf jeder Seite eingefügt werden.
Dann testen wir das Ganze mal. Die Feldvalidierungen (Pflichtfeld, Syntaxcheck Mailadresse) werden korrekt durchgefürt.
Die versendeten Mails sehen gut aus. Die Optik der Mails kann angepasst werden.
