Zum Hauptinhalt springen

Form Builder Grundlagen

Im Form Builder gestaltest Du Struktur, Aussehen und Verhalten Deines Formulars. Alles ist in Tabs am oberen Rand organisiert.

Was Du machen kannst​

  • Schritt-für-Schritt-Formularabläufe mit Zusammenfassung und Ergebnisseite bauen.
  • Zeilen und Spalten per Drag-and-Drop anordnen.
  • Schritte, Zeilen und Felder aus anderen Formularen kopieren.
  • Logik, Sperren, Styling, Preise, Übersetzungen und mehr einrichten.

Builder-Tabs​

Grundeinstellungen​

Lege Titel, Beschreibung und allgemeines Verhalten fest.

Allgemein:

  • Formulartyp -- wird zur Info angezeigt, kann nicht geändert werden.
  • Titel -- der Name, den Deine Kunden sehen.
  • Beschreibung -- optionaler Text, der oben im Formular angezeigt wird.
  • Internes Formular -- aktivieren, um Einstiegs-/Kontaktformulare intern zu halten. Bei Event-Formularen steuert die Kategorie das interne Verhalten: Team-Checklisten sind immer intern und können nicht veröffentlicht oder geteilt werden.
  • Kategorie (nur Event-Formulare) -- erforderlich, bevor ältere Event-Formulare ohne Kategorie erneut gespeichert werden können. Die Kategorie entscheidet, ob ein Formular teilbar oder rein intern ist.

Absenden-Button:

  • Button-Ausrichtung: links, mittig (Standard) oder rechts.

Mehrstufige Einstellungen (nur bei Formularen mit mehr als einem Schritt):

  • Fortschrittsbalken anzeigen (Standard: an).
  • Schrittnummern anzeigen (Standard: an).
  • Schrittbezeichnungen anzeigen (Standard: an).
  • Jeden Schritt validieren, bevor der Nutzer weiter kann (Standard: an).

Builder​

Der Hauptarbeitsbereich. Hier fügst Du Schritte, Zeilen, Spalten und Felder hinzu. Hier baust Du das eigentliche Formularlayout.

Bedingte Logik​

Richte Regeln ein, die Felder je nach Nutzereingaben anzeigen, ausblenden oder verändern. Siehe Form Builder Bedingte Logik für die vollständige Anleitung.

Sperrrichtlinien (nur Detail-Formulare)​

Verwalte, welche Felder wann gesperrt werden. Nur in Detail-Formularen verfügbar. Um einem Feld eine Sperrrichtlinie zuzuweisen, öffne die Feld-Einstellungen und wähle eine Sperrrichtlinie aus dem Dropdown -- sie steuert, wer das Feld nach dem Absenden bearbeiten darf.

  • Zeigt alle Felder mit aktiver Sperrrichtlinie.
  • Suche und Filter nach Feldname.
  • Ein Badge zeigt die Gesamtzahl gesperrter Felder.
  • Jedes Feld zeigt seinen Sperrzeitpunkt:
    • Sofort gesperrt -- das Feld ist immer gesperrt.
    • Sperrt nach Einreichung -- wird nach dem Absenden gesperrt.
    • Sperrt an einem bestimmten Datum oder Sperrt X Tage vor/nach Event-Start/Ende -- sperrt basierend auf einer Frist.

Styling​

Passe das Aussehen Deines Formulars an.

Schnellaktionen:

  • Team-Styling laden -- lädt die Standardeinstellungen Deines Arbeitsbereichs.
  • Zurücksetzen -- setzt alle Stile auf die Werkseinstellungen zurück.
  • Live-Vorschau -- Änderungen in Echtzeit sehen.
  • Geräte-Vorschau -- öffnet eine Vorschau für verschiedene Bildschirmgrössen.

Theme: Wähle ein Theme-Preset als schnellen Startpunkt.

Layout:

  • Feldabstand (Abstand zwischen Feldern, 0--100).
  • Padding (Innenabstand, 0--100).
  • Maximale Breite.
  • Eckenradius (abgerundete Ecken).

Farben:

  • Primärfarbe.
  • Textfarbe.
  • Hintergrundfarbe (mit Transparent-Option).
  • Eingabefeld-Hintergrundfarbe.
  • Rahmenfarbe.

Typografie:

  • Schriftquelle: lokale Schriften oder Google Fonts.
  • Google-Font-Name (wählbar aus einer durchsuchbaren Liste, z.B. "Roboto", "Inter", "Poppins") bei Google Fonts.
  • Schriftfamilie (bei lokalen Schriften).
  • Schriftstärke (100--900).
  • Basis-Schriftgrösse (12--20 px).
  • Zeilenhöhe (1.0--2.0).

Feld-Labels:

  • Eigene Label-Schriftgrösse (12--24 px).
  • Eigene Label-Farbe.
  • Eigene Icon-Grösse (12--32 px).
  • Eigene Icon-Farbe.
  • Label-Formatierung: fett, kursiv, unterstrichen.

CSS-Klassen: Wähle aus verfügbaren CSS-Klassen-Presets. Die Preset-Klassen decken gängige Layouts und Abstandsmuster ab, sodass Du für typische Anpassungen kein eigenes CSS schreiben musst.

Eigenes CSS: Schreibe Dein eigenes CSS im Code-Editor mit Syntax-Highlighting.

Commerce & Steuern​

Konfiguriere Preise, Steuern und sieh Dir Produkt-/Raum-Übersichten an.

Einstellungen:

  • Preisanzeige: netto (exkl. MwSt.) oder brutto (inkl. MwSt., Standard).
  • Steuerinfos anzeigen (Standard: an).
  • Währungscode (3-Buchstaben ISO-Code, Standard: EUR).
  • Rundung:
    • 0,01 -- Standard.
    • 0,05 -- Schweizer Rundung.
    • 1,00 -- Ganzzahlen.
  • Dezimaltrennzeichen: Punkt oder Komma.
  • Tausendertrennzeichen: Komma, Punkt, Apostroph, Leerzeichen oder keines.
  • Steuersätze-Tabelle (nur Ansicht; zeigt Name, Satz, Standard-Status und externe ID).
  • Defekte Verweise reparieren -- repariert Steuersatz-Verweise, die auf gelöschte oder geänderte Steuersätze zeigen.

Produkte: Nur-Lese-Tabelle aller Produkte über alle Produkt-Felder Deines Formulars.

Räume: Nur-Lese-Tabelle aller Räume über alle Raum-Felder Deines Formulars.

Übersetzungen​

Verwalte Sprachen und übersetze alle Formulartexte.

Sprachen:

  • Sprachen aus 35+ unterstützten Optionen hinzufügen (Deutsch, Englisch, Französisch, Spanisch, Italienisch, Niederländisch und viele mehr).
  • Pro Sprache: aktivieren/deaktivieren, als Standard setzen oder löschen.
  • Die Sprache, in der das Formular erstellt wurde, kann nicht gelöscht werden.

Übersetzungsbereiche:

  • Zusammenfassungstexte.
  • Validierungsmeldungen.
  • Feld-Labels und Optionen.
  • Mehrstufige Labels.
  • Einreichungs-Texte.
  • Commerce-Texte.

Jeder Bereich zeigt alle Formular-Labels nebeneinander mit Eingabefeldern für jede Sprache.

Formular-Review​

Lass Dein Formular per KI auf Qualität prüfen.

  • Klicke auf Mit Flow analysieren, um die Analyse zu starten.
  • Klicke auf Analyse aktualisieren, um nach Änderungen erneut zu prüfen.
  • Zeigt an, wann die letzte Analyse erstellt wurde.

Ergebnisse enthalten:

  • Eine Zusammenfassung der Befunde.
  • Bewertungen für Qualität, UX, Klarheit und Vollständigkeit.
  • Einzelne Befunde mit Titel, Beschreibung, Schweregrad und Link zum betroffenen Feld.
  • Tipps und Empfehlungen.

JSON-Vorschau​

Formular-Konfiguration als JSON ansehen, kopieren, herunterladen oder importieren.

  • JSON kopieren -- kopiert die Konfiguration in die Zwischenablage.
  • JSON herunterladen -- speichert als .json-Datei.
  • JSON importieren -- ersetzt das aktuelle Formular durch eine hochgeladene Konfiguration.
  • Aktualisieren -- lädt die Vorschau neu.

Import-Verhalten:

  • Import ersetzt das gesamte Formular. Achtung: bestehende Daten werden gelöscht.
  • Lade eine .json-Datei hoch oder füge JSON in das Textfeld ein.
  • Steuersätze werden automatisch an die Steuereinstellungen Deines Arbeitsbereichs angepasst.
  • Validierungsfehler werden direkt angezeigt.

Schritte​

Ein "Schritt" ist eine Seite Deines Formulars. Mehrstufige Formulare zeigen immer nur einen Schritt auf einmal. Der Kunde navigiert mit Weiter- und Zurück-Buttons.

  • Du kannst bis zu 20 normale Formular-Schritte anlegen.
  • Du kannst Schritte per Drag-and-Drop umsortieren.
  • Du kannst einen Zusammenfassungs-Schritt hinzufügen. Der Zusammenfassungs-Schritt zeigt dem Kunden alles, was er eingegeben hat, bevor er absendet. Er kann zurückgehen und jedes Feld korrigieren.
  • Die Ergebnisseite nach dem Absenden kann entweder eine Erfolgsseite oder eine Weiterleitung zu einer anderen URL sein.

Schnellstart: Klicke auf Schritt hinzufügen, um einen neuen Schritt zu erstellen. Im Schritt klickst Du auf Zeile hinzufügen und ziehst dann ein Feld aus der Seitenleiste in die Zeile.

Reihenfolge-Regeln:

  • Die Erfolgsseite/Weiterleitung steht immer am Ende.
  • Neue Schritte werden vor Zusammenfassung und Erfolgsseite eingefügt.
  • Beim Verschieben von Zeilen oder Feldern stehen Zusammenfassungs- und Erfolgs-Schritte nicht als Ziel zur Verfügung.

Weiterleitungs-Modus:

  • Gib eine Weiterleitungs-URL ein, um von der Erfolgsseite zum Weiterleitungs-Modus zu wechseln.
  • Wenn Du nur eine Domain eingibst, wird sie automatisch zu einer vollständigen URL vervollständigt.
  • Du kannst eine Erfolgs-Animation und Verzögerung vor der Weiterleitung einrichten.

Zeilen und Spalten​

  • Zeilen hinzufügen und ein Spaltenlayout wählen.
  • Das Spaltenlayout nachträglich ändern.
  • Zeilen innerhalb eines Schrittes umsortieren.
  • Zeilen duplizieren oder verschieben (wenn die enthaltenen Felder es erlauben).
  • Zeilen gestalten mit Hintergrundbild, Hintergrundfarbe, Abstand und Eckenradius.

Wichtige Regeln:

  • Das Löschen eines Schrittes, einer Zeile oder Spalte löscht auch alles darin. Achtung: das kann nicht rückgängig gemacht werden.
  • Zugehörige bedingte Logik-Regeln werden automatisch entfernt, wenn Du Layout-Elemente löschst.
  • Zeilen-Aktionen (Löschen, Verschieben, Duplizieren) können deaktiviert sein, wenn die Zeile eingeschränkte Felder enthält.
  • Die letzte Spalte einer Zeile kann nicht entfernt werden.
  • Spaltenbreiten werden automatisch ans Raster angepasst.
  • Beim Verringern der Spaltenanzahl werden Felder aus entfernten Spalten in die verbleibenden verschoben.

Felder​

  • Felder in jede Spalte einfügen.
  • Felder innerhalb und zwischen Spalten verschieben.
  • Felder duplizieren oder löschen (wenn Einschränkungen es erlauben).
  • Felder in einen anderen Schritt verschieben.
  • Feld-Einstellungen öffnen, indem Du auf ein Feld klickst.

Felder verschieben:

  • Der Verschieben-Dialog zeigt nur reguläre Formular-Schritte (nicht Zusammenfassung oder Erfolgsseite).
  • Wenn Du kein bestimmtes Ziel wählst, landet das Feld in der ersten Zeile und ersten Spalte.
  • Wenn der Ziel-Schritt leer ist, werden Zeile und Spalte automatisch erstellt.

Aus anderem Formular kopieren​

Du kannst Schritte, Zeilen oder Felder aus jedem anderen Formular kopieren.

So funktioniert es:

  • Die Formularauswahl zeigt Deine neuesten Formulare zuerst und schliesst das aktuelle Formular aus.
  • Nur reguläre Schritte können kopiert werden (Zusammenfassung und Erfolgsseite werden übersprungen).
  • Alle IDs werden neu generiert, um Konflikte zu vermeiden.
  • Verweise auf Kataloge und Steuersätze bleiben erhalten.
  • Felder, die im Zielformular eingeschränkt sind, werden herausgefiltert.
  • Leere Zeilen und Spalten werden nach dem Filtern automatisch entfernt.
  • Wenn der Zielort nicht gültig ist, werden Inhalte im ersten regulären Schritt platziert.
  • Einzelne Felder werden an die letzte Zeile und Spalte angehängt (oder eine neue Zeile wird bei Bedarf erstellt).

Bedingte Logik und Übersetzungen beim Kopieren:

  • Bedingte Regeln werden nur kopiert, wenn sie im Zielformular gültig bleiben.
  • Ungültige Verweise werden entfernt. Manche Regeln können komplett wegfallen.
  • Übersetzungen werden nur für Sprachen kopiert, die im Zielformular bereits aktiviert sind.
  • Wenn das Quellformular eine andere Standardsprache verwendet, können Basistexte umgeschrieben werden.

Validierung vor dem Speichern​

Du kannst nicht speichern oder veröffentlichen, bis alle erforderlichen Prüfungen bestanden sind.

Beispiele, was das Speichern blockiert:

  • Fehlender Titel, fehlende Felder oder Zeilen.
  • Event-Formulare ohne die erforderlichen Event-Felder (Titel und Datum).
  • Raum-Felder mit Stundenpreisen, denen die erforderlichen Start-/Endzeit-Felder fehlen.

Aktionen in der Kopfzeile​

  • Rückgängig und Wiederherstellen -- auch über Strg/Cmd+Z und Strg/Cmd+Y (oder Strg/Cmd+Shift+Z).
  • Vorschau -- sieh, wie das Formular für Deine Kunden aussieht.
  • Speichern -- Änderungen speichern.
  • Veröffentlichen -- die Vorlage veröffentlichen, damit Du Instanzen erstellen kannst.

Schnelle Bearbeitungen werden im Rückgängig-Verlauf zusammengefasst. Der Verlauf hat eine begrenzte Kapazität.

Verwandt​