Formular-Builder

Der Formular-Builder ist dein Werkzeug zum Erstellen professioneller Formulare - von einfachen Kontaktformularen bis hin zu komplexen Anmeldeformularen. Ganz ohne Programmierung.

Ubersicht

Der Formular-Builder besteht aus zwei Hauptbereichen:

Formular Studio Verwalte alle deine Formulare - erstellen, duplizieren, organisieren

Formular-Editor Bearbeite einzelne Formulare mit Feldern, Validierung und Live-Vorschau

---

Formular Studio

Das Formular Studio ist deine zentrale Ubersicht fur alle Formulare.

Zugang

Du erreichst das Formular Studio uber die App Builder Tools - tippe auf “Formular-Builder” oder das entsprechende Icon.

Formulare verwalten

Im Formular Studio siehst du alle erstellten Formulare als Karten mit:

Information	Beschreibung
Formular-Name	Der interne Name des Formulars
Anzahl Felder	Wie viele Felder das Formular enthalt
Erstellungsdatum	Wann das Formular erstellt wurde

Formular-Aktionen

Fur jedes Formular stehen dir folgende Aktionen zur Verfugung:

Aktion	Beschreibung
Bearbeiten	Offnet den Formular-Editor
Duplizieren	Erstellt eine Kopie des Formulars
Loschen	Entfernt das Formular dauerhaft

Neues Formular erstellen

1. Tippe auf das + Symbol in der Toolbar
2. Gib einen Namen fur das Formular ein (z.B. “Kontaktformular”)
3. Tippe auf “Erstellen”
4. Der Formular-Editor offnet sich automatisch

Aussagekraftige Namen

Gib dem Formular einen aussagekraftigen Namen wie “Kontaktformular” oder “Anmeldeformular” - so findest du es spater leichter wieder.

Vorlagen verwenden

Statt bei Null anzufangen, kannst du aus uber 20 vorgefertigten Vorlagen wahlen:

1. Tippe auf das Vorlagen-Icon in der Toolbar
2. Durchsuche die Kategorien oder nutze die Suche
3. Tippe auf eine Vorlage um die Details zu sehen
4. Wahle “Vorlage verwenden” um sie anzuwenden

Mehr zu Vorlagen findest du unter Vorlagen.

---

Formular-Editor

Der Formular-Editor ist der visuelle Editor fur einzelne Formulare. Hier fugst du Felder hinzu, konfigurierst sie und siehst eine Live-Vorschau.

Hauptbereiche

Der Formular-Editor besteht aus:

Bereich	Funktion
Header	Formular-Name, Einstellungen-Button, Speichern
Feld-Liste	Alle Felder des Formulars mit Drag-Handles
Toolbar	Werkzeuge zum Hinzufugen, Loschen, Vorschau

Die Toolbar

Die Toolbar am unteren Bildschirmrand bietet folgende Funktionen:

Button	Funktion
+ Feld hinzufugen	Offnet die Feldtyp-Auswahl
Loschen	Loscht das ausgewahlte Feld
Duplizieren	Kopiert das ausgewahlte Feld
Vorschau	Zeigt das Formular wie fur Endnutzer

Feld hinzufugen

1. Tippe auf + Feld hinzufugen in der Toolbar
2. Wahle eine Kategorie (Text-Eingabe, Auswahl, Weitere)
3. Tippe auf den gewunschten Feldtyp
4. Das Feld wird am Ende des Formulars eingefugt

Mehr Details zu allen Feldtypen findest du unter Felder.

Feld bearbeiten

Um ein Feld zu bearbeiten:

1. Tippen auf das Feld wahlt es aus (blaue Umrandung)
2. Tippe auf das Typ-Badge oben links am Feld
3. Der Einstellungs-Dialog offnet sich

Der Einstellungs-Dialog bietet vier Tabs:

Basis

• Label: Bezeichnung des Feldes (mehrsprachig)
• Platzhalter: Text im leeren Feld
• Hilfetext: Zusatzliche Information unter dem Feld

Validierung

• Pflichtfeld: Muss ausgefullt werden
• Validierungsregel: E-Mail, Telefon, Lange, Regex
• Fehlermeldung: Benutzerdefinierte Meldung

Optionen

Nur bei Dropdown/Radio:

• Optionen verwalten: Hinzufugen, Bearbeiten, Loschen
• Reihenfolge andern: Per Drag & Drop

Layout

• Feldbreite: 25% bis 100%
• Aussenabstand: Oben, rechts, unten, links

Felder anordnen

Du kannst Felder per Drag & Drop neu anordnen:

1. Halte das Feld gedruckt (am Drag-Handle links)
2. Ziehe es an die gewunschte Position
3. Lass los um es zu platzieren

Reihenfolge speichern

Die Reihenfolge wird automatisch gespeichert, sobald du das Feld losgelassen hast.

Vorschau anzeigen

Tippe auf das Vorschau-Icon in der Toolbar um zu sehen, wie das Formular fur Endnutzer aussieht:

• Alle Felder werden interaktiv dargestellt
• Validierung wird angezeigt
• Submit-Button ist sichtbar (ohne Funktion in der Vorschau)

---

Formular-Einstellungen

Uber das Zahnrad-Icon im Header erreichst du die globalen Formular-Einstellungen:

Basis

Einstellung	Beschreibung
Formular-Name	Interner Name (fur Editor)
Formular-Titel	Angezeigter Titel (mehrsprachig)
Beschreibung	Optionale Beschreibung unter dem Titel

Absenden

Einstellung	Beschreibung
Button-Text	Label des Submit-Buttons (mehrsprachig)
Erfolgsmeldung	Nachricht nach erfolgreichem Absenden

E-Mail

Einstellung	Beschreibung
Empfanger E-Mail	An diese Adresse werden Formulare gesendet
E-Mail-Betreff	Betreffzeile der E-Mail (mehrsprachig)

Validierung

Einstellung	Beschreibung
Nur beim Submit validieren	Felder werden erst beim Absenden gepruft
Pflichtfeld-Stern anzeigen	Zeigt * bei Pflichtfeldern

---

Formular in Seite einbinden

Erstellte Formulare kannst du im Seiten-Builder als Widget einbinden:

1. Offne eine Seite im Seiten-Builder
2. Fuge das Formular-Widget hinzu (unter “Aktion”)
3. Wahle das gewunschte Formular aus
4. Konfiguriere die Anzeige-Optionen

Option	Beschreibung
Formular auswahlen	Verknupft ein bestehendes Formular
Titel anzeigen	Zeigt den Formular-Titel
Titel-Ausrichtung	Links, Zentriert, Rechts

---

Tipps

Mit Vorlagen starten

Nutze die vorgefertigten Vorlagen als Startpunkt. Du kannst sie nach dem Erstellen beliebig anpassen.

Pflichtfelder markieren

Aktiviere “Pflichtfeld-Stern anzeigen” in den Formular-Einstellungen, damit Nutzer sofort sehen, welche Felder ausgefullt werden mussen.

Feldbreiten nutzen

Mit verschiedenen Feldbreiten (50%, 33%, etc.) kannst du Felder nebeneinander anordnen und Platz sparen.

Aussagekraftige Fehlermeldungen

Definiere benutzerdefinierte Fehlermeldungen, die dem Nutzer genau sagen, was falsch ist.

E-Mail-Empfanger eintragen

Vergiss nicht, in den Formular-Einstellungen eine Empfanger-E-Mail einzutragen - sonst kommen die Formulare nirgendwo an!

---

Haufige Fragen

Wie erstelle ich ein mehrspaltes Layout?

Nutze die Feldbreite-Einstellung im Layout-Tab:

1. Stelle das erste Feld auf 50%
2. Stelle das nachste Feld ebenfalls auf 50%
3. Beide Felder erscheinen nebeneinander

Kann ich eigene Validierungsregeln erstellen?

Ja! Nutze die Regex-Validierung fur benutzerdefinierte Muster. Beispiele:

• Postleitzahl: ^\d{5}$
• IBAN: ^DE\d{20}$
• Telefon mit Vorwahl: ^\+49\d{10,11}$

Wohin werden Formulare gesendet?

Aktuell werden Formulare per E-Mail versendet. Trage in den Formular-Einstellungen unter “E-Mail” die Empfanger-Adresse ein.

Kann ich das Formular-Design anpassen?

Formulare nutzen automatisch dein Theme aus der Theme Suite. Farben, Schriften und Abstande werden ubernommen.

Werden Formulare mehrsprachig unterstutzt?

Ja! Alle Texte (Label, Platzhalter, Hilfetext, Fehlermeldungen, Button-Text) konnen mehrsprachig eingegeben werden.

---

Weiterfuhrende Themen

Felder Alle 11 Feldtypen im Detail

Validierung Validierungsregeln und Fehlermeldungen

Vorlagen Uber 20 vorgefertigte Formular-Vorlagen