Die TYPO3-Er­wei­te­rung Form wird genutzt, um un­ter­schied­li­che Formulare für eine TYPO3-Website zu erstellen. Nut­ze­rin­nen und Nutzer können dabei auf be­stehen­de Templates zu­rück­grei­fen oder ein komplett neues Formular anlegen.

Was ist TYPO3 Form?

TYPO3 Form ist eine Er­wei­te­rung für das CMS TYPO3, die es Nut­ze­rin­nen und Nutzern erlaubt, un­ter­schied­li­che Formulare in eine Website ein­zu­bau­en. Die Extension bietet dabei sehr in­di­vi­du­el­le Kon­fi­gu­ra­ti­ons­op­tio­nen und eine Vielzahl von nütz­li­chen Templates. TYPO3 Form kann nicht nur von Ent­wick­le­rin­nen und Ent­wick­lern bei der Er­stel­lung der Website genutzt werden, sondern auch von Re­dak­teu­rin­nen und Re­dak­teu­ren, die mit den passenden Templates nur wenige Klicks zur Im­ple­men­tie­rung benötigen.

Die For­mu­lar­de­fi­ni­tio­nen werden in einer YAML-Kon­fi­gu­ra­ti­ons­da­tei ge­spei­chert und lassen sich so pro­jekt­über­grei­fend verwenden. Durch den Einsatz von Form Finishern werden Formulare, die im Frontend aus­ge­füllt wurden, in der Datenbank gesichert und bei Bedarf wei­ter­ver­ar­bei­tet.

TYPO3 für Ihr Hosting Paket
  • Einfach: mit wenigen Klicks in­stal­liert
  • Sicher: SSL-Zer­ti­fi­kat inklusive
  • Schnell: PHP8, OPcache und SSD Webspace

Wofür wird TYPO3 Form genutzt?

Form kann für jede Art von TYPO3-Formular ein­ge­setzt werden. Durch die an­ge­spro­che­nen Templates und Kon­fi­gu­ra­ti­ons­mög­lich­kei­ten sind viele ver­schie­de­ne Ein­satz­zwe­cke für die Extension denkbar. Besonders häufig wird die Er­wei­te­rung genutzt, um Kon­takt­for­mu­la­re auf einer Website an­zu­bie­ten. Durch Finisher können dann zum Beispiel Be­stä­ti­gungs­mails versendet, Wei­ter­lei­tun­gen ein­ge­setzt oder Be­nach­rich­ti­gun­gen an die Ad­mi­nis­tra­ti­on ver­an­lasst werden. Auch die Ein­bet­tung eines Formulars von Dritt­an­bie­tern ist über TYPO3 Form pro­blem­los möglich. Je nach Kon­fi­gu­ra­ti­on kann dann auch das Re­dak­ti­ons­team Formulare neu erstellen oder be­stehen­de Formulare nach eigenen Vor­stel­lun­gen anpassen.

TYPO3 Form: Welche Rollen spielen Finisher?

Die so­ge­nann­ten Finisher spielen eine wichtige Rolle innerhalb der Struktur von TYPO3 Form. Hierbei handelt es sich um Aktionen, die durch­ge­führt werden sollen, sobald ein Formular voll­stän­dig aus­ge­füllt und ab­ge­schickt wurde. Die so erhobenen Daten können zum Beispiel ge­spei­chert und gesammelt werden – eine Aufgabe, die durch den ent­spre­chen­den Finisher erfüllt wird. Auch wenn Sie eine Be­stä­ti­gungs­mail versenden oder eine Info über das aus­ge­füll­te Formular erhalten möchten, gibt es dazu die passenden Optionen.

Features der TYPO3-Form-Er­wei­te­rung

Das TYPO3-Form-Framework enthält zahl­rei­che Werkzeuge, die es Ihnen erlauben, Formulare in­di­vi­du­ell für Ihren Bedarf zu erstellen oder be­stehen­de Templates zu verändern. Folgende Features gehören unter anderem zum Umfang der Er­wei­te­rung:

  • Ein Editor, mit dem Sie eigene Formulare erstellen können
  • JS API für die Er­wei­te­rung des Editors
  • Templates für vor­ge­fer­tig­te Formulare
  • Zu­sätz­li­che Elemente für die schnel­le­re Anpassung
  • Die Mög­lich­keit, Formulare in einer YAML-Kon­fi­gu­ra­ti­ons­da­tei zu speichern
  • Pro­to­ty­pen für eigene Formulare
  • Die Mög­lich­keit, eigene Elemente zu im­ple­men­tie­ren
  • Ein­ge­bau­te Finisher für E-Mail, Wei­ter­lei­tun­gen, Da­ten­bank­spei­che­run­gen und mehr
  • Optionen zur Er­stel­lung eigener Finisher
  • Eigene Prüf­op­tio­nen bei Bedarf
  • Au­to­ma­ti­scher Spam­schutz

TYPO3 Form in­stal­lie­ren

Die Extension TYPO3 Form gehört zwar zur Kern­aus­stat­tung des Content-Ma­nage­ment-Systems. Da sie stan­dard­mä­ßig nicht in­stal­liert ist, müssen Sie die In­stal­la­ti­on aber manuell nachholen, wenn Sie die Er­wei­te­rung nutzen möchten.

TYPO3 Form: In­stal­la­ti­on via Composer

Haben Sie TYPO3 mit Composer in­stal­liert, in­stal­lie­ren bzw. ak­ti­vie­ren Sie die Er­wei­te­rung fol­gen­der­ma­ßen:

  1. Über­prü­fen Sie mit dem folgenden Code, ob die Er­wei­te­rung aktiviert ist:
composer show | grep form
bash
  1. Ist TYPO3 Form nicht in­stal­liert, verwenden Sie an­schlie­ßend diesen Code:
composer require typo3/cms-form
bash

TYPO3-Form-In­stal­la­ti­on im Backend

Bei einer klas­si­schen TYPO3-In­stal­la­ti­on ohne Composer ist Form in TYPO3 bereits hin­ter­legt, aber in den meisten Fällen noch nicht aktiviert. In diesem Fall müssen Sie lediglich die beiden folgenden Schritte durch­füh­ren:

  1. Rufen Sie im Backend die Option „Ver­wal­tungs­werk­zeu­ge“ und dann „Er­wei­te­run­gen“ auf.
  2. Klicken Sie beim Eintrag „TYPO3 CMS Form“ auf das „Ak­ti­vie­ren“-Icon.
Bild: TYPO3 Form im Backend aktivieren
De­ak­ti­vier­te TYPO3-Ex­ten­si­ons sind im Er­wei­te­rungs­me­nü des Backends aus­ge­graut.

Formulare anlegen mit TYPO3 Form

Am ein­fachs­ten erstellen Sie ein neues Formular mit dem TYPO3-Form-Framework über das Backend. Klicken Sie dafür im CMS auf der linken Seite auf das Modul „Formulare“, um die For­mu­lar­ver­wal­tung zu öffnen. Drücken Sie auf „Neues Formular erstellen“, um ein neues Formular anzulegen. An­schlie­ßend besitzen Sie zwei Optionen: Nutzen Sie ein komplett leeres Formular oder greifen Sie auf ein bereits vor­de­fi­nier­tes Formular zurück.

Bild: Neues Formular erstellen mit TYPO3 Form
Für maximale Frei­hei­ten bei der Ge­stal­tung Ihres Formulars wählen Sie die Option „+ Leeres Formular“ aus – an­dern­falls bietet die Option „+ Vor­de­fi­nier­tes Formular“ wertvolle Hil­fe­stel­lun­gen.
Hinweis

Haben Sie bereits mit TYPO3 Form ge­ar­bei­tet und Formulare erstellt, werden Ihnen in der For­mu­lar­ver­wal­tung bereits angelegte oder genutzte Vorlagen angezeigt.

Leeres Formular

Wenn Sie mit Form ein gänzlich neues TYPO3-Formular anlegen möchten, gehen Sie dabei wie folgt vor:

  1. Klicken Sie auf „+ Leeres Formular“.
  2. Geben Sie dem Formular einen passenden und innerhalb des TYPO3-Backends ein­zig­ar­ti­gen Namen.
  3. Be­stä­ti­gen Sie den Spei­cher­ort und die Kon­fi­gu­ra­ti­on Ihres Formulars, indem Sie auf „Next“ drücken.
Bild: TYPO3 Form: Bestätigung der Formularkonfiguration
Sobald Sie die Ein­stel­lun­gen für das neue TYPO3-Formular bestätigt haben, wird das Kon­fi­gu­ra­ti­ons­me­nü geladen.
  1. Nun können Sie Ihr neues Formular anpassen: Unter „For­mu­lar­na­me“ können Sie den zuvor an­ge­ge­be­nen Namen bei Bedarf noch einmal ändern. Im dar­auf­fol­gen­den Feld legen Sie fest, welche Be­schrif­tung der Absenden-Button erhalten soll.
  2. Im Feld „Finisher“ wählen Sie die Aktion aus, die TYPO3 Form nach einem Klick auf den ab­schlie­ßen­den Formular-Button ausführen soll – z. B. eine Wei­ter­lei­tung auf eine andere Seite.
Bild: TYPO3-Formular: Finisher hinzufügen
Damit Sie Finisher-Optionen wie eine direkte E-Mail an Sie selbst in TYPO3 Form ein­stel­len können, müssen Sie zuvor eine ent­spre­chen­de Adresse im Backend hin­ter­le­gen.
  1. Klicken Sie nun auf „Step“ und hin­ter­le­gen Sie einen aus­sa­ge­kräf­ti­gen Namen für die erste Seite des Formulars. Außerdem können Sie die Be­schrif­tung für den „Weiter“- und den „Zurück“-Button anpassen, falls Sie ein mehr­sei­ti­ges Formular erstellen möchten. Einen neuen Schritt fügen Sie dabei über die Schalt­flä­che „Neuen Schritt erstellen“ hinzu.
Bild: TYPO3 Form: Neuen Schritt erstellen
Sobald Sie einen neuen Schritt hin­zu­ge­fügt haben, können Sie diesen im Formular-Menü über die Pfeil­tas­ten auswählen.
  1. Im nächsten Schritt klicken Sie auf „Neues Element erstellen“, um den Inhalt des Formulars zu gestalten. Dabei haben Sie un­ter­schied­li­che Mög­lich­kei­ten: Neben reinen Text­fel­dern, die zum Beispiel für Namen, Adressen oder Kon­takt­da­ten genutzt werden können, gibt es unter anderem Check­bo­xen, einfache oder mehrfache Aus­wahl­mög­lich­kei­ten und fort­ge­schrit­te­ne Elemente wie Upload-Buttons, Da­tuman­ga­ben, Pass­wort­ein­ga­be oder ver­steck­te Elemente.
Bild: TYPO3 Form: Elemente hinzufügen
Fügen Sie nach­ein­an­der die ge­wünsch­ten Elemente für Ihr TYPO3-Formular hinzu – die Rei­hen­fol­ge können Sie im Nach­hin­ein jederzeit per Drag-and-Drop anpassen.
  1. Klicken Sie die einzelnen Elemente nach dem Hin­zu­fü­gen an, können Sie diese in­di­vi­du­ell be­ar­bei­ten und bei­spiels­wei­se den Feldnamen spe­zi­fi­zie­ren oder einen Platz­hal­ter­wert vorgeben. Speichern Sie das Formular, sobald Sie alle ge­wünsch­ten Felder und Seiten erstellt haben.

  2. Möchten Sie ein er­stell­tes TYPO3-Formular einbinden, gehen Sie fol­gen­der­ma­ßen vor: Wählen Sie die Seite an und klicken Sie auf „+ Inhalt“. Wechseln Sie im linken Sei­ten­me­nü zum Menü „For­mu­lar­ele­men­te“ und drücken Sie auf „Formular“. Im letzten Schritt wechseln Sie in den Tab „Plugin“ und wählen dort das mit der Er­wei­te­rung erzeugte Formular aus.

Bild: TYPO3: Mit Form erstelltes Formular einbinden
Im aus­klapp­ba­ren Dropdown-Menü finden Sie alle Formulare, die Sie mit TYPO3 Form erstellt haben.

Vor­de­fi­nier­tes Formular

Auch für TYPO3 Form gibt es ein­satz­fer­ti­ge Vorlagen, die Sie für Ihre Website nutzen können. Klicken Sie dafür auf „Vor­de­fi­nier­tes Formular“ und wählen Sie den passenden Typ aus (stan­dard­mä­ßig ist im Core lediglich die Variante „Einfaches Kon­takt­for­mu­lar“ vorhanden). Im Anschluss können Sie die Vorlage nach Ihren Be­dürf­nis­sen anpassen. Danach fügen Sie auch dieses Formular wie zuvor ge­schil­dert einer be­lie­bi­gen Seite Ihres TYPO3-Projekts hinzu.

Bild: TYPO3 Form: Vordefiniertes Formular
Nutzen Sie das Dropdown-Menü, um die ge­wünsch­te Vorlage für Ihr TYPO3-Formular aus­zu­wäh­len.
E-Mail-Marketing-Tool
Jetzt News­let­ter versenden und Umsatz ge­ne­rie­ren
  • Schnelle, KI-gestützte Be­ar­bei­tung & zahl­rei­che Vorlagen
  • Un­kom­pli­zier­ter, DSGVO-konformer News­let­ter-Versand
  • Ef­fi­zi­en­te, nahtlose Anbindung an Ihren On­line­shop

Reviewer

Zum Hauptmenü