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

Ein einfaches, 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, ob sie es ausfüllen sollen, 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?

Die Anpassung Ihrer WordPress-Formulare hilft ihnen, zu Ihrer Marke zu passen, was Vertrauen aufbaut und Ihre Formular-Konversionsraten erheblich steigern kann. Durch die Gestaltung Ihrer Formulare machen Sie sie optisch ansprechender und für Ihre Besucher leichter zu navigieren.

Wenn Sie beispielsweise mithilfe eines Plugins für Benutzerregistrierungsformulare ein Registrierungsformular auf Ihrer Website einfügen, werden Sie feststellen, dass dessen Layout etwas langweilig ist. Dies kann die Aufmerksamkeit Ihrer Besucher nicht fesseln 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 gestaltete 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 Benutzern steigern. Sie können beispielsweise Ihr Website-Logo und Ihre charakteristischen Unternehmensfarben verwenden, um Ihr Formular einprägsamer und effektiver zu gestalten.

Jetzt 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:

Lass uns anfangen!

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

WPForms ist das beste WordPress-Kontaktformular-Plugin mit einem Drag-and-Drop-Builder. Es bietet über 2.000 vorgefertigte Themes und integrierte Anpassungsoptionen für die codefreie Formulargestaltung sowie KI-Tools zur Formularerstellung.

Wir verwenden WPForms auf WPBeginner für Kontaktformulare, Website-Migrationen und unsere jährliche Umfrage. Lesen Sie mehr über unsere Erfahrungen in unserem vollständigen WPForms-Testbericht.

Schritt 1. Installieren und Aktivieren des WPForms-Plugins

Zuerst melden wir uns für ein WPForms-Konto an.

Klicken Sie auf deren Website auf die Schaltfläche „WPForms jetzt holen“, wählen Sie einen Plan aus und folgen Sie den Anweisungen auf dem Bildschirm, um die Registrierung abzuschließen.

Jetzt müssen Sie das WPForms-Plugin installieren und aktivieren.

Gehen Sie in Ihrem WordPress-Adminbereich zu Plugins » Plugin hinzufügen.

Auf dem nächsten Bildschirm können Sie die Suchleiste verwenden, um das WPForms-Plugin schnell zu finden.

Klicken Sie auf „Jetzt installieren“ und dann auf „Aktivieren“, um es auf Ihrer WordPress-Website zu aktivieren.

Detaillierte Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Wenn Sie die Pro-Version verwenden, besuchen Sie die Seite WPForms » Einstellungen in der WordPress-Admin-Seitenleiste, um Ihren Lizenzschlüssel nach der Aktivierung einzugeben.

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

Gehen Sie als Nächstes zu WPForms » Einstellungen in Ihrem Admin-Dashboard und stellen Sie sicher, dass das Kontrollkästchen „Modernes Markup verwenden“ aktiviert ist.

Sie müssen Modern Markup aktivieren, um die erweiterten Designeinstellungen und Anpassungsoptionen im WordPress Block Editor freizuschalten.

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

Schritt 2. Erstellen Sie Ihr WordPress-Formular

Von hier aus gehen wir zum Bildschirm WPForms » Neu hinzufügen im WordPress Admin-Dashboard, um Ihr Formular zu erstellen.

Dies führt Sie zur Seite „Einrichtung“, auf der Sie mit der Eingabe eines Namens für Ihr Formular beginnen können.

Danach können Sie jede gewünschte Formularvorlage auswählen, mit der Maus darüber fahren und unter der Vorlage auf die Schaltfläche „Vorlage verwenden“ klicken. Für dieses Tutorial erstellen und fügen wir ein einfaches Kontaktformular zu unserer Website hinzu.

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.

Eine detaillierte Anleitung finden Sie in unserem Tutorial zur Erstellung 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.

Schritt 3. Passen Sie das Design Ihres Formulars mit WPForms-Themes an

Sie sind nun bereit, Ihr Formular zum Block-Editor hinzuzufügen und anzupassen. Klicken wir auf die Schaltfläche „Einbetten“ im Formular-Builder.

Dies öffnet den Einbetten-Assistenten, in dem Sie eine der folgenden Optionen auswählen können:

• Eine vorhandene Seite auswählen – Wählen Sie eine Seite auf Ihrer WordPress-Website aus und fügen Sie das Formular mit dem WPForms-Block hinzu.
• Eine neue Seite erstellen – Dies fügt das Formular automatisch zu einer neuen Seite hinzu.

Für diesen Leitfaden wählen wir „Neue Seite erstellen“.

Geben Sie als Nächstes einen Namen für die neue Seite ein, z. B. „Kontaktieren Sie uns“.

Klicken Sie auf „Los geht’s!“, wenn Sie fertig sind.

Dies öffnet den Seiten-Editor mit Ihrem bereits eingebetteten Formular.

Details finden Sie in unserer Anleitung zum Einbetten von Formularen in WordPress.

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, verwenden, 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.

Nun können Sie Ihre WordPress-Website besuchen, 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 nutzen möchten oder andere Anpassungen mit CSS vornehmen möchten, können Sie auch einen benutzerdefinierten CSS-Snippet verwenden.

Schritt 1. Erstellen Sie Ihr Formular mit WPForms

Zuerst müssen Sie ein Formular mit WPForms erstellen. Es ist das beste WordPress-Kontaktformular-Plugin mit einem Drag-and-Drop-Builder, das über 2.000 Vorlagen bietet, um Ihnen schnell Kontaktformulare, Datei-Upload-Formulare, Registrierungsformulare und RSVP-Formulare zu erstellen.

Detaillierte Anweisungen finden Sie in unserem Tutorial zum Thema Erstellen eines Kontaktformulars in WordPress oder in Methode 1.

Sobald Sie das getan haben, holen wir uns Ihre Formular-ID – Sie benötigen sie für Ihren benutzerdefinierten Code-Snippet.

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

Schritt 2. Installieren und Aktivieren von WPCode

WPCode ist das sicherste und einfachste WordPress-Code-Snippet-Plugin zum Hinzufügen von benutzerdefiniertem CSS zur Gestaltung von Formularen. Es verfügt über eine intelligente Code-Validierung zur Fehlervermeidung und bietet eine vorgefertigte Snippet-Bibliothek für die WordPress-Anpassung.

Wir verwenden WPCode auf WPBeginner, um benutzerdefinierte Code-Snippets für unsere Geschäftswebsites hinzuzufügen und zu verwalten. Lesen Sie mehr über unsere Erfahrungen in unserem vollständigen WPCode-Testbericht.

Zuerst können Sie ein WPCode-Konto erstellen. Klicken Sie auf der WPCode-Website auf die Schaltfläche „WPCode jetzt erhalten“, wählen Sie einen Plan aus und folgen Sie den Anweisungen auf dem Bildschirm, um sich anzumelden.

Installieren und aktivieren wir nun das WPCode-Plugin.

Gehen Sie in Ihrem WordPress-Admin-Dashboard zu Plugins » Plugin hinzufügen.

Als Nächstes können Sie die Suchleiste verwenden, um das WPCode-Plugin schnell zu finden.

Wenn Sie es sehen, klicken Sie auf die Schaltfläche „Jetzt installieren“ und dann auf „Aktivieren“.

Ausführliche Anweisungen finden Sie in unserem Anfängerleitfaden zur Installation eines WordPress-Plugins.

Schritt 3. Fügen Sie einen benutzerdefinierten Code-Snippet hinzu, um WordPress-Formulare anzupassen

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

Fahren Sie dann mit der Maus über die Option „Eigene Codes hinzufügen (Neues Snippet)“ und klicken Sie auf die Schaltfläche „Snippet verwenden“.

Daraufhin wird ein Popup angezeigt, in dem Sie aufgefordert werden, Ihren Code-Typ auszuwählen.

Wählen wir „CSS-Snippet“ aus.

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. Die !important-Tags weisen den Browser an, diese Stile gegenüber den Standardeinstellungen Ihres Themes zu priorisieren:

#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;
}

So könnte es auf Ihrem Bildschirm aussehen:

Als Nächstes können Sie den Hex-Code, z. B. #ADD8E6, ändern, um die spezifische Farbe Ihrer Marke anzupassen. Diese Codes finden Sie mit jedem kostenlosen Online-Farbauswahlwerkzeug.

Sie können auch eine Schriftfamilie Ihrer Wahl hinzufügen und den Abstand (Innenabstand der Box) und den Radius des Rahmens (abgerundete Ecken) des Formulars konfigurieren, indem Sie den Codeausschnitt ändern.

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.

Besuchen Sie nun Ihre WordPress-Site in einem Inkognito- oder privaten Fenster, um das angepasste Formular in Aktion zu sehen, da der Browser-Cache manchmal aktuelle Änderungen ausblenden kann.

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

Sie können Ihre WordPress-Formulare gestalten, um Ihre Website attraktiver und visuell interessanter zu gestalten. Es ist auch möglich, Ihre eigenen vollständig angepassten Website-Seiten mit SeedProd zu entwerfen. Es ist das beste Drag-and-Drop-WordPress-Page-Builder-Plugin, um Website-Seiten und Themes ohne Code zu erstellen.

Wir haben SeedProd gründlich getestet, um zu sehen, wie es im Vergleich zu anderen Lösungen abschneidet. Lesen Sie mehr über unsere Erfahrungen in unserem vollständigen SeedProd-Testbericht.

SeedProd bietet auch 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.

FAQs zur Anpassung und Gestaltung von WordPress-Formularen

Haben Sie noch Fragen? Hier sind einige der am häufigsten gestellten Fragen, die wir von Lesern erhalten – beantwortet.

Was kann ich in einem WordPress-Formular anpassen?

Sie können die Felder, das Layout, die Farben, die Schriftarten, die Beschriftungen, die Fehlermeldungen und die Schaltfläche zum Absenden anpassen, um sie an das Design Ihrer Website anzupassen.

Benötige ich Programmierkenntnisse, um WordPress-Formulare zu gestalten?

Nein. Mit großartigen Plugins wie WPForms können Sie Formulare mit integrierten Einstellungen anpassen und gestalten, ganz ohne Code.

Kann ich meine Formulare an das Branding meiner Website anpassen?

Ja. Sie können Ihre Markenfarben, Schriftarten und Abstände verwenden, damit das Formular natürlich zu Ihrem WordPress-Theme passt.

Beeinflussen das Anpassen und Gestalten eines Formulars seine Funktionsweise?

Visuelle Änderungen beeinträchtigen die Funktionalität nicht. Stellen Sie einfach sicher, dass Sie das Formular testen, wenn Sie erforderliche Felder oder Regeln ändern.

Kann ich den Formularstil später ändern?

Absolut. Sie können das Design jederzeit aktualisieren, ohne das Formular von Grund auf neu erstellen zu müssen.

Weitere Anleitungen zur Verwendung von Formularen 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 unsere Tutorials zu folgenden Themen sehen:

• Dateien von WordPress-Formularen nach Google Drive hochladen
• So können Benutzer Live-Fotos und -Videos in WordPress-Formularen aufnehmen
• Tipps, um Ihre WordPress-Formulare interaktiver zu gestalten
• So automatisieren Sie WordPress-Formulare mit n8n, um Stunden manueller Arbeit zu sparen
• Beste Google Forms-Alternativen (bessere Funktionen + kostenlos)

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.