So passen Sie Ihre WordPress-Formulare an und gestalten sie (2 einfache Methoden)

Ein schlichtes, klobiges WordPress-Formular kann selbst die am besten gestaltete Website unvollendet wirken lassen und völlig deplatziert aussehen. Das Schlimmste daran? Besucher könnten unsicher sein, es auszufüllen, wenn es nicht zum Rest Ihrer Website passt.

Im Laufe unserer Erfahrung mit dem Betreiben eines WordPress-Blogs haben wir gelernt, dass gut gestaltete, gebrandete Formulare einen großen Unterschied machen können.

Tatsächlich sahen wir einen enormen Anstieg der Formularübermittlungen, als wir unsere Formulare an die Farben und das Layout unserer Website anpassten.

In diesem Leitfaden zeigen wir Ihnen zwei einfache, aber leistungsstarke Möglichkeiten, Ihre WordPress-Formulare anzupassen und zu gestalten, damit sie nicht nur gut aussehen, sondern auch besser funktionieren. 🚀

Warum sollten Sie Ihre WordPress-Formulare anpassen und gestalten?

Wenn Sie ein Formular mit einem Plugin zu Ihrer WordPress-Website hinzufügen, werden Sie feststellen, dass sein Layout normalerweise einfach und schlicht ist.

Zum Beispiel, wenn Sie mit einem Registrierungsformular zu Ihrer Website hinzufügen, indem Sie ein Plugin für Benutzerregistrierungsformulare verwenden, dann werden Sie feststellen, dass das Layout etwas langweilig ist. Dies kann die Aufmerksamkeit Ihrer Besucher nicht auf sich ziehen und sie sogar davon abhalten, das Formular auszufüllen.

Die Anpassung Ihrer Formulare kann sie attraktiver machen, indem Sie sie an Ihr WordPress-Theme und Ihr Branding anpassen.

Dies kann zu mehr Conversions führen, da formatierte WordPress-Formulare einfacher zu navigieren sind und mehr Benutzer dazu ermutigen können, sie auszufüllen.

Gestaltete Formulare können auch Ihre Markenbekanntheit bei den Nutzern steigern. Sie können zum Beispiel Ihr Website-Logo und Ihre charakteristischen Unternehmensfarben verwenden, um Ihr Formular einprägsamer und effektiver zu gestalten.

Nachdem wir das gesagt haben, zeigen wir Ihnen Schritt für Schritt, wie Sie Ihre WordPress-Formulare einfach anpassen und gestalten können. Wir werden in diesem Beitrag zwei Methoden behandeln, und Sie können die untenstehenden Schnelllinks verwenden, um zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1: So passen Sie WordPress-Formulare mit WPForms an und gestalten sie (Methode ohne Code)
• Methode 2: WordPress-Formulare mit CSS gestalten (erweiterte Anpassung)
• Bonus-Tipp 🧑‍💻: So erstellen Sie ganz einfach benutzerdefinierte Website-Seiten

Lass uns anfangen!

Methode 1: So passen Sie WordPress-Formulare mit WPForms an und gestalten sie (Methode ohne Code)

Sie können Ihre WordPress-Formulare einfach mit WPForms anpassen und gestalten. Es ist das beste WordPress-Kontaktformular-Plugin auf dem Markt, das von über 6 Millionen Websites verwendet wird.

Wir verwenden WPForms selbst für viele Formulararten, und Sie können mehr über das Plugin in unserer detaillierten WPForms-Bewertung erfahren.

WPForms verfügt über einen Drag-and-Drop-Builder, mit dem Sie ganz einfach jede Art von Formular erstellen können. Es gibt sogar eine riesige Bibliothek mit über 2.000 vorgefertigten Vorlagen und integrierten Anpassungsoptionen für Ihr Formular, die keine Programmierung erfordern.

Es verfügt auch über KI-Tools, die Ihnen helfen, benutzerdefinierte Formulare von Grund auf mit einer einfachen Eingabeaufforderung zu erstellen und mehrere Auswahlmöglichkeiten für Felder wie Dropdowns, Radio-Buttons oder Kontrollkästchen zu generieren.

Zuerst müssen Sie das WPForms Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Besuchen Sie nach der Aktivierung die Seite WPForms » Einstellungen im Admin-Menü von WordPress, um Ihren Lizenzschlüssel einzugeben.

Diese Informationen finden Sie in Ihrem Konto auf der WPForms-Website.

Sobald Sie dies getan haben, gehen Sie im WordPress-Dashboard zu WPForms » Neu hinzufügen.

Dies führt Sie zur Seite „Vorlage auswählen“, wo Sie beginnen können, indem Sie einen Namen für Ihr Formular eingeben. Danach können Sie jede gewünschte Formularvorlage auswählen und auf die Schaltfläche „Vorlage verwenden“ darunter klicken.

Für dieses Tutorial werden wir ein einfaches Kontaktformular erstellen und zu unserer Website hinzufügen.

Dies startet die Vorlage im WPForms Formular-Builder, wo Sie eine Formularvorschau auf der rechten Seite und Formularfelder in der linken Spalte sehen.

Von hier aus können Sie jedes Formularfeld Ihrer Wahl per Drag & Drop nach Belieben in das Formular ziehen. Sie können Felder auch neu anordnen oder löschen.

Für detaillierte Anweisungen siehe unser Tutorial zum Erstellen eines Kontaktformulars in WordPress unter Erstellen eines Kontaktformulars in WordPress.

Sobald Sie mit Ihrem Formular fertig sind, klicken Sie einfach oben auf die Schaltfläche „Speichern“, um den Formular-Builder zu verlassen.

Danach müssen Sie die Seite WPForms Einstellungen im WordPress-Dashboard besuchen und das Kontrollkästchen „Modernes Markup verwenden“ aktivieren. Wenn Sie dies nicht tun, sind die WPForms-Anpassungseinstellungen im Block-Editor nicht verfügbar.

Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Öffnen Sie als Nächstes die Seite oder den Beitrag, auf der/dem Sie das gerade erstellte Formular hinzufügen möchten.

Von hier aus müssen Sie auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke klicken, um das Blockmenü zu öffnen und den WPForms-Block hinzuzufügen.

Sobald Sie dies getan haben, wählen Sie einfach das Formular aus, das Sie zu Ihrer Website hinzufügen möchten, aus dem Dropdown-Menü innerhalb des Blocks selbst aus.

Jetzt, da Sie das Formular hinzugefügt haben, ist es an der Zeit, es anzupassen und zu gestalten.

Um dies zu tun, müssen Sie das Block-Panel auf der rechten Seite des Bildschirms öffnen und zum Abschnitt „Themes“ scrollen.

Von hier aus können Sie aus einer Bibliothek von über 40 vordefinierten Vorlagen wählen, um Ihrem Formular sofort ein schönes Aussehen zu verleihen.

Als Nächstes können Sie zum Abschnitt „Feldstile“ scrollen, um Ihr Formular weiter anzupassen.

Sie können die Größe Ihrer Formularfelder aus dem Dropdown-Menü auswählen und sogar deren Randgröße und -radius festlegen.

Als Nächstes können Sie die Hintergrund-, Text- und Rahmenfarbe der Formularfelder mit dem Farbauswahlwerkzeug ändern.

Hier können Sie die charakteristischen Farben Ihrer Marke oder andere Farben, die auf dem Rest Ihres WordPress-Blogs verwendet werden, nutzen, um ein optisch ansprechendes Formular zu erstellen.

Sobald Sie dies getan haben, scrollen Sie nach unten zum Abschnitt „Label-Stile“, wo Sie die Schriftgröße der Labels aus dem Dropdown-Menü auswählen können.

Danach können Sie auch die Schriftfarbe der Feld-Labels, Unter-Labels und Fehlermeldungen ändern, die in Ihrem Formular angezeigt werden.

Um die Schaltfläche in Ihrem Formular anzupassen, scrollen Sie nach unten zum Abschnitt „Schaltflächenstile“ und wählen Sie deren Größe aus dem Dropdown-Menü aus.

Sie können auch einen Randradius festlegen und die Hintergrund- und Textfarbe des Sende-Buttons des Formulars ändern.

Sobald Sie mit der Anpassung des Formulars fertig sind, klicken Sie einfach oben auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Einstellungen zu speichern.

Besuchen Sie nun Ihre WordPress-Website, um das gestaltete Formular in Aktion zu sehen.

Methode 2: WordPress-Formulare mit CSS gestalten (erweiterte Anpassung)

Wenn Sie die von WPForms angebotenen Anpassungsoptionen nicht verwenden möchten oder andere Anpassungen mit CSS vornehmen möchten, können Sie auch ein benutzerdefiniertes CSS-Snippet verwenden.

Dazu müssen Sie zunächst ein Formular mit WPForms erstellen, dem führenden Formularersteller auf dem Markt.

Es verwendet einen Drag-and-Drop-Builder und wird mit über 2.000 Vorlagen geliefert, die Ihnen helfen, schnell Formulare zu erstellen, darunter Kontaktformulare, Datei-Upload-Formulare, Registrierungsformulare, RSVP-Formulare und vieles mehr!

Detaillierte Anweisungen finden Sie in unserem Tutorial zur Erstellung eines Kontaktformulars in WordPress oder in Methode 1.

Sobald Sie ein Formular erstellt haben, ist es an der Zeit, es mit WPCode anzupassen. Es ist das beste WordPress-Code-Snippet-Plugin auf dem Markt und bietet die einfachste und sicherste Möglichkeit, CSS-Code zum Stylen Ihres WordPress-Formulars hinzuzufügen.

Einige unserer Business-Websites verwenden WPCode, um benutzerdefinierte Code-Snippets hinzuzufügen und zu verwalten, und es funktioniert außergewöhnlich gut. Sehen Sie sich unseren vollständigen WPCode-Testbericht für Details zum Tool an.

Zuerst müssen Sie das WPCode-Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserem Anfängerleitfaden zur Installation eines WordPress-Plugins.

Besuchen Sie nach der Aktivierung die Seite Code Snippets » + Snippet hinzufügen im WordPress-Dashboard.

Sobald Sie dort sind, klicken Sie einfach auf die Schaltfläche „Snippet verwenden“ unter der Option „Benutzerdefinierten Code hinzufügen (Neues Snippet)“.

Dies führt Sie zur Seite „Benutzerdefiniertes Snippet erstellen“, wo Sie mit der Eingabe eines Namens für Ihr Code-Snippet beginnen können.

Wählen Sie danach die Option 'CSS-Snippet' aus dem Dropdown-Menü in der rechten Ecke des Bildschirms.

Kopieren Sie als Nächstes den folgenden Code und fügen Sie ihn in das Feld „Code-Vorschau“ ein:

#wpforms-0000 .wpforms-form { background-color: #ADD8E6 !important;	font-family: 'Arial', sans-serif !important; padding: 20px 15px !important; border: 3px solid #666 !important; border-radius: 20px !important; } 

Sobald Sie dies getan haben, müssen Sie den Standard-Shortcode oben durch den Shortcode des Formulars ersetzen, das Sie anpassen möchten.

Besuchen Sie dazu die Seite WPForms » Alle Formulare im WordPress-Dashboard und kopieren Sie die WPForms-ID des Formulars, das Sie gestalten möchten.

Fügen Sie anschließend die ID-Nummer des Formulars neben der Zeile wpforms- im Code ein. Nun wird der gesamte Code nur in diesem spezifischen Formular ausgeführt.

Als Nächstes können Sie ganz einfach den Hex-Code für die Hintergrundfarbe ändern, eine Schriftart Ihrer Wahl hinzufügen und den Abstand sowie die abgerundeten Ecken des Formulars durch Ändern des Code-Snippets konfigurieren.

Sobald Sie dies getan haben, scrollen Sie nach unten zum Abschnitt „Einfügen“ und wählen Sie den Modus „Automatisch einfügen“.

Der Code wird nach der Aktivierung automatisch auf Ihrer Website ausgeführt.

Scrollen Sie schließlich zurück zum Seitenanfang und aktivieren Sie den Schalter auf „Aktiv“.

Klicken Sie danach auf die Schaltfläche „Snippet speichern“, um Ihre Einstellungen zu speichern

Nun wird das WordPress-Formular automatisch gemäß dem CSS-Snippet angepasst und Sie können es anzeigen.

Wenn Sie das Formular jedoch noch nicht zu Ihrer Website hinzugefügt haben, öffnen Sie einfach eine Seite oder einen Beitrag im Block-Editor.

Wenn Sie dort sind, klicken Sie auf das '+'-Symbol in der oberen linken Ecke, um das Blockmenü zu öffnen und den WPForms-Block hinzuzufügen.

Wählen Sie danach das Formular, das Sie mit dem CSS-Snippet gestaltet haben, aus dem Dropdown-Menü im Block selbst aus.

Klicken Sie abschließend auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Einstellungen zu speichern.

Jetzt können Sie Ihre WordPress-Website besuchen, um das angepasste Formular in Aktion zu sehen.

Bonus-Tipp 🧑‍💻: So erstellen Sie ganz einfach benutzerdefinierte Website-Seiten

Das Styling von WordPress-Formularen ist nur eine Möglichkeit, Ihre Website attraktiver und visuell interessanter zu gestalten. Sie können auch Ihre eigenen, vollständig angepassten Website-Seiten mit SeedProd gestalten.

Es ist das beste WordPress Page Builder Plugin auf dem Markt. Es ermöglicht Ihnen, attraktive Seiten zu erstellen, ohne Code verwenden zu müssen.

Einige unserer Partner-Marken haben ihre gesamten Websites mit SeedProd erstellt. Es ist ein leistungsstarker Drag-and-Drop-Builder, der weit über reine Landing Pages hinausgeht! Erfahren Sie mehr über das Tool in unserem vollständigen SeedProd-Test.

SeedProd bietet ebenfalls vorgefertigte Vorlagen und Website-Kits, einfache Anpassungsoptionen, Farbpaletten und erweiterte Seitenblöcke. Außerdem können Sie Ihre WPForms-Formulare einfach in den SeedProd-Editor einbetten.

Weitere Details finden Sie in unserem Tutorial zur Erstellung einer Landingpage in WordPress.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Ihre WordPress-Formulare anpassen und gestalten können. Möglicherweise möchten Sie auch unser Tutorial zum Hinzufügen eines Gutscheincode-Feldes zu WordPress-Formularen und unseren Vergleich von WPForms vs. Gravity Forms vs. Formidable Forms sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.