So gestalten Sie Ihre Zahlungsformulare mit dem Formularstil

Übersicht

WP Simple Pay enthält eine integrierte Form Style-Funktion, mit der Sie das Erscheinungsbild Ihrer On-Site-Zahlungsformulare anpassen können – ganz ohne benutzerdefiniertes CSS. Wählen Sie aus 8 vordefinierten Theme-Voreinstellungen oder optimieren Sie einzelne Farben, Typografie und Layout-Einstellungen, um sie an Ihre Marke anzupassen.

Form Style-Einstellungen werden pro Formular konfiguriert, sodass Sie jedes Zahlungsformular unabhängig gestalten können.

Hinweis: Formularstile gelten nur für On-Site-Zahlungsformulare (Einbettungs- und Overlay-Anzeigetypen). Wenn Ihr Formular Stripe Checkout (extern) verwendet, werden diese Einstellungen nicht wirksam. Um Formularstile zu verwenden, wechseln Sie Ihren Formular-Typ in der Registerkarte Allgemeine Einstellungen zu „On-Site-Zahlungsformular“.

Voraussetzungen

• WP Simple Pay Pro mit einer Plus-Lizenz oder höher
• Ein Zahlungsformular, das den On-Site-Formular-Typ verwendet (Eingebettet oder Overlay)

Zugriff auf den Form Style-Tab

1. Navigieren Sie in Ihrem WordPress-Adminbereich zu WP Simple Pay > Payment Forms.
2. Klicken Sie auf ein vorhandenes Formular, um es zu bearbeiten, oder erstellen Sie ein neues Formular.
3. Klicken Sie im Formular-Editor auf den Tab Form Style.

Der Tab „Formularstil“ enthält vier Unterregisterkarten: Designs, Farben, Typografie und Design & Layout.

Auswählen einer Designvorlage

Designvorlagen wenden sofort einen vollständigen, koordinierten Satz von Stilen auf Ihr Formular an. Nach dem Anwenden eines Designs können Sie einzelne Einstellungen in den anderen Tabs weiter anpassen.

1. Wählen Sie im Tab „Formularstil“ die Unterregisterkarte Designs (standardmäßig ausgewählt).
2. Durchsuchen Sie die verfügbaren Designs. Jede Designkarte zeigt eine Vorschau der Farbpalette und eine Miniaturansicht des Formulars.
3. Klicken Sie auf eine Designkarte, um sie auszuwählen.
4. Klicken Sie auf Veröffentlichen oder Aktualisieren, um zu speichern.

Die folgenden Designs sind verfügbar:

Design	Beschreibung	Primärfarbe
Standard	Standard-Styling von WP Simple Pay	Blaugrün
Sonnenuntergang	Warme rote Akzente mit hellem Hintergrund	Rot
Wald	Frisches grünes Design mit sauberem Hintergrund	Grün
Ozean	Beruhigende blaue Palette	Blau
Monochrom	Einfaches Schwarz-Weiß-Design	Schwarz
Sonnenschein	Helle und fröhliche gelbe Akzente	Gelb
Koralle	Warme orangefarbene Palette	Orange
Minimalistisch	Sauberes, minimalistisches Design	Grau

Wichtig: Die Auswahl eines Designs aktualisiert alle Farb- und Stileinstellungen auf die Werte des Designs. Alle benutzerdefinierten Änderungen, die Sie an einzelnen Einstellungen vorgenommen haben, werden überschrieben.

Farben anpassen

Klicken Sie auf die Unterregisterkarte Farben, um einzelne Farbeinstellungen fein abzustimmen. Farben sind in Abschnitte unterteilt.

Hintergrundfarben

• Form-Hintergrund — Hintergrundfarbe des gesamten Formularcontainers.
• Eingabe-Hintergrund — Hintergrundfarbe von Eingabefeldern, Auswahlen und Dropdowns.

Textfarben

• Allgemeine Textfarbe — Standardfarbe für alle Textelemente im Formular.
• Beschriftungs-Textfarbe — Farbe für Feldbezeichnungen. Überschreibt die allgemeine Textfarbe nur für Beschriftungen.
• Eingabe-Textfarbe — Farbe für Text in Eingabefeldern. Überschreibt die allgemeine Textfarbe nur für Eingaben.

Titel- & Beschreibungsfarben

• Titel-Farbe — Farbe für den Formular-Titel. Fällt auf die allgemeine Textfarbe zurück, wenn nicht gesetzt.
• Beschreibungs-Farbe — Farbe für die Formularbeschreibung. Fällt auf die allgemeine Textfarbe zurück, wenn nicht gesetzt.

Akzent- & Rahmenfarben

• Primäre (Akzent-) Farbe — Wird für Fokus-Zustände, Hervorhebungen und andere Akzentelemente verwendet.
• Rahmenfarbe — Rahmenfarbe für Eingabefelder und andere Elemente mit Rahmen.

Fehlerzustandsfarben

• Fehler-Rahmenfarbe — Rahmenfarbe, die auf Felder mit Validierungsfehlern angewendet wird.
• Fehler-Textfarbe — Textfarbe für Fehlermeldungen.

Schaltflächenfarben

• Schaltflächen-Hintergrund — Hintergrundfarbe der Sende-Schaltfläche.
• Schaltflächen-Text — Textfarbe der Sende-Schaltfläche.
• Schaltflächen-Hover-Hintergrund — Hintergrundfarbe beim Überfahren der Sende-Schaltfläche mit der Maus.

Alle Farbfelder unterstützen Hex-Farben (z. B. #0f8569) und RGBA-Farben mit Transparenz (z. B. rgba(15, 133, 105, 0.8)). Klicken Sie auf die Farbfeld-Schaltfläche neben einem Feld, um den Farbwähler zu öffnen.

Typografie anpassen

Klicken Sie auf den Unter-Tab Typografie, um Schriftgrößen und -stärken anzupassen.

Beschriftungs-Typografie

• Beschriftungs-Schriftgröße — Größe der Feldbezeichnungen in Pixel. Standard: 14px.
• Beschriftungs-Schriftstärke — Stärke der Feldbezeichnungen. Optionen: Normal, Fett oder numerische Werte (100–900).

Eingabe-Typografie

• Eingabe-Schriftgröße — Größe des Textes in Eingabefeldern in Pixel. Standard: 16px.

Titel- & Beschreibungs-Typografie

• Titel-Schriftgröße — Größe des Formular-Titels in Pixel. Standard: 24px.
• Titel-Schriftstärke — Stärke des Formular-Titels. Optionen: Normal, Fett oder numerische Werte (100–900).
• Schriftgröße der Beschreibung – Größe der Formularbeschreibung in Pixeln. Standard: 16px.
• Schriftstärke der Beschreibung – Stärke der Formularbeschreibung. Optionen: Normal, Fett oder numerische Werte (100–900).

Design & Layout anpassen

Klicken Sie auf den Unter-Tab Design & Layout, um Abstände und den Radius der Ecken anzupassen.

Radius der Ecken

• Radius der Formularecken – Steuert, wie stark die Ecken des Formularcontainers abgerundet sind, in Pixeln. Stellen Sie 0 für eckige Ecken ein.
• Radius der Ecken von Eingabefeldern & Schaltflächen – Steuert, wie stark die Ecken von Eingabefeldern und Schaltflächen abgerundet sind, in Pixeln.

Eine Live-Vorschau neben jeder Einstellung zeigt die Auswirkung des aktuellen Werts.

Abstände

• Abstand des Formulars – Steuert den internen Abstand (Padding) des Formularcontainers in Pixeln.

Stile auf Standard zurücksetzen

Um alle Stileinstellungen auf ihre Standardwerte zurückzusetzen:

1. Scrollen Sie im Tab „Formularstil“ zum Ende eines beliebigen Unter-Tabs.
2. Klicken Sie auf die Schaltfläche Stile zurücksetzen.
3. Bestätigen Sie das Zurücksetzen, wenn Sie dazu aufgefordert werden.
4. Klicken Sie auf Veröffentlichen oder Aktualisieren, um das Formular zu speichern.

Dies setzt alle Farb-, Typografie- und Layout-Einstellungen zurück. Das ausgewählte Theme wird nicht geändert.

Häufig gestellte Fragen

Warum sehe ich den Tab „Formularstil“ nicht?

Der Tab „Formularstil“ erfordert eine Plus-Lizenz oder höher. Wenn Sie eine Personal-Lizenz haben, sehen Sie stattdessen eine Aufforderung zur Aktualisierung.

Warum gibt es eine Warnung bezüglich externer Formulare?

Formularstile gelten nur für On-Site-Zahlungsformulare. Wenn Ihr Formular für die Verwendung von Stripe Checkout (extern) eingestellt ist, werden die Einstellungen für den Formularstil nicht wirksam. Ändern Sie den Formular-Typ im Tab Allgemein des Formular-Editors auf „On-Site-Zahlungsformular“.

Kann ich für jedes Formular unterschiedliche Stile verwenden?

Ja. Die Einstellungen für den Formularstil werden pro Formular gespeichert, sodass jedes Zahlungsformular sein eigenes, einzigartiges Styling haben kann.

Funktionieren Formularstile mit Overlay-Formularen (Modals)?

Ja. Formularstile gelten sowohl für eingebettete Formulare als auch für Overlay-/Modal-Formulare. Bei Overlay-Formularen steuert die Hintergrundfarbe des Formulars den Hintergrund des Modal-Inhaltsbereichs.

Kann ich neben Form Style weiterhin benutzerdefiniertes CSS verwenden?

Ja. Benutzerdefiniertes CSS wird über den Form Style-Einstellungen angewendet.

Beeinflussen Formularstile die Vorschau des Gutenberg-Blocks?

Ja. Wenn Sie ein Zahlungsformular mit dem WP Simple Pay-Block im Block-Editor einfügen, spiegelt die Block-Vorschau die aktuellen Stileinstellungen des Formulars wider.

Was passiert, wenn ich ein Farbfeld leer lasse?

Leere Felder übernehmen sinnvolle Standardwerte. Beispielsweise werden die Farben von Beschriftungen und Eingabetexten auf die allgemeine Textfarbe zurückgesetzt. Schaltflächenfarben werden auf die Primärfarbe des Themas zurückgesetzt.

Was kommt als Nächstes?

• Formularstil-Einstellungen Referenz – Vollständige Referenz aller Einstellungen und ihrer Standardwerte
• Anzeigetypen für Zahlungsmethoden – Wählen Sie zwischen Tab- und Akkordeon-Layouts