So gestalten Sie Stripe-Zahlungsformulare in WordPress

Haben Sie jemals die perfekte Website erstellt, auf der die Farben genau richtig sind, die Schriftarten schön sind, nur um festzustellen, dass Ihr Zahlungsformular… fehl am Platz aussieht?

Ich kenne das. Sie verbringen all diese Zeit damit, Ihre Website professionell und vertrauenswürdig aussehen zu lassen, aber der generische „Jetzt bezahlen“-Button oder die Standard-Feldstile passen einfach nicht zu Ihrer Marke. Es kann den letzten, wichtigsten Schritt der Bezahlung von dem Rest des Kundenerlebnisses entkoppelt erscheinen lassen.

Da habe ich gelernt, wie mächtig ein paar einfache Stiländerungen sein können. Und mit dem richtigen Zahlungs-Plugin müssen Sie keinen Entwickler einstellen oder komplizierte Theme-Dateien durchsuchen, um dies zu erreichen.

Befürchten Sie, dass das zu technisch wird? Tun Sie es nicht. Hier sind keine Programmierkenntnisse erforderlich. Ich werde mich an einfache, Schritt-für-Schritt-Anleitungen halten, und für die mächtigsten Anpassungen ist es wirklich nur eine Frage des Wissens, was kopiert und wohin eingefügt werden muss.

In diesem Leitfaden zeige ich Ihnen anfängerfreundliche Möglichkeiten, Ihre Stripe-Zahlungsformulare anzupassen. Ich werde alles abdecken, von visuellen Änderungen ohne Code bis hin zur Verwendung von benutzerdefiniertem CSS für die vollständige Kontrolle über das Design.

Anpassen von Stripe-Zahlungsformularen in WordPress

Warum Ihre Stripe-Zahlungsformulare stilisieren?

Der letzte Schritt bei jedem Verkauf ist die Zahlung, und das Design Ihres Zahlungsformulars spielt in diesem Moment eine große Rolle. Ein Formular, das sauber, professionell und konsistent mit dem Rest Ihrer Website aussieht, schafft Vertrauen und versichert den Kunden, dass ihre Informationen sicher sind.

Stellen Sie es sich wie ein physisches Geschäft vor; ein zusammenhängender, gut gebrandeter Kassenbereich fühlt sich sicherer an als ein generischer. Diese kleinen Designdetails schaffen ein nahtloses Erlebnis, das sich direkt auf Ihre Konversionsraten auswirken kann.

Glücklicherweise müssen Sie kein Designer sein, um sinnvolle Verbesserungen vorzunehmen.

Styling mit integrierten Einstellungen

Ich verwende WP Simple Pay ständig, um Stripe-Zahlungsformulare zu erstellen, da es keine zusätzlichen Plugins oder die Erstellung eines komplizierten Warenkorbsystems erfordert.

Es enthält auch einige integrierte Optionen, die Ihnen helfen, Ihre Formulare mit nur wenigen Klicks anzupassen.

Bevor wir beginnen, ist es hilfreich, WP Simple Pay auf Ihrer Website eingerichtet zu haben. Wenn Sie es noch nicht verwendet haben, finden Sie hier ein paar anfängerfreundliche Tutorials, die Ihnen den Einstieg erleichtern:

• So fügen Sie ein Zahlungsformular zu einer Seite in WordPress hinzu (ohne Code)
• So fügen Sie Ihrer WordPress-Website eine „Jetzt kaufen“-Schaltfläche hinzu

Sobald Sie ein Stripe-Zahlungsformular mit WP Simple Pay erstellt haben, können Sie es stilisieren. Beginnen wir damit, wie Sie dies direkt über Ihr WordPress-Dashboard tun können.

So passen Sie die Zahlungsschaltfläche mit WP Simple Pay an

Der auffälligste Teil Ihres Formulars ist die Zahlungsschaltfläche. Um ihr eine schnelle Stiländerung zu geben, können Sie direkt in den Formulareinstellungen zwischen zwei Looks wählen.

WP Simple Pay ermöglicht es Ihnen, die Stile des Checkout-Buttons, Zahlungsbuttons und Gutschein-Anwenden-Buttons in den individuellen Formulareinstellungen zu ändern.

Besuchen Sie einfach das Zahlungsformular, das Sie bearbeiten möchten, und passen Sie den Button-Stil im benutzerdefinierten Feld-Einstellungsbereich an.

Navigieren Sie zuerst zum Tab Zahlungsformulare und klicken Sie auf das Zahlungsformular, das Sie gestalten möchten.

Klicken Sie anschließend auf den Tab Formularfelder. Hier können Sie zwischen Stripe-Blau oder Standard für den Zahlungsbutton wählen.

Hier ist ein kurzer Überblick über die gestalteten Zahlungsbuttons:

Der Hauptschalter: „Opinionated Styles“

Damit Ihre Formulare von Anfang an gut aussehen, enthält WP Simple Pay eine integrierte Stylesheet.

Es wird „Opinionated Styles“ genannt, weil es dem Layout, der Abstände und dem responsiven Verhalten des Formulars ein Standarddesign anwendet.

Für die meisten Benutzer ist es die beste Wahl, diese Option aktiviert zu lassen.

Die Stile von WP Simple Pay sind so konzipiert, dass sie sofort und ohne Aufwand gut aussehen. Aber wenn Sie sich sicher fühlen und eine leere Leinwand wünschen, damit die eigenen Stile Ihres Themes übernommen werden, haben Sie absolut diese Option!

Sie können unsere Stile deaktivieren, indem Sie zu WP Simple Pay → Einstellungen → Allgemein → Erweitert gehen und Opinionated Styles auf Deaktiviert stellen.

Nachdem Sie nun wissen, wie die integrierten Einstellungen für WP Simple Pay funktionieren, wollen wir untersuchen, wie Sie die volle Kontrolle über das Design Ihres Formulars übernehmen können.

Der benutzerdefinierte Weg — Gestalten Sie Ihr Formular mit CSS

Während die integrierten Einstellungen für schnelle Änderungen großartig sind, möchten Sie vielleicht Ihr Zahlungsformular perfekt an die einzigartige Marke Ihrer Website anpassen. Hier kommt CSS (Cascading Style Sheets) ins Spiel. Es ist die Sprache, die Browser verwenden, um Webseiten zu gestalten, und Sie können sie verwenden, um die volle Kontrolle über das Design Ihres Formulars zu übernehmen.

Machen Sie sich Sorgen, dass dies zu technisch wird? Keine Sorge. Für die meisten Änderungen ist es so einfach wie das Kopieren und Einfügen eines kleinen Textausschnitts an die richtige Stelle. Ich zeige Ihnen genau, wie.

Die nächsten Schritte hängen von der Art des Themes ab, das Sie verwenden, entweder ein klassisches Theme oder ein Block-Theme.

Klassische Themes verwenden das ältere Customizer-Tool und verlassen sich oft auf Widgets und Seitenvorlagen. Block-Themes hingegen verwenden den neueren Site-Editor, mit dem Sie Ihre gesamte Website mit Blöcken gestalten können.

Beginnen wir mit klassischen Themes.

Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Website mit dem Customizer-Tool

Der sicherste und einfachste Ort, um benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzuzufügen, ist der Theme Customizer. Auf diese Weise gehen Ihre Änderungen nicht verloren, wenn Sie Ihr Theme aktualisieren.

1. Navigieren Sie von Ihrem WordPress-Dashboard zu Darstellung → Anpassen.
2. Ein neues Bedienfeld wird auf der linken Seite geöffnet und zeigt eine Live-Vorschau Ihrer Website auf der rechten Seite.
3. Klicken Sie unten im Bedienfeld auf den Tab „Zusätzliches CSS“.

Ein Textfeld wird angezeigt, in das Sie den Code einfügen können. Zum Beispiel,

simpay-checkout-btn

{hintergrundfarbe:

#800080!important; /* Dies ist ein Standard-Lila */

Dieser spezielle Code ändert die Farbe der Zahlungsbuttons auf allen WP Simple Payment-Formularen Ihrer Website in Lila.

Jeder CSS-Code, den Sie hier hinzufügen, wird auf Ihre Website angewendet und ermöglicht es Ihnen, die Standardstile Ihres Themes zu überschreiben. Während Sie tippen, sehen Sie eine Live-Vorschau Ihrer Änderungen auf der rechten Seite.

Ein weiteres Beispiel ist die Erstellung eines CSS-Code-Rezepts zum Hinzufügen eines hellgrauen Hintergrunds und abgerundeter Ecken zu den Zahlungsformularfeldern. Sie können dies direkt in das Feld „Zusätzliches CSS“ im WordPress Customizer einfügen.

Verwendung von KI zur Erstellung von CSS-Rezepten

Möchten Sie keinen CSS-Code von Grund auf neu schreiben? Das müssen Sie nicht. Sie können einen KI-Assistenten wie Gemini Pro verwenden, um benutzerdefinierte Rezepte für Sie zu generieren. Beschreiben Sie einfach auf einfachem Englisch, was Sie erreichen möchten. Sie könnten zum Beispiel fragen:

„Schreibe CSS-Code, um dem WP Simple Pay-Button einen dezenten Farbverlaufshintergrund zu geben und den Text fett zu machen.“

KI ist ein leistungsstarker Partner für die Erstellung benutzerdefinierter Stile und bietet Ihnen einen großartigen Ausgangspunkt, den Sie dann auf Ihrer Website testen und anpassen können.“

Hinzufügen von benutzerdefiniertem CSS mit dem Block-Editor

Wenn Ihre Website ein Block-Theme verwendet, verwalten Sie Ihr Design über den vollständigen Website-Editor anstelle des Customizers.

Gehen Sie zuerst in Ihrem WordPress-Dashboard zu Darstellung → Editor .

Klicken Sie in der linken Seitenleiste auf das Symbol Seiten. Finden Sie dann die Seite, auf der sich das WP Simple Pay-Zahlungsformular befindet.

Sie sehen nun den WordPress-Editor. Klicken Sie unten rechts auf dem Bildschirm auf Zusätzliches CSS, um das Feld zu öffnen.

Das Schöne an der Verwendung des Block-Editors ist, dass er auf jeder Seite oder jedem Beitrag einen bestimmten Ort bietet, um CSS hinzuzufügen, das *nur* für diese einzelne Seite gilt.

Das ist großartig für einmalige Änderungen. Sie können zum Beispiel ganz einfach die Farbe des Titels des Zahlungsformulars ändern.

Dies ist nur eine Möglichkeit, wie Sie den Block-Editor verwenden können, um Ihr Zahlungsformular auf Ihrer Website anzupassen.

Denken Sie daran, dass Sie kein Entwickler sein oder den Code von Grund auf neu schreiben müssen. Probieren Sie Gemini Pro aus oder wählen Sie ein anderes KI-Tool, das Ihnen hilft, Rezepte zu entwickeln.

Benutzerdefiniertes CSS mit Code-Snippets hinzufügen

Während der Customizer und der Block-Editor beide sehr praktisch für schnelle Anpassungen sind, ist ein leistungsfähigerer und organisierterer Ansatz die Verwendung eines speziellen Plugins wie WPCode, das Ihre Stile sicher und getrennt von Ihrem Theme aufbewahrt.

WPCode ist ein leichtgewichtiges und kostenloses Plugin, mit dem Sie sicher benutzerdefinierte Code-Snippets – wie CSS, HTML oder JavaScript – hinzufügen können, ohne jemals Ihre Theme-Dateien direkt bearbeiten zu müssen.

Es ist eine ausgezeichnete Möglichkeit, Ihre Anpassungen organisiert und unabhängig von Ihrem Theme zu halten, sodass Sie sie bei einem Update nie verlieren.

Nachdem Sie WPCode installiert und aktiviert haben, gehen Sie in Ihrem WordPress-Dashboard zu Code Snippets → Snippet hinzufügen .

Klicken Sie auf das Feld mit der Aufschrift Benutzerdefinierten Code hinzufügen (Neues Snippet) und geben Sie Ihrem Snippet einen Namen, z. B. WP Simple Pay Form Styling.

Wählen Sie unter Code-Typ im Dropdown-Menü CSS-Snippet aus.

Fügen Sie Ihren CSS-Code in das Codefeld ein. Klicken Sie dann auf Snippet speichern und schalten Sie den Schalter oben auf Aktiv.

Das war's! Ihre benutzerdefinierten Stile sind jetzt auf allen Ihren WP Simple Pay-Zahlungsformularen live, und Sie können jederzeit zu diesem Snippet zurückkehren, um Änderungen vorzunehmen.

Mein Lieblingsteil bei der Verwendung von WPCode ist, dass Sie leicht experimentieren und verschiedene Rezepte ausprobieren können, um Ihre Formulare so aussehen zu lassen, wie Sie es möchten. Sie können das Plugin verwenden, um Ihren Formularen mit nur einem Kopieren und Einfügen völlig unterschiedliche „Designs“ zu geben.

Hier ist ein Beispiel, aber denken Sie daran, dass Sie mit WPCode die Möglichkeit haben, unbegrenzte Anpassungen für Ihre Formulare zu erstellen.

Der „Moderne schwebende Karten“-Stil

Dieser Stil verleiht dem Formular ein Premium-Gefühl, lässt es mit einem weichen Schatten und einem dezenten Farbverlaufshintergrund von der Seite schweben. Es ist ein sehr beliebter Look in modernen Webanwendungen.

Was es tut:

✅ Verwendet saubere, einfache Feldstile, die zur modernen Ästhetik passen.

✅ Umschließt das Formular in einem Container mit abgerundeten Ecken und einem weichen Schatten.

✅ Wendet einen sanften, zweifarbigen grauen Farbverlauf auf den Hintergrund an.

Kopieren Sie einfach das bereitgestellte Rezept und fügen Sie es in das Feld ein und klicken Sie auf Aktualisieren.

WPCode erledigt den Rest. Sie können zur Zahlungsseite gehen, um eine Vorschau Ihres Formulars anzuzeigen.

Bereit, Ihre WordPress-Zahlungsformulare anzupassen?

Sie sind jetzt mit allen Werkzeugen und Techniken ausgestattet, die Sie benötigen, um Ihre Zahlungsformulare zu transformieren.

Wir haben uns von einfachen, integrierten Einstellungen zur leistungsstarken und flexiblen Steuerung von benutzerdefiniertem CSS bewegt.

Sie haben gelernt, wie Sie mit einem leistungsstarken Plugin wie WPCode ein zuverlässiges und organisiertes Zuhause für all Ihre Design-Anpassungen schaffen können.

Wenn Sie benutzerdefinierte Stripe-Zahlungsformulare für Ihre WordPress-Website erstellen möchten, ist der beste Weg, WP Simple Pay und WPCode zu verwenden.

Möchten Sie weitere Tipps, wie Sie hochkonvertierende Stripe-Zahlungsformulare und gebrandete Landing Pages ohne Code erstellen können? Ich empfehle die folgenden Anleitungen:

• So erstellen Sie eine Stripe-Zahlungs-Landingpage in WordPress
• So erstellen Sie perfekte Zahlungsformulare in WordPress (9 einfache Tipps)
• So verwenden Sie Zahlungsformularvorlagen in WordPress, um den Umsatz zu steigern
• So erstellen Sie E-Mail-Bestätigungsnachrichten pro Formular in WordPress

Worauf warten Sie noch? Starten Sie noch heute mit WP Simple Pay!

Um weitere Artikel wie diesen zu lesen, folgen Sie uns auf X.