Zum Hauptinhalt springen

Formular-Styling

Lege arbeitsbereichsweite Styling-Standards für Deine Formulare fest. Neue Formulare starten mit diesen Einstellungen.

Was Du konfigurieren kannst​

  • Theme-Presets -- wähle einen Ausgangspunkt für das Aussehen Deiner Formulare. Es gibt Presets für hell, dunkel und benutzerdefiniert, damit Du schnell loslegen kannst.
  • Layout -- Abstände zwischen Feldern, Innenabstände, maximale Breite, abgerundete Ecken. Hier legst Du arbeitsbereichsweite Standards für Abstände, Schriftgrösse und Rahmenradius fest.
  • Farben -- Primärfarbe, Text, Hintergrund, Eingabefeld-Hintergrund, Rahmen.
  • Schriften -- wähle zwischen einer lokalen Schrift oder einer Google-Schrift. Wähle die Schrift aus der Google-Fonts-Liste (z. B. Inter oder Roboto), wenn Du Google Fonts verwendest.
  • Feld-Labels -- Schriftgrösse, Farbe, Icon-Grösse, Icon-Farbe, Schriftstärke, Stil und Dekoration.
  • CSS-Klassen-Übersicht und eigenes CSS -- für erweiterte Anpassungen.

Schriften im Detail​

  • Wähle lokale Schriften oder Google Fonts als Schriftquelle.
  • Bei Google Fonts wählst Du die Schrift aus der durchsuchbaren Liste (z. B. Inter oder Roboto). Es können nur Schriften aus dem offiziellen Google-Fonts-Katalog ausgewählt werden.
  • Beim Wechsel zurück auf lokal wird die Standard-Systemschrift verwendet.

Eigene Schriften​

Lade eigene WOFF2-Markenschriften hoch und referenziere sie im Style-Panel jedes Formulars.

Schrift hochladen​

  1. Scrolle in Formular-Styling zu Eigene Schriften.
  2. Wähle eine .woff2-Datei. Nur WOFF2 wird unterstützt, maximal 500 KB pro Datei.
  3. Trage den Familien-Namen ein (z. B. Acme Sans). Deine Formulare referenzieren genau diesen Namen.
  4. Wähle die Schriftstärke (100 bis 900). Lade Regular (400) und Bold (700) als separate Dateien hoch, wenn Du beide brauchst.
  5. Wähle den Stil (Normal, Kursiv oder Schräg).
  6. Bestätige die Lizenz-Option. Du musst eine gültige Webfont-Lizenz für die Datei besitzen -- Eventyflow speichert die Bestätigung zusammen mit dem Upload.
  7. Falls die Datei eine Variable-Schrift ist (eine WOFF2 mit Gewichtungs-Achse), aktiviere Variable Schrift -- ein einziger Upload deckt dann die Stärken 100 – 900 für diesen Stil ab. Lasse die Option aus für statische WOFF2-Dateien mit einer festen Stärke.
  8. Klicke auf Schrift hochladen. Die Datei landet auf cdn.eventyflow.io und ist Deinem Workspace zugeordnet.

Du kannst mehrere Stärken und Stile derselben Familie hochladen, damit Formulare zwischen ihnen wechseln können. Bei statischen WOFF2-Dateien bedeutet das: ein Upload pro Stärke. Eine Variable-Schrift ersetzt diese Einzel-Uploads durch eine Datei für die ganze Achse.

Schrift im Formular einsetzen​

  1. Öffne den Formular-Builder für das Formular, das Du anpassen willst.
  2. Öffne das Styling-Panel.
  3. Im Font Family-Dropdown erscheinen Deine hochgeladenen Schriften zuoberst unter Eigene Schriften.
  4. Wähle Deine Familie aus. Speichere das Formular.

Der Renderer lädt die Schrift von cdn.eventyflow.io und wendet sie auf alle Felder an. Browser, welche die Datei zum ersten Mal laden, zeigen kurz die Fallback-Schrift und wechseln dann auf Deine Markenschrift.

Schrift löschen​

  1. Suche die Schrift in der Liste Hochgeladene Schriften.
  2. Klicke auf das Löschen-Symbol in der Zeile und bestätige.

Formulare, die die gelöschte Schrift noch referenzieren, fallen automatisch auf Deine Standard-Formularschrift zurück.

Gut zu wissen​

  • Du brauchst eine gültige Webfont-Lizenz -- die Lizenz-Bestätigung hält fest, wer den Upload bestätigt hat und wann.
  • Schrift-Dateien werden per HTTPS vom Eventyflow-CDN ausgeliefert. Deine Form-Besucherinnen und -Besucher sehen keine Drittanbieter-Requests.
  • Markenschrift später anpassen ist unkompliziert: Lade die neue Version mit demselben Familien-Namen und derselben Stärke hoch und lösche die alte.

So gelten die Standards​

  • Jedes neue Formular startet mit diesen Arbeitsbereich-Standards.
  • Klicke im Form Builder auf Team-Styling übernehmen, um die Styling-Werte Deines Arbeitsbereichs auf das Formular anzuwenden. Wenn der Arbeitsbereich-Standard eine eigene Schriftfamilie nutzt, wird diese Custom Font mit den passenden hochgeladenen Schriftdateien auf das Formular angewendet.
  • Nach dem Anwenden der Standards kannst Du einzelne Einstellungen pro Formular weiter anpassen.

Verwandt​