Referenz der Einstellungen für den Formularstil
In diesem Dokument
Lesezeit: 4 Minuten | Schwierigkeitsgrad: Mittelstufe
Übersicht
Dies ist eine vollständige Referenz aller Formular-Stil-Einstellungen, die in WP Simple Pay verfügbar sind. Verwenden Sie diese zusammen mit dem Hauptleitfaden für Formularstile für detaillierte Einrichtungsanweisungen.
Voraussetzungen
- WP Simple Pay Pro mit einer Plus-Lizenz oder höher
- Ein Zahlungsformular, das den On-Site-Formular-Typ verwendet (Eingebettet oder Overlay)
Theme-Voreinstellungen
| Theme-ID | Name | Primär | Sekundär | Text | Hintergrund |
|---|---|---|---|---|---|
Standard |
Standard | #0f8569 |
#0e7c62 |
#32325d |
#ffffff |
Sonnenuntergang |
Sonnenuntergang | #e74c3c |
#c0392b |
#2c3e50 |
#ecf0f1 |
Wald |
Wald | #27ae60 |
#219955 |
#2c3e50 |
#f9f9f9 |
Ozean |
Ozean | #3498db |
#2980b9 |
#2c3e50 |
#ecf0f1 |
monochrom |
Monochrom | #333333 |
#555555 |
#333333 |
#ffffff |
Sonnenschein |
Sonnenschein | #f1c40f |
#f39c12 |
#34495e |
#ffffff |
Koralle |
Koralle | #e67e22 |
#d35400 |
#2c3e50 |
#f9f9f9 |
minimal |
Minimalistisch | #bdc3c7 |
#95a5a6 |
#2c3e50 |
#ffffff |
Wenn Sie ein Thema auswählen, wird die Primärfarbe auf den Button-Hintergrund und die Akzentfarbe abgebildet, die Sekundärfarbe auf den Button-Hover-Zustand, die Textfarbe auf allgemeine Text- und Label-Farben und die Hintergrundfarbe sowohl auf die Formular- als auch auf die Eingabehintergründe.
Farbeinstellungen
Alle Farbeinstellungen akzeptieren:
- Hex-Farben:
#0f8569,#fff - RGB/RGBA:
rgba(15, 133, 105, 0.8) - HSL/HSLA:
hsl(160, 80%, 29%) - Leerer Wert (erbt Standardwert oder greift auf eine übergeordnete Einstellung zurück)
| Einstellung | Beschreibung | Fallback-Verhalten |
|---|---|---|
| Formularhintergrund | Hintergrund des Formularcontainers | Transparent (erbt den Seitenhintergrund) |
| Eingabefeldhintergrund | Hintergrund des Eingabefelds | Transparent |
| Allgemeine Textfarbe | Alle Textelemente | Browserstandard |
| Farbe des Beschriftungstexts | Nur Feldbezeichnungen | Fällt auf Allgemeine Textfarbe zurück |
| Farbe des Eingabetexts | Text in Eingabefeldern | Fällt auf Allgemeine Textfarbe zurück |
| Farbe des Titels | Formulartitel | Fällt auf Allgemeine Textfarbe zurück |
| Farbe der Beschreibung | Formularbeschreibung | Fällt auf Allgemeine Textfarbe zurück |
| Primärfarbe (Akzentfarbe) | Fokus-Zustände, Hervorhebungen | Theme-Standard |
| Rahmenfarbe | Rahmen von Eingabefeldern und Elementen | Theme-Standard |
| Fehler-Rahmenfarbe | Rahmen für Validierungsfehler | Rot Standard |
| Farbe des Fehlertests | Fehlermeldungstext | Rot Standard |
| Schaltflächenhintergrund | Hintergrund der Senden-Schaltfläche | Primärfarbe |
| Schaltflächentext | Text der Senden-Schaltfläche | Weiß |
| Schaltflächen-Hintergrund im Hover-Zustand | Hover-Zustand der Senden-Schaltfläche | Dunkleres Primär |
Typografie-Einstellungen
| Einstellung | Beschreibung | Akzeptierte Werte | Standard |
|---|---|---|---|
| Schriftgröße der Beschriftung | Größe der Feld-Beschriftung | Positive Ganzzahl (Pixel) | 14 |
| Schriftgewicht der Beschriftung | Schriftgewicht der Feld-Beschriftung | normal, bold, 100–900 |
— |
| Schriftgröße der Eingabe | Größe des Eingabetextes | Positive Ganzzahl (Pixel) | 16 |
| Schriftgröße des Titels | Größe des Formular-Titels | Positive Ganzzahl (Pixel) | 24 |
| Schriftgewicht des Titels | Schriftgewicht des Formular-Titels | normal, bold, 100–900 |
— |
| Schriftgröße der Beschreibung | Größe der Formular-Beschreibung | Positive Ganzzahl (Pixel) | 16 |
| Schriftgewicht der Beschreibung | Schriftgewicht der Formular-Beschreibung | normal, bold, 100–900 |
— |
Design- & Layout-Einstellungen
| Einstellung | Beschreibung | Akzeptierte Werte | Standard |
|---|---|---|---|
| Abrundung des Formular-Randes | Formularbehälter Ecken abrunden | Positive Ganzzahl (Pixel) | 0 |
| Eingabe- & Schaltflächen-Eckenradius | Eingabe-/Schaltflächen-Ecken abrunden | Positive Ganzzahl (Pixel) | 4 |
| Formular-Abstand | Interner Abstand des Formularbehälters | Positive Ganzzahl (Pixel) | 0 |
Anwendbarkeit
| Formular-Typ | Stile angewendet? |
|---|---|
| Vor Ort eingebettet | Ja |
| Vor Ort Overlay (Modal) | Ja |
| Stripe Checkout (Extern) | Nein |
| Zahlungsseite (Vor Ort) | Ja |
Was kommt als Nächstes?
- Zahlungsformulare mit Formularstil gestalten – Schritt-für-Schritt-Einrichtungsanleitung
- Anzeigetypen für Zahlungsmethoden – Wählen Sie zwischen Tab- und Akkordeon-Layouts
Haben Sie noch Fragen? Wir helfen Ihnen gerne weiter!
Zuletzt geändert: