Formular-Styling-Referenz
Alle Styling-Optionen, die im Design-Tab des Form Builders verfügbar sind.
Farboptionen
| Option | Werte | Standard | Wirkung |
|---|---|---|---|
| Primärfarbe | Beliebiger Hex-Farbwert | #3b82f6 | Buttons, aktive Zustände, Fokusringe, Links |
| Textfarbe | Beliebiger Hex-Farbwert | #1f2937 | Fliesstext und Feldwerte |
| Hintergrundfarbe | Beliebiger Hex-Farbwert | #ffffff | Formularhintergrund |
| Eingabefeld-Hintergrund | Beliebiger Hex-Farbwert | #ffffff | Hintergrund von Textfeldern, Dropdowns und Textbereichen |
| Rahmenfarbe | Beliebiger Hex-Farbwert | #d1d5db | Rahmen von Eingabefeldern, Trennlinien und Karten |
Typografie
Schriftoptionen
| Option | Werte | Standard | Wirkung |
|---|---|---|---|
| Schriftart | Siehe eingebaute Liste unten oder beliebige Google Font | Inter, sans-serif | Schriftart für das gesamte Formular |
| Basisgrösse | Zahl (px) | 16 | Basis-Schriftgrösse für Fliesstext und Eingabefelder |
| Zeilenhöhe | Zahl (einheitenloser Multiplikator) | 1.5 | Zeilenhöhe für Fliesstext |
| Schriftstärke | Normal / Medium / Halbfett / Fett | Normal | Basis-Schriftstärke |
Eingebaute Schriften
Diese Schriften sind lokal gebündelt und benötigen keine externe Anfrage:
- Inter
- Roboto
- Open Sans
- Montserrat
- Lato
- Poppins
- Source Sans Pro
- Raleway
- PT Sans
- Nunito
Google Fonts
Um eine Schrift zu verwenden, die nicht in der eingebauten Liste enthalten ist:
- Stelle Google Fonts verwenden auf Google Fonts.
- Wähle eine Schrift aus der durchsuchbaren Liste Google Font Name (z. B.
Fira Code). Es können nur Schriften aus dem offiziellen Google-Fonts-Katalog ausgewählt werden. Wenn ein älteres Formular noch einen eigenen Namen zeigt, setze ihn zurück oder wähle eine Schrift aus der Liste.
Das Formular lädt die Schrift beim Rendern direkt von Google Fonts.
| Option | Werte | Standard | Wirkung |
|---|---|---|---|
| Google Fonts verwenden | Lokale Schriften / Google Fonts | Lokale Schriften | Woher die Schrift geladen wird |
| Google Font Name | Schrift aus dem Google-Fonts-Katalog (durchsuchbare Liste) | -- | Wird nur verwendet, wenn Google Fonts verwenden auf Google Fonts gesetzt ist |
Label-Überschreibungen
Du kannst das Styling speziell für Feld-Labels anpassen, ohne den Rest des Formulars zu verändern.
| Option | Werte | Standard | Wirkung |
|---|---|---|---|
| Überschriftsgrösse (Schalter) | Ein/Aus | Aus | Eigene Schriftgrösse für Labels aktivieren |
| Überschriftsgrösse | Zahl (px) | Erbt von Basisgrösse | Label-spezifische Schriftgrösse |
| Überschriftsfarbe (Schalter) | Ein/Aus | Aus | Eigene Farbe für Labels aktivieren |
| Überschriftsfarbe | Beliebiger Hex-Farbwert | Erbt von Textfarbe | Label-spezifische Textfarbe |
| Fett | Normal / Fett | Erbt von Schriftstärke | Fette oder normale Labels |
| Kursiv | Normal / Kursiv | Normal | Kursive Labels |
| Unterstrichen | Kein / Unterstrichen | Kein | Unterstrichene Labels |
| Icon-Grösse (Schalter) | Ein/Aus | Aus | Eigene Grösse für Label-Icons aktivieren |
| Icon-Grösse | Zahl (px) | Erbt | Grösse der Label-Icons |
| Icon-Farbe (Schalter) | Ein/Aus | Aus | Eigene Farbe für Label-Icons aktivieren |
| Icon-Farbe | Beliebiger Hex-Farbwert | Erbt | Farbe der Label-Icons |
Layout
| Option | Werte | Standard | Wirkung |
|---|---|---|---|
| Feldabstand | Zahl (px) | 16 | Vertikaler Abstand zwischen Feldern |
| Innenabstand | Zahl (px) | 16 | Innenabstand des Formularcontainers |
| Maximale Breite | 480 / 640 / 768 / 1024 / 1280 / 100% / Auto | 768 | Maximale Breite des Formulars in Pixeln oder voll/auto |
| Eckenradius | Zahl (px) | 4 | Eckenrundung bei Eingabefeldern, Karten und Buttons |
Eigenes CSS
Das Feld Benutzerdefiniertes CSS akzeptiert rohes CSS, das beim Rendern in das Formular eingefügt wird. Verwende es, um beliebige Standardstile zu überschreiben.
- Das CSS ist auf den Formularcontainer beschränkt.
- Du kannst jedes Element über die CSS-Klassennamen ansprechen, die im CSS-Klassen-Panel des Builders aufgelistet sind.
- Änderungen werden sofort in der Vorschau sichtbar.
Beispiel:
.ef-field-label {
text-transform: uppercase;
letter-spacing: 0.05em;
}
Vorgefertigte Themes
Der Builder enthält sechs fertige Themes, die Du als Ausgangspunkt verwenden und anschliessend anpassen kannst.
| Theme | Primärfarbe | Schrift | Eckenradius | Hintergrund |
|---|---|---|---|---|
| Default | #3b82f6 | Inter | 4 px | Weiss |
| Minimal | #000000 | Roboto | 0 px | Weiss |
| Rounded | #8b5cf6 | Poppins | 12 px | Weiss |
| Classic | #2563eb | Source Sans Pro | 4 px | Hellgrau (#f3f4f6) |
| Dark | #3b82f6 | Inter | 6 px | Dunkel (#1f2937) |
| Modern | #06b6d4 | Montserrat | 8 px | Weiss |
Wenn Du ein Theme auswählst, werden alle Styling-Werte überschrieben. Deine nachträglichen Anpassungen bleiben erhalten, bis Du ein anderes Theme auswählst.