Die Grundlagen
Ein Formular besteht immer aus einem Form Container der bestimmt, wo die Daten gespeichert werden und wie das Formular generell aussehen und sich verhalten soll.
In den Form Container werden dann die unterschiedlichen Felder hinzugefügt, die in dem Formular abgefragt und gespeichert werden sollen. Für diese Felder gibt es unterschiedlichste Einstellungsmöglichkeiten, von einfachen Textfeldern, die bei Bedarf direkt validiert werden können (z. B. eine E-Mail-Adresse), zu Checkboxen, Dropdowns in unterschiedlichen Varianten und Datei-Uploads.
Um das Formular zu vollenden und das Absenden der Informationen zu ermöglichen, muss zum Abschluss immer ein Submit-Button hinzugefügt werden.
Ein Formular aufbauen – Schritt für Schritt
Wir werden nun Schritt für Schritt die einzelnen Bauteile und ihre Einstellungsmöglichkeiten durchgehen. Falls du einen Quickstart-Guide für eine Newsletter-Anmeldung suchst, schaue in diesen Artikel, in dem wir nur die wichtigsten Punkte besprechen.
Der Form-Container und seine Einstellungsmöglichkeiten
Die Formularfelder und ihre Anwendungsgebiete
Der Submit-Button und seine Sonderfunktionen
Verbinden des Formulars mit einer E-Mail-Liste
Erfolgs- und Fehlermanagement
Vor-Ausfüllen der Felder bei Bestandskunden
Zusätzliche Informationen und Tracking-Daten abspeichern
Der Form Container und seine Einstellungsmöglichkeiten
Der Form Container ist das unsichtbare Grundgerüst deines Formulars. Wenn du ihn anklickst, findest du auf der linken Seite alle grundlegenden Einstellungen. Hier legst du fest, an welche Liste die Daten gesendet werden und wie das Formular nach dem Absenden reagiert.
Collect Token
Über den Collect Token bestimmst du, in welcher Liste oder Sammlung die eingegebenen Formulardaten gespeichert werden. Du hast zwei Optionen:
List: Die Daten werden einer bestimmten Liste zugeordnet. Im Dropdown darunter wählst du dann die passende Liste aus (z. B. "Customer Data"). Das ist der Standardfall für Newsletter-Anmeldungen oder Kontaktformulare.
Text: Hier kannst du den Token manuell als Freitext (z. B. URL) eingeben, was vor allem für technisch fortgeschrittene Setups relevant ist.
Appearance (Erscheinungsbild)
In diesem Bereich steuerst du das visuelle Verhalten deines Formulars:
Alternative Design: Verwende dieses für den alternativ festgelegten Style für das Formular. Das alternative Styling kann im Styling-Menü definiert werden.
Animated Labels: Kreuze dies an, um alle Beschriftungen als Platzhalter innerhalb eines Formularelements zu verwenden.
Use native Input elements: Diese Option ist vor allem technisch relevant. Wenn sie aktiviert ist, verwendet das Formular die nativen HTML-Eingabeelemente des Browsers, statt auf gestylte Custom-Elemente zu setzen. Das kann auf älteren Geräten oder in bestimmten eingebetteten Umgebungen wichtig sein, um die beste Kompatibilität sicherzustellen. Im Normalfall sollte diese Option deaktiviert bleiben.
Layout
Hier steuerst du den Abstand und das Spacing innerhalb des Form Containers:
Spacing: Über das visuelle Box-Modell kannst du den Innenabstand (Padding) des Containers an allen vier Seiten (oben, rechts, unten, links) individuell anpassen.
Gap between items: Über dieses Dropdown legst du fest, wie viel Abstand zwischen den einzelnen Formularfeldern liegt. Zur Auswahl stehen z. B. "Medium Gap" oder andere vordefinierte Abstufungen.
Success Settings
Hier legst du fest, was nach dem erfolgreichen Absenden des Formulars passiert. Du hast zwei Möglichkeiten:
Show Success modal
Show Success modal
Aktivierst du diesen Schalter, erscheint nach dem Absenden ein modales Fenster mit einer Erfolgsmeldung.
Show Success modal: Aktivierst du diesen Schalter, erscheint nach dem Absenden ein modales Fenster mit einer Erfolgsmeldung.
Open Modal (for editing): Dieser Schalter ist rein für die Bearbeitung im Editor gedacht. Wenn du ihn aktivierst, wird das Erfolgs-Modal direkt im Editor eingeblendet, sodass du den Inhalt des Modals gestalten und anpassen kannst, ohne das Formular wirklich absenden zu müssen. Vergiss nicht, ihn danach wieder zu deaktivieren.
Modal Type: Hier wählst du, wie das Modal erscheint:
Standard: Das Modal öffnet sich zentriert als klassisches Overlay im Vordergrund der Seite.
Flyout: Das Modal fährt als Seitenleiste ein, z. B. von rechts. Das eignet sich gut, wenn du mehr Platz für Inhalte benötigst, ohne die gesamte Seite zu überlagern.
Modal Style: Bestimmt das visuelle Erscheinungsbild des Modals:
Default: Das Modal wird im Standard-Stil deines Themes dargestellt.
Alternative: Das Modal verwendet einen alternativen Stil, der sich optisch vom Standard abhebt. Welche Unterschiede das konkret sind, hängt von deinem Theme ab.
Modal Size: Über dieses Dropdown kannst du die Größe des Modals festlegen. Die verfügbaren Optionen (z. B. Small, Medium, Large) bestimmen, wie viel Platz das Modal auf dem Bildschirm einnimmt.
➞ Mehr dazu im Erfolgs & Fehlermanagement
Redirect Link
Redirect Link
Alternativ oder zusätzlich kannst du die Nutzerin oder den Nutzer nach dem Absenden auf eine andere Seite weiterleiten. Du wählst dafür entweder eine interne Unterseite (Page) oder gibst eine externe URL an.
Terms and Conditions Modal
Über diesen Bereich kannst du ein Pflicht-Modal für Allgemeine Geschäftsbedingungen oder Datenschutzhinweise einblenden.
Show modal: Aktivierst du diesen Schalter, wird das Modal aktiviert.
Open Modal (for editing): Genau wie beim Erfolgs-Modal dient dieser Schalter ausschließlich der Bearbeitung im Editor. Aktiviere ihn, um das Modal direkt im Editor sichtbar zu machen und den Inhalt zu gestalten. Denk daran, ihn nach der Bearbeitung wieder zu deaktivieren.
Modal Style: Bestimmt das visuelle Erscheinungsbild des Modals:
Default: Das Modal erscheint im Standard-Style deines Themes.
Alternative: Das Modal wird in einem abweichenden Styling dargestellt. Welche Unterschiede das konkret sind, hängt von deinem Styling-Einstellungen ab.
Advanced
Dieser Bereich enthält weiterführende Einstellungen:
Hidden Fields: Hier kannst du unsichtbare Felder definieren, die beim Absenden des Formulars automatisch mitgesendet werden, ohne dass der Nutzer sie sieht. Mehr dazu findest du im Abschnitt Zusätzliche Informationen und Tracking-Daten abspeichern.
Prefill form from URL parameter: Ist diese Option aktiv, können Formularfelder automatisch mit Werten aus der URL vorausgefüllt werden. Das ist besonders nützlich für personalisierte Links. Mehr dazu im Abschnitt Vor-Ausfüllen der Felder bei Bestandskunden.
Allow updates to collection: Wenn du diese Option aktivierst, können bereits vorhandene Einträge in deiner Liste durch das erneute Absenden des Formulars aktualisiert werden, statt einen neuen Eintrag anzulegen.
Unsubscription form: Aktivierst du diesen Schalter, fungiert das Formular als Abmeldeformular. Übermittelte Kontakte werden dann aus der verknüpften Liste ausgetragen.
ID: Hier kannst du dem Form Container eine individuelle CSS-ID vergeben, die für eigene Stylings oder JavaScript-Integrationen genutzt werden kann.
Die Formularfelder und ihre Anwendungsgebiete
Innerhalb des Form Containers kannst du verschiedene Feldtypen kombinieren, um genau die Informationen abzufragen, die du benötigst. Hier ist eine Übersicht aller verfügbaren Felder:
Input
Das Input-Feld ist das einfachste und am häufigsten genutzte Formularfeld. Es eignet sich für kurze Texteingaben wie Name, E-Mail-Adresse oder Telefonnummer. Input-Felder lassen sich validieren, sodass z. B. sichergestellt wird, dass eine gültige E-Mail-Adresse eingegeben wurde.
Textarea
Die Textarea ist wie ein Input-Feld, bietet aber deutlich mehr Platz für längere Texteingaben. Sie eignet sich z. B. für persönliche Nachrichten, Kommentare oder individuelle Wünsche.
Checkbox
Eine Checkbox ist ein einfaches Ankreuzfeld, das für Ja/Nein-Entscheidungen genutzt wird. Typische Anwendungsfälle sind die Zustimmung zu Datenschutzbestimmungen oder das Abonnieren eines Newsletters.
Radio Group
Eine Radio Group besteht aus mehreren Auswahloptionen, von denen immer nur eine gleichzeitig ausgewählt werden kann. Sie eignet sich, wenn du deinen Nutzenden eine klare Auswahl zwischen mehreren Möglichkeiten anbieten möchtest, z. B. eine bevorzugte Kontaktart oder eine Größenauswahl.
Select
Das Select-Feld erzeugt ein Dropdown-Menü, aus dem genau eine Option ausgewählt werden kann. Es ist platzsparend und eignet sich gut für längere Auswahllisten, z. B. Länder, Kategorien oder Produktvarianten.
Submit Button
Der Submit Button schließt das Formular ab und sendet alle eingegebenen Daten ab. Er muss zwingend in jeden Form Container eingefügt werden, da das Formular sonst nicht abgesendet werden kann. Platziere ihn immer am Ende deines Formulars, nach allen Eingabefeldern.
➞ Mehr dazu im Erfolgs & Fehlermanagement
Multi Select
Das Multi Select-Feld funktioniert wie das Select-Feld, erlaubt aber die gleichzeitige Auswahl mehrerer Optionen. Das ist praktisch, wenn Nutzende z. B. mehrere Interessengebiete oder Produktkategorien angeben sollen.
Form Datepicker
Der Datepicker ermöglicht es Nutzenden, ein Datum über einen Kalender auszuwählen. Er eignet sich überall dort, wo ein konkretes Datum abgefragt wird, z. B. ein Geburtstag, ein Wunschtermin oder ein Lieferdatum.
Upload
Mit dem Upload-Feld können Nutzende eine Datei direkt über das Formular hochladen. Das ist nützlich für Bewerbungsformulare (Lebenslauf), Support-Anfragen (Screenshot) oder andere Anwendungsfälle, bei denen ein Dateianhang benötigt wird.
Terms and Conditions Checkbox
Die Terms and Conditions Checkbox ist eine spezialisierte Checkbox, die direkt mit dem Terms and Conditions Modal verknüpft werden kann. Sie stellt sicher, dass Nutzende die Allgemeinen Geschäftsbedingungen oder Datenschutzhinweise aktiv bestätigen, bevor das Formular abgesendet werden kann.
Verbinden des Formulars mit einer E-Mail Liste
Damit die Formulardaten sinnvoll gespeichert werden, musst du den Form Container mit einer Liste verknüpfen.
Collect Token einstellen
Den Collect Token findest du ganz oben in den Einstellungen des Form Containers. Wähle dort "List" und wähle im Dropdown darunter die passende Liste aus, in der die Formulardaten gespeichert werden sollen. Jede Liste hat einen eigenen Collect Token, der sicherstellt, dass die Daten an die richtige Stelle übertragen werden.
Einstellungsmöglichkeiten in der Liste
In der Liste selbst kannst du festlegen, welche Felder existieren und wie sie heißen. Die Feldnamen in der Liste müssen mit den Feldnamen im Formular übereinstimmen, damit die Daten korrekt zugeordnet werden. Achte daher beim Anlegen der Formularfelder darauf, dass die jeweiligen Feldbezeichnungen exakt mit den Spalten deiner Liste übereinstimmen.
Erfolgs- und Fehlermanagement
Nach dem Absenden des Formulars kannst du steuern, was der/die Nutzer:in zu sehen bekommt, sowohl bei Erfolg als auch bei einem Fehler.
Weiterleitung
Wenn du Nutzende nach dem Absenden auf eine andere Seite schicken möchtest, nutze die Redirect-Einstellung in den Success Settings des Form Containers. Du kannst entweder eine interne Unterseite auswählen oder eine externe URL angeben. Diese Option eignet sich z. B. für eine dedizierte Dankesseite.
Modal
Alternativ zur Weiterleitung kannst du ein Erfolgs-Modal einblenden. Aktiviere dafür "Show Success modal" in den Success Settings. Dort wählst du außerdem den Modal Type (Standard oder Flyout), den Modal Style und die Modal Size.
➞ Öffnen und Bearbeiten des Modals im Editor
Um den Inhalt des Modals zu gestalten, aktiviere den Schalter "Open Modal (for editing)" in den Success Settings. Das Modal wird dann direkt im Editor eingeblendet und du kannst es wie einen normalen Bereich bearbeiten, also Texte anpassen, Bilder einfügen oder das Layout verändern. Denk daran, den Schalter nach der Bearbeitung wieder zu deaktivieren, damit das Modal im Live-Betrieb nicht dauerhaft angezeigt wird.
Allgemeine Fehlermeldungen: Standardmäßig zeigt das Formular bei fehlerhafter Eingaben oder fehlenden Pflichteingaben automatische Fehlermeldungen an. Standardmäßig sind diese Meldungen bereits in drei Sprachen vordefiniert. Wenn du deinem Formular eine weitere Sprache hinzufügst, wird auch diese automatisch hinzugefügt.
Vor-Ausfüllen der Felder bei Bestandskunden
Wenn du Formulare an bestehende Kontakte sendest, kannst du die Felder automatisch vorausfüllen, um den Aufwand für die Nutzenden zu minimieren.
Prefill from URL Parameter
Aktiviere die Option "Prefill form from URL parameter" in den Advanced-Einstellungen des Form Containers. Danach kannst du in der URL deiner Seite Parameter mitgeben, die den Werten der Formularfelder entsprechen. Wenn ein Kontakt den Link aufruft, werden die entsprechenden Felder automatisch mit den übergebenen Werten befüllt. Das eignet sich z. B. für personalisierte E-Mail-Kampagnen, bei denen Name und E-Mail-Adresse bereits bekannt sind.
Update Form
Wenn du möchtest, dass das Formular genutzt wird, um bestehende Kontaktdaten zu aktualisieren, stelle sicher, dass "Allow updates to collection" aktiviert ist. In Kombination mit dem URL-Prefill kannst du so einen personalisierten Link verschicken, bei dem der Kontakt seine Daten vorfindet, anpassen und erneut absenden kann.
Unsubscribe Form
Mit der Option "Unsubscription Form" in den Advanced-Einstellungen wandelst du das Formular in ein Abmeldeformular um. Kontakte, die dieses Formular absenden, werden automatisch aus der verknüpften Liste ausgetragen. Das ist z. B. für einen Abmeldelink in deinem Newsletter nützlich.
Zusätzliche Informationen und Tracking Daten abspeichern
Neben den sichtbaren Formularfeldern kannst du auch unsichtbare Zusatzinformationen mit jedem Formular-Eintrag speichern.
Hidden Fields erstellen
Hidden Fields sind unsichtbare Felder, die beim Absenden des Formulars automatisch mitgesendet werden, ohne dass der Nutzer sie sieht oder ausfüllen muss. Du legst sie in den Advanced-Einstellungen des Form Containers unter "Hidden Fields" an. Typische Anwendungsfälle sind das Mitschicken einer Kampagnen-ID, einer Quellangabe (z. B. "Newsletter Mai 2026") oder eines internen Kürzels.
Automatisch erfasste Standardinformationen
Zusätzlich zu den Hidden Fields überträgt das Formular beim Absenden automatisch eine Reihe von Standardinformationen im Hintergrund. Dazu gehören z. B. Session-Daten und Tracking-Informationen wie die Herkunftsseite oder UTM-Parameter. Diese Daten werden in der Liste gespeichert und stehen dir für Auswertungen zur Verfügung, ohne dass du sie manuell konfigurieren musst. So kannst du z. B. nachvollziehen, über welche Kampagne oder welchen Kanal ein Kontakt das Formular ausgefüllt hat.