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.
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.
Überblick: Das Formular-Modul
Mehrwert von Formularen
- Individuell anpassbare Formulare: Frei konfigurierbare Eingabefelder wie Textfelder, Dropdowns, Checkboxen oder Dateiuploads.
- Mehrsprachigkeit: Formulare können mehrsprachig gepflegt werden.
- Sicherheit & Spam-Schutz: Standardmäßig stehen Funktionen wie hCaptcha, Honeypot-Felder sowie Validierungen zur Verfügung.
- Finisher: Bestimmt, was nach dem Absenden des Formulars passieren soll, z.B. E-Mail-Benachrichtigungen, Weiterleitungen oder Datenübergaben.
Formulare im Frontend
Über unsere Web-Demo sind alle verfügbaren Formular-Felder und -Optionen exemplarisch sichtbar und können ausprobiert werden. Klicke dafür hier: LINK
Hier exemplarisch ein Formular, diese können jedoch stark nach Inhalt und Zweck variieren:
Formulare anlegen
1. Bereich Formulare
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.
2. Formularliste bearbeiten
Ü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.
3. Formulare erstellen
3.1 Wurde die Option "+ Neues Formular erstellen" geklickt, kann nun zwischen einer leeren Vorlage oder der Vorlage "Einfaches Kontaktformular" gewählt werden. Beim Duplizieren kann dieser Schritt übersprungen werden und man kann über das Stiftsymbol rechts direkt mit der Bearbeitung beginnen. Gehe dazu zu Punkt 5 dieser Anleitung.
3.2 Anschließend ist zudem ein Name für das Formular einzugeben und die Eingaben zu kontrollieren.
4. Formulareinstellungen Überblick
Nach Fertigstellung des Anlegeformulars gelangst du nun in die Konfiguration des Formulars. Diese ist in drei Bereiche unterteilt, die folgende Funktion innehalten:
4.1 Elementbaum (ähnlich zum Seitenbaum): Hier werden alle hinterlegten Elemente und Schritte auf einen Blick angezeigt. Ein Element ist dabei jedes Feld im Formular, während Schritte einzelne Seiten des Formulars sind, die der Nutzer im Frontend durchläuft und visuell vom vorherigen Schritt getrennt sind.
Tipp: Versuche möglichst wenige Schritt im Formular zu verwenden, da jeder weitere Schritt die Absprungrate des Nutzers erhöhen kann.
4.2 Elementübersicht: Hier kannst du neue Elemente hinzufügen, via Drag'n'Drop die Reihenfolge ändern oder über das Stiftsymbol des Elements das jeweilige Element bearbeiten.
4.3 Elementkonfiguration: Hier konfigurierst du die einzelnen Elemente im Detail.
5. Grundeinstellungen
Bevor du jedoch mit der Elementerstellung startest empfiehlt es sich, zunächst die Grundeinstellungen des Formulars vorzunehmen. In diese gelangst du, indem du oben auf die Schaltfläche "Einstellungen" klickst und dann im rechten Bereich (siehe 5.3) die jeweiligen Einstellungen vornimmst. Näheres zu den Grundeinstellungen siehe weiter unten in dieser Anleitung zum Thema Finisher.
6. Elemente/Schritte hinzufügen
Nun können die einzelnen Elemente des Formulars hinzugefügt werden.
6.1 Über die Schaltfläche "+ Neues Element erstellen" fügst du neue Elemente hinzu. Dabei ist auf der linken Seite eine Übersicht der bisher verwendeten Elemente sichtbar.
6.2 Über "+ Neuen Schritt erstellen" kann die Abfrage dieser Elemente in mehrere Schritte unterteilt werden und ggfs. eine Zusammenfassung der Eingaben eingestellt werden.
6.3 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.
6.4 In der oberen Symbolleiste lässt sich links zwischen Bearbeitungs- und Ansichts-Modus wechseln, um eine Vorschau des Formulars zu erzeugen.
6.5 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:
- Label - beschreibt die Bezeichnung des jeweiligen Feldes
- Beschreibung - hier kann eine Erläuterung zum jeweiligen Feld hinterlegt werden, welche unterhalb des Eingabefeldes angezeigt wird
- Platzhalter - der hier eingetragene Wert / Begriff wird hellgrau im Eingabefeld sichtbar sein (z.B. Vor- und Nachname)
- Standardwert - dieser Wert / Begriff wird im Formular vor-ausgefüllt (zur Unterscheidung von Platzhalter und Standardwert empfiehlt sich die Nutzung der Vorschau-Funktion)
- Pflichtfeld - mit der Aktivierung dieser Option kann festgelegt werden, ob das jeweilige Feld ein Pflichtfeld darstellt.
- 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).
Nutze Pflichtfelder und Validatoren sparsam, je mehr Daten du abfragst und je komplexer die Eingabe, desto höher die Absprungquote. Validatoren empfehlen sich bspw. vor allem bei E-Mail-Adressen, jedoch nicht bei allem was unterschiedliche Schreibweisen im allgemeinen Gebrauch zulässt, wie bspw. eine Telefonnummer.
Des Weiteren sind folgende Besonderheiten zu einzelnen Elementen zu beachten:
- 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.
- 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 (siehe auch 7.5).
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.
Formulare auf einer Seite einbinden
Voraussetzungen
- Du hast bereits eine entsprechende Landingpage anlegt.
- Du hast bereits eine Rahmenbühne konfiguriert in der das Formularmodul liegen soll.
7. Formularmodul anlegen
7.1 Klicke auf "+ Neuen Inhalt erstellen" in deiner Rahmenbühne.
7.2 Wähle unter "Formulare" -> "Formular".
7.3 Gehe nun in den Reiter "Plug-In:" und wähle dort unter "Formulardefinition" dein erstelltes Formular aus der Liste aus.
Du kannst in jedem Formular die Finisher aus den Formulareinstellungen noch individuell überschrieben. Dies geht im Reiter "Allgemein" (beschrieben unter den Hilfestellungen bei häufigen Fehlern).
7.4 Nun nur noch speichern und du hast dein Formular hinterlegt.
Hilfestellung bei häufigen Fehlern
Sollten bei dir die Optionen im Formular Modul nicht angezeigt werden, prüfe ob der Haken bei "Finisher-Überschreiben" gesetzt ist:
- 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 sonst bei einem Neu-Laden der Seite nach Ausfüllen des Formulars zu einer erneuten Absendung bzw. Aktivierung der Finisher kommen kann.
- 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.
- 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 Euch im Posteingang ankommen und nicht vorher durch Euren 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.
- 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 kann im Reiter Bestätigung der individuelle Bestätigungstext angepasst werden.
- 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.
Tipps für die Gestaltung von Formularen
Grundsätzlich sind einige Dinge bei der Erstellung von Formularen zu beachten:
- 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.
- Die Eingabereihenfolge und Logik der Felder und Schritte sollte klar strukturiert und erkennbar sein.
- 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.
- Um Spam-Eingaben zu vermeiden, sollte die Option hCaptcha für alle öffentlichen Formulare aktiviert werden.
- 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 ...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. ...Web Releasenotes 2023 04
Liebe Kund:innen, neben zahlreichen kleinen Fehlerbehebungen und Erweiterungen haben wir unser Produkt im Februar-Sprint für verschiedene Module optimiert. 1. NEU: destination.imageclick Ab sofort könnt ihr die Bühne destination.imageclick dazu ...