Formular-Builder
Der Formular-Builder ist dein Werkzeug zum Erstellen professioneller Formulare - von einfachen Kontaktformularen bis hin zu komplexen Anmeldeformularen. Ganz ohne Programmierung.
Ubersicht
Section titled “Ubersicht”Der Formular-Builder besteht aus zwei Hauptbereichen:
Formular Studio
Section titled “Formular Studio”Das Formular Studio ist deine zentrale Ubersicht fur alle Formulare.
Zugang
Section titled “Zugang”Du erreichst das Formular Studio uber die App Builder Tools - tippe auf “Formular-Builder” oder das entsprechende Icon.
Formulare verwalten
Section titled “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
Section titled “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
Section titled “Neues Formular erstellen”- Tippe auf das + Symbol in der Toolbar
- Gib einen Namen fur das Formular ein (z.B. “Kontaktformular”)
- Tippe auf “Erstellen”
- Der Formular-Editor offnet sich automatisch
Vorlagen verwenden
Section titled “Vorlagen verwenden”Statt bei Null anzufangen, kannst du aus uber 20 vorgefertigten Vorlagen wahlen:
- Tippe auf das Vorlagen-Icon in der Toolbar
- Durchsuche die Kategorien oder nutze die Suche
- Tippe auf eine Vorlage um die Details zu sehen
- Wahle “Vorlage verwenden” um sie anzuwenden
Mehr zu Vorlagen findest du unter Vorlagen.
Formular-Editor
Section titled “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
Section titled “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
Section titled “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
Section titled “Feld hinzufugen”- Tippe auf + Feld hinzufugen in der Toolbar
- Wahle eine Kategorie (Text-Eingabe, Auswahl, Weitere)
- Tippe auf den gewunschten Feldtyp
- Das Feld wird am Ende des Formulars eingefugt
Mehr Details zu allen Feldtypen findest du unter Felder.
Feld bearbeiten
Section titled “Feld bearbeiten”Um ein Feld zu bearbeiten:
- Tippen auf das Feld wahlt es aus (blaue Umrandung)
- Tippe auf das Typ-Badge oben links am Feld
- Der Einstellungs-Dialog offnet sich
Der Einstellungs-Dialog bietet vier Tabs:
- Label: Bezeichnung des Feldes (mehrsprachig)
- Platzhalter: Text im leeren Feld
- Hilfetext: Zusatzliche Information unter dem Feld
- Pflichtfeld: Muss ausgefullt werden
- Validierungsregel: E-Mail, Telefon, Lange, Regex
- Fehlermeldung: Benutzerdefinierte Meldung
Nur bei Dropdown/Radio:
- Optionen verwalten: Hinzufugen, Bearbeiten, Loschen
- Reihenfolge andern: Per Drag & Drop
- Feldbreite: 25% bis 100%
- Aussenabstand: Oben, rechts, unten, links
Felder anordnen
Section titled “Felder anordnen”Du kannst Felder per Drag & Drop neu anordnen:
- Halte das Feld gedruckt (am Drag-Handle links)
- Ziehe es an die gewunschte Position
- Lass los um es zu platzieren
Vorschau anzeigen
Section titled “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
Section titled “Formular-Einstellungen”Uber das Zahnrad-Icon im Header erreichst du die globalen Formular-Einstellungen:
| Einstellung | Beschreibung |
|---|---|
| Formular-Name | Interner Name (fur Editor) |
| Formular-Titel | Angezeigter Titel (mehrsprachig) |
| Beschreibung | Optionale Beschreibung unter dem Titel |
| Einstellung | Beschreibung |
|---|---|
| Button-Text | Label des Submit-Buttons (mehrsprachig) |
| Erfolgsmeldung | Nachricht nach erfolgreichem Absenden |
| Einstellung | Beschreibung |
|---|---|
| Empfanger E-Mail | An diese Adresse werden Formulare gesendet |
| E-Mail-Betreff | Betreffzeile der E-Mail (mehrsprachig) |
| Einstellung | Beschreibung |
|---|---|
| Nur beim Submit validieren | Felder werden erst beim Absenden gepruft |
| Pflichtfeld-Stern anzeigen | Zeigt * bei Pflichtfeldern |
Formular in Seite einbinden
Section titled “Formular in Seite einbinden”Erstellte Formulare kannst du im Seiten-Builder als Widget einbinden:
- Offne eine Seite im Seiten-Builder
- Fuge das Formular-Widget hinzu (unter “Aktion”)
- Wahle das gewunschte Formular aus
- Konfiguriere die Anzeige-Optionen
| Option | Beschreibung |
|---|---|
| Formular auswahlen | Verknupft ein bestehendes Formular |
| Titel anzeigen | Zeigt den Formular-Titel |
| Titel-Ausrichtung | Links, Zentriert, Rechts |
Haufige Fragen
Section titled “Haufige Fragen”Wie erstelle ich ein mehrspaltes Layout?
Section titled “Wie erstelle ich ein mehrspaltes Layout?”Nutze die Feldbreite-Einstellung im Layout-Tab:
- Stelle das erste Feld auf 50%
- Stelle das nachste Feld ebenfalls auf 50%
- Beide Felder erscheinen nebeneinander
Kann ich eigene Validierungsregeln erstellen?
Section titled “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?
Section titled “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?
Section titled “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?
Section titled “Werden Formulare mehrsprachig unterstutzt?”Ja! Alle Texte (Label, Platzhalter, Hilfetext, Fehlermeldungen, Button-Text) konnen mehrsprachig eingegeben werden.