Formulare - TYPO3

Formulare - TYPO3

Mit dem Formular-Modul in destination.base habt Ihr die Möglichkeit, individuelle Web-Formulare anzulegen und flexibel in Eure Projekte einzubinden. Die Bandbreite reicht von einfachen Kontaktformularen über komplexe Umfragen bis hin zu Gewinnspielanmeldungen. Das Formular-Modul ist dabei Teil unserer redaktionellen Inhaltsmodule und somit kostenfrei für Website-Kunden nutzbar.
Info
Die folgenden Informationen geben Euch eine umfassende Übersicht über die Erstellung, Pflege und Erweiterungsmöglichkeiten unseres Formular-Moduls. Dieser Artikel ersetzt die Artikel für für ältere Versionen von TYPO3 und bündelt alle wichtigen Inhalte.
Über unsere Web-Demo sind darüber hinaus alle verfügbaren Formular-Felder und -Optionen exemplarisch sichtbar und können ausprobiert werden. 

Überblick: Das Formular-Modul

Das Formular-Modul bietet Euch:
  1. Individuell anpassbare Formulare: Frei konfigurierbare Eingabefelder wie Textfelder, Dropdowns, Checkboxen oder Dateiuploads.
  2. Mehrsprachigkeit: Formulare können mehrsprachig gepflegt werden.
  3. Sicherheit & Spam-Schutz: Standardmäßig stehen Funktionen wie hCaptcha, Honeypot-Felder sowie Validierungen zur Verfügung.
  4. Finisher: Bestimmt, was nach dem Absenden des Formulars passieren soll, z. B. E-Mail-Benachrichtigungen, Weiterleitungen oder Datenübergaben.

Formulare anlegen

Die Erstellung eines neuen Formulars sowie die Verwaltung und Bearbeitung bestehender Formulare ist über den Menüpunkt "Formulare" in der TYPO3-Seitenleiste möglich. In der Übersicht "Formularverwaltung" werden alle Formulare angezeigt, welche im jeweiligen Projekt erstellt wurden - mit Formularnamen und Speicherort. Über den Button "+ Neues Formular erstellen" kann ein neues Formular angelegt werden. Es ist aber auch möglich, bestehende Formulare zu duplizieren, indem der kleine Button mit "..." am rechten Rand geklickt wird. 
Über das Stift-Symbol lassen sich bestehende Formulare bearbeiten, während "Referenzen" die Einbindungen eines Formulars innerhalb der Website listet.



Wurde die Option "+ Neues Formular erstellen" geklickt, kann nun zwischen einer leeren Vorlage oder der Vorlage "Einfaches Kontaktformular" gewählt werden. Anschließend ist zudem ein Name für das Formular einzugeben und die Eingaben zu kontrollieren. Nun können die einzelnen Elemente des Formulars über die Schaltfläche "+ Neues Element erstellen" hinzugefügt werden. Dabei ist auf der linken Seite eine Übersicht der bisher verwendeten Elemente sichtbar, zudem kann über "+ Neuen Schritt erstellen" die Abfrage dieser Elemente in mehrere Schritte unterteilt werden und ggfs. eine Zusammenfassung der Eingaben eingestellt werden.

In der Seitenleiste am rechten Rand können die Einstellungen des jeweils ausgewählten Elements / Schrittes angepasst werden - diese sind je nach Element / Schritt unterschiedlich. In der blau unterlegten Symbolleiste lässt sich links zwischen Bearbeitungs- und Ansichts-Modus wechseln, um eine Vorschau des Formulars zu erzeugen. In der darüber liegenden Symbolleiste befinden sich wiederum die Schaltflächen zum Speichern des Bearbeitungsstandes (welche regelmäßig genutzt werden sollte, vor allem beim Erstellen mehrerer Schritte), zum Anpassen der allgemeinen Formular-Einstellungen sowie dem Anpassen des Versionsverlaufes bzw. der einzelnen Bearbeitungsschritte. 


Informationen zu einzelnen Elementen und Schritten

Wir haben versucht, die Beschreibungen der einzelnen Feld-Einstellungen und Optionen so verständlich wie möglich zu gestalten. Für das Element "Text" stehen beispielhaft folgende Optionen zur Verfügung:
  1. Label - beschreibt die Bezeichnung des jeweiligen Feldes
  2. Beschreibung - hier kann eine Erläuterung zum jeweiligen Feld hinterlegt werden, welche unterhalb des Eingabefeldes angezeigt wird
  3. Platzhalter - der hier eingetragene Wert / Begriff wird hellgrau im Eingabefeld sichtbar sein (z.B. Vor- und Nachname)
  4. Standardwert - dieser Wert / Begriff wird im Formular vor-ausgefüllt (zur Unterscheidung von Ptatzhalter und Standardwert empfiehlt sich die Nutzung der Vorschau-Funktion)
  5. Pflichtfeld - mit der Aktivierung dieser Option kann festgelegt werden, ob das jeweilige Feld ein Pflichtfeld darstellt.
  6. Validatoren - an dieser Stelle lassen sich Vorgaben definieren, welches Format die Eingabe des Users haben darf. Dies ersetzt im Falle von "E-Mail" allerdings keine Validierung, ob die eingegebene Mailadresse wirklich existiert. Hier wird nur auf Eingabelogiken geprüft (z.B. ob nur Zahlen oder eine Mailadresse eingegeben wurden.
Des Weiteren sind folgende Besonderheiten zu einzelnen Elementen zu beachten:
  1. Die Option Custom Check stellt eine Alternative zum Datenschutz-Check dar, welche auch für andere Anwendungsfälle genutzt werden kann. Dieser Custom Check muss zunächst für deine Seite freigegeben werden (spricht uns dafür gerne an), bevor er im TYPO3-Hauptmenü unter Datensätze > Custom Checks gepflegt werden kann. Dann muss ein Name sowie der individuelle Text hinterlegt werden, welcher dann als neues Formular-Element "Custom Check" ausgewählt werden kann.
  2. Die Option hCaptcha erfordert ein Konto beim entsprechenden Drittanbieter-Dienst sowie eine projektseitige Aktivierung. Kommt dafür bitte auf eure Ansprechpartner zu, ansonsten ist eine Nutzung dieses Elements nicht möglich. Bei der Einrichtung ist pro TYPO3-Instanz nur ein hCaptcha Site-Key + Secret Key erforderlich, welcher nach erstmaliger Registrierung auf https://dashboard.hcaptcha.com/signup abgerufen werden kann. Eine Microsite braucht keine gesonderten Daten.

Informationen zu Finishern 

Über die Schaltfläche "Einstellungen" am oberen Rand lassen sich die Finisher eines Formulars einstellen, welche ausgeführt werden, sobald ein User das Formular erfolgreich absendet. Dabei können mehrere Finisher pro Formular hinterlegt werden, welche dann in chronologischer Reihenfolge von oben nach unten ausgeführt werden. Innerhalb der Einstellungen der Finisher lassen sich Platzhalter-Werte hinterlegen, welche sich auf Formular-Eingaben des Users beziehen. Diese können per Klick auf das Symbol {+} ausgewählt werden: 
Zudem können grundsätzlich mehrere Mail-Adressen für Reply-To Empfänger / CC Empfänger / BCC Empfänger hinterlegt werden - diese können genutzt werden, um bspw. Kopien der Bestätigungsmails zu erhalten, die an die Formular-Unterzeichnenden gesendet werden. 

Um häufig austretende Fehler zu vermeiden, sind folgende Punkte explizit zu beachten: 
  1. Die Option Weiterleitung zu einer Seite muss stets als letzter Finisher der Reihenfolge eingestellt werden, da sonst die nachfolgenden Schritte nicht ausgeführt werden. Zudem ist in den Finisher-Einstellungen im Feld "Seite" die jeweilige Seiten-ID zu hinterlegen, die nach Absenden des Formulars geöffnet werden soll. Per Klick auf die darunter liegende Schaltfläche "Seite" lässt sich die gewünschte Seite im Seitenbaum manuell auswählen. Hier empfiehlt es sich, eine eigene Landing-Page anzulegen, auf die nach dem Absenden des Formulars weitergeleitet wird - diese lässt sich ausblenden und ist somit nur für Formular-Unterzeichnende abrufbar. Wir empfehlen, diese Option anstelle des Finishers Bestätigungsmeldung zu verwenden, da es bei einem Neu-Laden der Seite nach Ausfüllen des Formulars zu einer erneuten Absendung bzw. Aktivierung der Finisher kommen kann.
  2. Die Option Newsletter Subscriber Finisher ermöglicht es den Websitebesucher:innen, nach dem Ausfüllen eines Formulars, direkt eine oder mehrere Newsletter-Anmeldung durchzuführen. Dafür muss der entsprechende Finisher hinterlegt werden, im Frontend erscheint dann eine Checkbox für die Newsletter-Anmeldung, deren Beschreibungstext in den Einstellungen des Elements individualisiert werden kann. Zusätzlich muss im Formular-Plugin auf der jeweiligen TYPO3-Seite, auf der das Formular genutzt wird, ausgewählt werden, auf welchen Newsletter-Provider zugegriffen werden soll. Dazu muss unter Plugin der Newsletter-Finisher überschrieben werden und kann dann unter "Newsletter Subscriber Finisher"-Tab der gewünschte Provider ausgewählt werden.

  3. Innerhalb des Finishers E-Mail an Absender (Formular-Unterzeichner) muss im Feld Adresse des Absenders standardmäßig noreply@destination.one hinterlegt sein (dies sollte vor-eingestellt sein). Mit dieser Einstellung haben wir die besten Erfahrungen gemacht, sodass dann die Mails auch bei Ihnen im Posteingang ankommen und nicht vorher durch Ihren Mailserver abgewiesen / herausgefiltert werden. Soll die Bestätigungs-Mail nach Formular-Unterzeichnung doch von einer anderen Mailadresse / Domain versendet werden, muss der SPF-Record entsprechend gesetzt sein. Eine ausführliche Anleitung dazu ist unter Was ist ein SPF-Record? zu finden.
  4. Die Option E-Mail an Absender (Formular-Unterzeichner) kann zudem auf der jeweiligen Seite, wo das Formular eingebunden wird, individualisiert werden, sodass ein angepasster Mail-Text versendet wird. Dafür ist zunächst beim Formular-Inhaltselement in der entsprechenden Bühne das Stift-Symbol anzuklicken - anschließend muss im Reiter "Plug-In:" der Haken gesetzt werden bei "Finisher-Einstellungen überschreiben".  Anschließend kann im Reiter Bestätigung der individuelle Bestätigungstext angepasst werden.
  5. Bei Nutzung der Elemente Dateiupload und Bildupload kann der Finisher Uploads löschen integriert und an entsprechender Stelle der Finisher-Reihenfolge platziert werden, um die Uploads unmittelbar nach ihrer Verarbeitung wieder zu löschen. Wird dieser Finisher nicht eingesetzt, sind die hochgeladenen Dateien im jeweiligen Speicherpfad für Uploads zu finden - dieser kann in den Einstellungen des jeweiligen Elements angezeigt und geändert werden.

Formulare auf einer Seite einbinden

Zur Einbindung eines Formulars auf einer Seite im TYPO3 muss innerhalb eines einspaltigen Bühne das entsprechende Inhaltselement "Formular" ausgewählt werden. Im Reiter "Plug-In:" kann nun im Drop-Down-Menü "Formulardefinition" das zuvor angelegte Formular ausgewählt und mit OK bestätigt werden. Über die Optionen im Reiter "Erscheinungsbild" lassen sich ergänzend einige optische Anpassungen der Formular-Einbettung vornehmen.

Tipps für die Gestaltung von Formularen

Grundsätzlich sind einige Dinge bei der Erstellung von Formularen zu beachten:
  1. Es empfiehlt sich, so wenige Pflichtfelder wie möglich anzulegen und nur das Nötigste vom User abzufragen - so wird die Eingabe möglichst niedrigschwellig und einfach.
  2. Die Eingabereihenfolge und Logik der Felder und Schritte sollte klar strukturiert und erkennbar sein.
  3. Die SPF-Records (also die Einstellungen, welche Server im Namen eurer Domain E-Mails versenden dürfen) sollten immer aktuell bleiben und bei Fehlern geprüft werden. 
  4. Um Spam-Eingaben zu vermeiden, sollte die Option hCaptcha für alle öffentlichen Formulare aktiviert werden.
  5. Nach Erstellung eines Formulars sollte die Funktion des Formulars einmalig getestet werden.

Formulare einzelnen User-Gruppen zur Verfügung stellen

Über den Menüpunkt "Dateiliste" > form_definitions lassen sich Unterordner anlegen, die einzelnen Nutzergruppen zugewiesen werden können. Dafür muss ein entsprechender Unterordner angelegt werden, anschließend per Rechtsklick die Option "Neue Verzeichnisfreigabe" auswählen und bei "Bezeichnung" den gewünschten Titel eintragen. Wenn die gewünschten Unterordner inkl. Verzeichnisfreigabe entsprechend angelegt sind, ist eine abschließende projektseitige Konfiguration durch unsere Entwickler nötig - sprecht uns dazu gerne an. 

Speicherung und Export von Formular-Daten

Seit April 2025 ist es möglich, dass Formulardaten für einen bestimmten Verwendungszweck (bspw. Gewinnspiele) im TYPO3 gespeichert und nach dem Zweck der Verwendung wieder gelöscht werden können. Dies ist eine kostenpflichtige Anpassung und hier ist ein gewisser Abstimmungsaufwand nötig. Wendet euch dazu bitte an eure:n zuständigen Ansprechpartner:in. Der Zeitraum für die Speicherung der Daten sowie Änderungen an der Datenschutzerklärung sind zudem mit der:dem Datenschutzbeauftragten abzustimmen.

Formulare in anderen Sprachen

Um ein Formular beispielsweise auf Englisch anzulegen, ist eine Kopie des deutschsprachigen Formulars anzulegen und die Element-Labels entsprechend anzupassen. Es empfiehlt sich zudem eine entsprechende Ergänzung des Formulartitels (z.B. die Endung _EN)

    • Related Articles

    • Formulare vor Spam schützen

      Spamschutz Um Formulare vor Spam zu schützen, bieten wir für TYPO3-Standardformulare die Möglichkeit an, ein Captcha einzusetzen. Aktuell unterstützen wir die Captchas von hcaptcha. Da es sich um einen externen Service handelt, ist dazu ein Account ...

    • Formulare anlegen und pflegen

      Formulare ab TYPO3 Version 10 Inhalt: - 0:25 Einleitung und Typo3 Version nachschauen - 1:10 Anwendungsbereiche Formulare - 5:40 Erstellung Formulare - 6:40 Formulare auf der Seite einbinden FAQ: 1) Frage: Beim "Finisher" E-Mail an Empfänger - welche ...

    • Formulare anlegen und einbinden

      destination.base - Formulare In diesem Video lernst Du, wie Du in Deinem Typo3 Formulare anlegst und diese auf Deiner Seite ausspielen kannst. Mit der Formular Funktion kannst Du Formularabfragen in Deinem Backend erstellen, die der Besucher später ...

    • destination.quiz - TYPO3

      destination.quiz - Für spielerische Mitmachaktionen Die Bühne zur Steigerung der Benutzerinteraktion und -bindung auf ihrer Webseite, da es eine unterhaltsame und interaktive Erfahrung bietet. Besonders geeignet ist dieses Modul für Wettbewerbe oder ...

    • destination.bookmark - TYPO3

      destination.bookmark - Wenn Datensätze zu Lieblingen werden Mit destination.bookmark gibt es auch für eine Destinations-Website die Möglichkeit für User:innen, sowohl redaktionelle als auch strukturierte Datensätze in einer Favoritenliste zu merken. ...