Wie man Kontaktformulare in WordPress gestaltet (ohne CSS!)

Wenn Kleinunternehmer sich an die Erstellung eigener WordPress-Formulare wagen, sind die Ergebnisse oft schlicht und uninspirierend. Dies ist ein Muster, das ich über die Jahre hinweg immer wieder beobachtet habe.

Ohne das Fachwissen von Entwicklern und Designern funktionieren diese Formulare vielleicht gut genug, aber es fehlt ihnen die visuelle Anziehungskraft, die die Benutzer ansprechen und die Konversionen fördern kann.

Das Gute daran ist, dass Sie keine Programmierkenntnisse oder Designkenntnisse mehr benötigen, um schöne Formulare zu erstellen. Sie brauchen nur das richtige Plugin.

In diesem Beitrag zeige ich Ihnen, wie Sie Ihre Kontaktformulare ohne Code gestalten können, um einen starken ersten Eindruck bei Ihren Besuchern zu hinterlassen.

Erstellen Sie jetzt Ihr individuell gestaltetes WordPress-Formular 🎨.

Wie man Kontaktformulare in WordPress gestaltet

Nun, da Sie wissen, dass unser Styling-Tool der beste und einfachste Styler für WPForms ist, lassen Sie es uns Schritt für Schritt aufschlüsseln.

1. Installieren & Aktivieren von WPForms

Zunächst müssen Sie das WPForms-Plugin installieren, wenn Sie es nicht bereits haben.

Form Styling ist mit allen Versionen von WPForms, einschließlich WPForms Lite (die beste kostenlose Form Builder) zur Verfügung.

Brauchen Sie Hilfe bei diesem Schritt? Sehen Sie sich diese Anleitung für Anfänger an, wie man ein WordPress-Plugin installiert.

Der nächste Schritt hängt davon ab, welche Version von WPForms Sie verwenden.

• Für neue Benutzer, die WPForms 1.8.1 und höher installieren, überspringen Sie zu Schritt 3.
• Wenn Sie WPForms vor der Version 1.8.1 installiert haben, müssen Sie das moderne Markup aktivieren. Fahren Sie einfach unten fort, um zu sehen, wie.

2. Aktivieren Sie Modern Markup

Wenn Sie mindestens ein Formular auf Ihrer Website vor der Aktualisierung auf WPForms 1.8.1 hatte, müssen Sie moderne Markup aktivieren.

Wechseln Sie dazu im Einstellungsmenü von WPForms auf die Registerkarte Allgemein.

Aktivieren Sie auf dieser Seite das Kontrollkästchen " Modernes Markup verwenden".

Vergessen Sie nicht, Ihre Einstellungen zu speichern, sobald Sie diesen Schritt abgeschlossen haben.

3. Erstellen Sie Ihr Formular

Jetzt ist es an der Zeit, Ihr Formular zu erstellen! Um loszulegen, bewegen Sie den Mauszeiger über WPForms in der Seitenleiste Ihres WordPress-Administrationsmenüs und klicken Sie auf Add New.

Danach ist es an der Zeit, mit der Einrichtung Ihres Formulars zu beginnen, beginnend mit dem Formularnamen und der Auswahl der Vorlage. Es gibt Hunderte von Formularvorlagen für Marketing und verschiedene andere Funktionen, die Sie verwenden können. Wenn Sie möchten, können Sie Ihr Formular auch komplett neu erstellen.

Das Simple Contact Form ist eine unserer beliebtesten Vorlagen. Sie eignet sich auch sehr gut für dieses Tutorial, also wählen wir sie aus, indem wir auf die Schaltfläche Vorlage verwenden klicken.

Sobald Sie Ihre Auswahl getroffen haben, können Sie Ihr Formular mit dem benutzerfreundlichen WPForms Drag-and-Drop-Builder erstellen oder anpassen.

Brauchen Sie eine kleine Anleitung? Kein Problem. Wir haben ein Dokument, das Ihnen zeigt , wie Sie Ihr erstes Formular erstellen.

4. Ihr Formular einbetten

Wenn Sie mit der Erstellung Ihres Formulars fertig sind, ist es an der Zeit, es in Ihre Website einzubetten. Sie müssen diesen Schritt abschließen, um auf die Optionen zur Gestaltung des Formulars zugreifen zu können.

Am einfachsten können Sie Ihr Formular einbetten, indem Sie oben im Formularersteller auf die Schaltfläche Einbetten klicken.

Es öffnet sich ein modales Popup-Fenster, in dem Sie aufgefordert werden, die Seite auszuwählen, in die Sie das Formular einbetten möchten. Sie können eine bestehende Seite auswählen oder eine neue Seite erstellen.

Wenn Sie auf die Schaltfläche Vorhandene Seite auswählen klicken, erhalten Sie ein Dropdown-Menü, in dem Sie aus Ihren vorhandenen Seiten auswählen können.

Wenn Sie Neue Seite erstellen wählen, haben Sie die Möglichkeit, Ihrer neuen Seite einen Namen zu geben.

Sie können Ihr Formular auch über ein Widget oder einen Shortcode einbetten.

Klicken Sie auf die Schaltfläche Los geht's!, und die Entwurfsseite wird mit dem eingebetteten Formular geöffnet.

5. Gestalten Sie Ihr Formular

Jetzt ist es Zeit für den spaßigen Teil: das Styling Ihrer Form!

Klicken Sie im Block-Editor auf das Formular, und die Einstellungen für diesen Block werden in der rechten Seitenleiste geöffnet. Hier haben Sie Zugriff auf alle Styling-Optionen für Ihr Formular.

Wenn Sie ein WPForms Pro Benutzer sind, werden Sie feststellen, Dutzende von Themen zur Verfügung. Diese professionell gestalteten Themen machen es einfach, Ihr Formular mit vordefinierten Farbschemata, Schaltflächenstilen, Containern und Hintergrundbildern zu gestalten.

Wenn Sie also Ihrem Formular sofort etwas mehr Schwung verleihen möchten, wählen Sie einfach ein beliebiges Thema aus dem Seitenbereich aus. Im folgenden Beispiel verwende ich das Thema Frost, das zu meinen Favoriten gehört.

Erhalten Sie alle Formular-Themen mit WPForms Pro 🎨

Während jedes Theme für jedes Formularelement eigene Stile verwendet, können Sie diese einzelnen Elemente auch ohne CSS selbst bearbeiten.

Es gibt 5 Hauptformularelemente, die Sie mit einfachen Point-and-Click-Steuerelementen gestalten können:

• Feldstile
• Label-Stile
• Tastenformen
• Container-Stile
• Hintergrundstile.

Sehen wir uns an, was die einzelnen Funktionen bewirken und wie Sie den Formularstil anpassen können.

Feldstile

Unter Feldstile können Sie die Größe der Eingabefelder, den Radius der Umrandung und die Farben anpassen. Wenn Sie möchten, dass Ihr Formular mit anderen auf Ihrer Website übereinstimmt, ist dies der Ort, an dem das Aussehen Gestalt annimmt.

So sehen die Standard-Stil-Einstellungen aus.

Die Änderungen sind einfach und ohne CSS-Bearbeitung vorzunehmen. Hier erfahren Sie, was die verschiedenen Optionen bedeuten:

• Größe: Passt die Gesamtgröße Ihrer Felder an.
• Umrandung: Steuert den Stil des Rahmens. Zu den Optionen gehören durchgehende, gestrichelte oder gepunktete Rahmen.
• Größe der Umrandung: Legt die Dicke der Feldränder fest.
• Radius der Umrandung: Ermöglicht es Ihnen, abgerundete Ecken für ein elegantes und modernes Aussehen anzuwenden.

Unter diesen Optionen finden Sie auch Einstellungen für Farben. Mit diesen können Sie einen Farbwähler verwenden, um Farben zu verschiedenen Aspekten Ihrer Felder hinzuzufügen.

Wenn Sie sicherstellen möchten, dass sich das Formular nahtlos in die Farben Ihres WordPress-Themes einfügt, können Sie aus diesen Optionen wählen. Welche Farben Sie dort sehen, hängt von dem verwendeten Theme ab.

Es gibt auch Standardfarben, die Sie auswählen können.

Mit der benutzerdefinierten Farbe am oberen Rand können Sie die Farben Ihrer Formularfelder anpassen. Sie können den Farbwähler verwenden, einen Hex-Code eingeben und die Deckkraft anpassen, ohne das CSS zu bearbeiten.

Sie können zum Beispiel den Farbwähler verwenden, wenn Sie dem Text im Eingabefeld eine eigene Farbe hinzufügen möchten. Wenn Sie den Hexadezimalcode der Farbe haben, die Sie hinzufügen möchten, können Sie den Hexadezimalcode auch direkt einfügen, um genau die gewünschte Farbe zu erhalten.

Sobald Sie Ihre Aktualisierungen vorgenommen haben, sollten diese Änderungen sofort im Formular im Block-Editor sichtbar sein. Dann ist es an der Zeit, mit der Bearbeitung der Etikettenstile fortzufahren.

Etikett Stile

Beschriftungen sind der Text, der über einem Formularfeld erscheint. Zum Beispiel: Name oder E-Mail-Adresse. Passen Sie die Beschriftungsstile an, um die Größe und Farbe der Beschriftungen in Ihrem Formular zu steuern und ein einheitliches Erscheinungsbild auf Ihrer Website zu schaffen.

Über die Dropdown-Liste Größe können Sie die Textgröße der Beschriftung ändern. Im Abschnitt Unteretikett und Hinweis können Sie Farben für Unteretiketten und zusätzliche Hinweise auswählen, die unterhalb des Feldes erscheinen, um bestimmte Informationen aufzurufen.

Die Farbe "Fehlermeldung" wird für Feldüberprüfungsmeldungen verwendet, die erscheinen, wenn das Feld unerwartete Eingaben erhält. Die gleiche Farbe wird für das Sternchen verwendet, das ein Pflichtfeld kennzeichnet.

Wie im Abschnitt Formularfeld können Sie Standardfarben, Themenfarben oder die Farbauswahl verwenden, um eine benutzerdefinierte Farbe für Ihre Beschriftungsstile zu wählen.

Schaltfläche Stile

Für Schaltflächenstile erhalten Sie ähnliche Einstellungen wie für Feldstile, mit der Option, die Größe, den Rahmen, den Rahmenradius und die Farbe zu ändern. So können Sie sicherstellen, dass Ihre Schaltflächen immer hervorstechen und zu den anderen Schaltflächen auf Ihrer Website passen.

So sehen die Standard-Stil-Einstellungen für das von mir verwendete Thema (Frost) aus.

Beachten Sie, dass die von Ihnen gewählte Schaltflächenfarbe auch für andere Formularfelder wie Multiple Choice, Checkboxen, Bewertungen und NPS-Umfragen verwendet wird.

Das Thema, das ich verwende, wendet einen leicht runden Rahmenradius von 8 px an. Die Umrandung ist als Keine ausgewählt , was bedeutet, dass die Schaltfläche keinen Umriss hat.

Ich empfehle die Lektüre unseres ausführlichen Leitfadens zu den besten Praktiken für Submit-Buttons, um weitere Ideen für die Anpassung Ihrer Formularschaltflächen zu erhalten.

Container-Stile

WPForms ermöglicht es Ihnen auch, einen benutzerdefinierten Container zu Ihrem Formular hinzuzufügen. Sie finden die meisten der gleichen Einstellungen wie in den obigen Abschnitten, mit Ausnahme von zwei Optionen, die einzigartig für Container sind:

• Auffüllen: Verwenden Sie diese Option, um die Abstände innerhalb Ihres Formular-Containers anzupassen.
• Schatten: Fügen Sie einen Schatteneffekt in einer bestimmten Größe hinzu oder wählen Sie gar keinen.

Das Theme, das ich verwende, fügte diese Standard-Container-Einstellungen automatisch hinzu, und da ich mit dem Ergebnis ziemlich zufrieden bin, lasse ich sie so, wie sie sind.

Sie können jedoch gerne experimentieren und den Behälter anpassen, wenn Sie diesem Design Ihre eigene kreative Note verleihen möchten.

Hintergrund Stile

Mit den Einstellungen für Hintergrundstile können Sie ein Hintergrundbild oder Volltonfarben hinzufügen, um die aufmerksamkeitssteigernden Eigenschaften Ihres Formulars noch weiter zu betonen.

Praktischerweise gibt es eine Bibliothek mit Archivfotos, die unser Team sorgfältig zusammengestellt hat, um WordPress-Formulare zu ergänzen. Sie können Ihrem Formular schnell einen Bildhintergrund hinzufügen, indem Sie eines aus den Stockfotos auswählen.

Und wenn Sie lieber Ihre eigenen Bilder hochladen möchten, haben Sie auch diese Möglichkeit. Sie können entweder ein neues Bild hochladen oder eines aus Ihrer WordPress-Mediathek auswählen, und zwar bequem über die Optionen für Hintergrundstile.

Wählen Sie dazu in der Dropdown-Liste Bild die Option Medienbibliothek und drücken Sie dann auf Bild auswählen.

Danach öffnet sich das WordPress-Medienbibliotheksmodell, in das Sie ein neues Bild hochladen oder ein vorhandenes Bild auswählen können.

Das war's dann auch schon. An diesem Punkt ist Ihr Formular perfekt gestylt. Aber es gibt noch eine weitere Funktion für Formularstile, die ich Ihnen zeigen möchte.

Zugriff auf erweiterte WPForms-Styling-Funktionen 🎨

Fortgeschrittene

Unterhalb der Feld-, Beschriftungs- und Schaltflächenstile befindet sich ein weiterer Abschnitt für Erweitert. Lassen Sie sich von dem Namen nicht täuschen, er ist immer noch einfach zu handhaben!

Wenn Sie sie öffnen, werden Sie eine Menge benutzerdefinierten CSS-Code sehen.

Da Sie den integrierten Styler für WPForms verwenden, wird dieser benutzerdefinierte CSS-Code automatisch generiert und hier gespeichert. Wenn Sie genau denselben Formularstil für mehrere Formulare auf Ihrer Website verwenden möchten, kopieren Sie diesen CSS-Code und fügen Sie ihn in die erweiterten Einstellungen des Formularstils in jedem einzelnen Formular ein. Innerhalb von Sekunden, Ihre Formulare übereinstimmen!

Wenn Sie Ihre Formularstile auf die Standardwerte zurücksetzen möchten, können Sie auf die Schaltfläche Stileinstellungen zurücksetzen klicken.

Und wenn Sie nach der einfachen Gestaltung des Formulars noch einige zusätzliche Anpassungen an Ihrem Stylesheet vornehmen möchten, gibt es noch ein Feld für zusätzliche CSS-Klassen.

Und das ist es wirklich! Sie haben Ihr Formular gestylt und es war super einfach, richtig? Sie brauchen kein eigenes CSS zu schreiben!

Vergessen Sie nicht, sie zu speichern und zu testen, bevor Sie sie veröffentlichen!

Kontaktformulare gestalten - FAQs

Hier finden Sie einige häufig gestellte Fragen zur Gestaltung von Kontaktformularen in WordPress ohne Code:

Welche Styling-Optionen sind typischerweise in Kontaktformular-Plugins verfügbar?

Jedes Kontaktformular-Plugin bietet verschiedene Stufen der Anpassung. Bei vielen Plugins können Sie den Stil Ihres Formulars nur mithilfe von benutzerdefiniertem CSS bearbeiten. Fortgeschrittene Optionen wie WPForms und Formidable Forms bieten No-Code-Stilanpassungen, mit denen Sie Ihre Feldbeschriftungen, Feldränder, Fehler- und Validierungsmeldungen sowie die Stile der Übermittlungsschaltflächen bearbeiten können.

WPForms geht sogar die extra Meile, indem Sie Ihr Formular Benachrichtigung E-Mails mit benutzerdefinierten Header, Farbschemata, hell und dunkel Themen und mehrere vorkonfigurierte Benachrichtigung Vorlagen anpassen.

Kann ich eine Vorschau der Änderungen am Kontaktformular anzeigen, bevor ich sie veröffentliche?

Ja, mit WPForms, haben Sie mehrere Möglichkeiten für die Vorschau Ihres Formulars vor der Veröffentlichung. Am einfachsten ist es, die Schaltfläche "Vorschau" am oberen Rand des Formularerstellers zu verwenden, mit der Sie sehen können, wie Ihr Formular nach dem Einbetten auf einer typischen Seite Ihrer Website aussehen würde.

Sie können auch eine Vorschau Ihres Formulars auf der Seite des WordPress-Editors anzeigen. Wenn Sie eine Vorschau Ihres Formulars sehen möchten, die auch alle stilistischen Änderungen anzeigt, die Sie an Ihrem Feld und der Schaltfläche "Absenden" vorgenommen haben, können Sie die Vorschauoption im WordPress-Editor verwenden, um all diese stilistischen Änderungen zu sehen.

Wenn Sie Elementor verwenden, um ein mit WPForms erstelltes Formular einzubetten, können Sie die native Vorschauoption von Elementor verwenden, um eine Live-Vorschau Ihres Formulars zusammen mit allen anderen Elementen zu sehen, die Sie der Seite hinzugefügt haben.

Wie kann ich sicherstellen, dass mein gestyltes Kontaktformular responsive und mobilfreundlich ist?

WPForms ist so konzipiert, dass es standardmäßig responsive und mobilfreundlich ist. Das bedeutet, dass Sie keine zusätzlichen Anpassungen vornehmen müssen, um sicherzustellen, dass das Formular, das Sie mit WPForms erstellt haben, auf allen Geräten responsiv ist.

Kann ich WPForms mit Elementor gestalten?

Ja, WPForms unterstützt eine breite Palette von Form Styling-Optionen, wenn mit Elementor verwendet. Außerdem integriert sich WPForms automatisch mit Elementor, ohne dass Sie irgendwelche manuellen Schritte durchführen müssen, um Ihre Formulare mit Elementor zu synchronisieren. Wenn Sie also lieber Seiten mit Elementor als mit dem Standard-WordPress-Editor erstellen, können Sie Elementor nutzen, um Ihre Kontaktformulare zu gestalten, die Sie zuvor mit WPForms erstellt haben.

Als nächstes verbinden Sie Ihre WordPress-Formulare mit ChatGPT

Sind Sie neugierig, wie Sie Ihre Arbeitsabläufe im Zusammenhang mit Formularen automatisieren können? Finden Sie heraus , wie Sie ChatGPT mit Ihren WordPress-Formularen verbinden und Antworten mit KI rationalisieren können.

Suchen Sie nach einer Möglichkeit, Ihre Formulare ansprechender zu gestalten? Sehen Sie sich unsere Tipps zur Erstellung interaktiver Formulare an, die die Aufmerksamkeit der Nutzer wecken.

Erstellen Sie jetzt Ihr WordPress-Formular

Sind Sie bereit, Ihr Formular zu erstellen? Starten Sie noch heute mit dem einfachsten WordPress-Formularerstellungs-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn dieser Artikel Ihnen geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und -Anleitungen.