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 eine Deiner hochgeladenen Schriften | 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
- Prompt
- Noto Sans
Formulare mit Google Fonts
Google Fonts sind derzeit nicht verfügbar. Formulare, die bereits eine Google-Schrift verwenden, behalten sie:
- Ist die Schrift in der eingebauten Liste (zum Beispiel Prompt oder Noto Sans), zeigt das Formular sie wie bisher an.
- Jede andere Schrift wird in einer Standard-Ersatzschrift angezeigt. Um das zu ändern, wähle eine eingebaute Schrift oder lade eine eigene Schrift hoch.
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.