So stylen Sie Kontaktformulare in WordPress (ohne CSS!)

Wenn Kleinunternehmer ihre eigenen WordPress-Formulare erstellen, sind die Ergebnisse oft schlicht und uninspirierend. Dieses Muster habe ich im Laufe der Jahre immer wieder beobachtet.

Ohne die Expertise von Entwicklern und Designern funktionieren diese Formulare vielleicht gut genug, aber es fehlt ihnen die visuelle Attraktivität, die Benutzer ansprechen und Konversionen fördern kann.

Das Gute ist, dass Sie keine Programmierkenntnisse oder Design-Expertise 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 🎨

So gestalten Sie Kontaktformulare in WordPress

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

1. WPForms installieren & aktivieren

Zuerst müssen Sie das WPForms-Plugin installieren, falls Sie es noch nicht haben.

Formulargestaltung ist mit allen Versionen von WPForms verfügbar, einschließlich WPForms Lite (dem besten kostenlosen Formularersteller).

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

Stellen wir nun sicher, dass Sie mit den benötigten Versionen ausgestattet sind:

• WordPress-Version: 6.0 oder höher.
• WPForms 1.9.7.

2. Öffnen Sie Ihr Formular im Builder

Jetzt ist es an der Zeit, Ihr Formular zu erstellen! Bewegen Sie dazu den Mauszeiger über WPForms in der Seitenleiste Ihres WordPress-Admin-Menüs und klicken Sie auf Neu hinzufügen.

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

Das einfache Kontaktformular ist eine unserer beliebtesten Vorlagen. Es eignet sich auch gut für dieses Tutorial, daher wählen wir es aus, indem wir auf die Schaltfläche Vorlage verwenden klicken.

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

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

3. Wählen Sie Ihr Theme

Jetzt können Sie das Theme Ihres Formulars direkt im Formular-Builder gestalten.

Gehe zu Einstellungen >> Themes, um auf die Styling-Steuerelemente zuzugreifen.

Das linke Bedienfeld zeigt alle Stiloptionen. Das rechte Bedienfeld zeigt eine Live-Vorschau mit Beispielfeldern.

Hier wählst du das Theme aus.

Themes sind deine Abkürzung zu einem gut aussehenden Formular. Sie legen koordinierte Farben und Stile für Felder, Beschriftungen, Schaltflächen, Container und Hintergrund fest, alles mit einem Klick.

Und sie sind für alle Benutzer zugänglich! Für Benutzer von WPForms Lite stehen die Themes „Classic“ und „Modern (Standard)“ zur Verfügung.

Benutzer mit einer WPForms-Lizenz haben Zugriff auf die vollständige Theme-Bibliothek, einschließlich 15 verschiedener Themes.

Lush ist mein Favorit!

Ich habe mir alle Themes selbst angesehen und hier ist eine beschreibende Übersicht für jedes einzelne:

Theme-Name	Look & Feel	Akzentfarbe	Hintergrundfarbe	Notizen
Modern (Standard)	Klar, zeitgemäß	Blau	Keine	Standard für alle neuen Formulare
Klassisch	Minimalistisch	Grau	Keine	Sehr wenig CSS, großartig für einen schlichten Look
Ozean	Ähnlich wie Modern	Dunkles Türkis	Keine	Großartig für kühl getönte Marken
Tangerine	Warm, energisch	Orange	Keine	Sticht auf neutralen Websites hervor
Aero	Leicht und luftig	Blau	Hellgrau mit Schatten	Leichter „Karten“-Effekt
Beton	Industriell	Pink	Beton-Textur	Erfordert das Herunterladen von Hintergrundbildern
Eleganz	Raffiniert	Passt zum Bild	Dekoratives Bild	Abgerundete Ecken am Container
Frisch	Von der Natur inspiriert	Grün	Blätterbild	Ideal für Öko-/Bio-Marken
Tristesse	Dunkler Modus	Grün	Dunkler Hintergrund	Formularelemente mit hohem Kontrast
Flur	Dramatisch	Dunkel	Bild	Kräftiger, immersiver Container
Üppig	Strukturiert	Schwarz	Ziegelwandbild	Abgerundete Ecken und Schattenwurf
Monstera	Verspielt	Grün	Aquarellbild	Abgerundete Ecken
Bereich	Lebendig	Grün	Sonnenuntergangsbild	Ränder und Schatten
Frühling	Sanfter Verlauf	Blau	Verlaufbild	Schatten für Tiefe
Jahrgang	Retro	Gelb	Einfarbige Farbe	Warme, nostalgische Atmosphäre

Werfen Sie einen Blick auf unser vollständiges Dokument, das viele dieser Themen im Detail behandelt.

4. Feldstile anpassen

Sobald Sie sich für ein Thema entschieden haben, gehen Sie zu Feldstile, um Folgendes anzupassen:

• Größe: Klein, Mittel, Groß
• Rand: Durchgezogen, Gestrichelt, Gepunktet
• Randgröße & Radius: Steuern Sie Dicke und Eckenrundung
• Farben: Legen Sie Hintergrund-, Rand- und Textfarben fest. Verwenden Sie die Farbpalette, den HEX-Code oder den Farbwähler

Diese zusätzlichen Details tragen wirklich zu dem Effekt und der Ausstrahlung bei, die Sie mit jedem Formular erzielen möchten. Abgerundete Ecken wirken beispielsweise freundlich, eckige Kanten wirken formell.

Hier finden Sie auch Optionen zum Aktualisieren der Farben für Hintergrund, Rand und Text Ihrer Formularfelder.

Klicken Sie auf die Beschriftung, um den Farbwähler zu öffnen und Änderungen vorzunehmen. Sie können entweder eine Farbe visuell auswählen oder einen bestimmten Hex-Code für eine spezifische Steuerung eingeben.

5. Label-Stile anpassen

Beschriftungen sind die kurzen Textabschnitte über Ihren Formularfeldern, die den Benutzern mitteilen, was sie eingeben sollen – Dinge wie Name, E-Mail-Adresse oder Nachricht. Gut gemacht, machen sie Ihr Formular leicht verständlich und helfen den Benutzern, Verwirrung und Fehler zu vermeiden.

Unter Beschriftungsstile können Sie Folgendes ändern:

Größe: Kleiner, mittlerer oder großer Text. Sie möchten zum Beispiel kleine Beschriftungen für ein minimalistisches Newsletter-Formular, aber große, fette Beschriftungen für ein Bewerbungsformular, bei dem die Klarheit am wichtigsten ist.

Farben:

• Beschriftungstext: Der Haupttitel über jedem Feld.
• Unterbeschriftungen & Hinweise: Hilfreiche Anweisungen wie „Nur Vorname“ oder „Wir werden Ihre E-Mail niemals weitergeben“.
• Fehlermeldungen: Text, der erscheint, wenn der Benutzer einen Fehler macht, z. B. „Dieses Feld ist erforderlich.“ Diese Farbe steuert auch den Stern für erforderliche Felder

Wenn Ihre Website beispielsweise einen dunklen Hintergrund hat, könnten Sie die Beschriftungstexte weiß, die Unterbeschriftungen grau und die Fehlermeldungen leuchtend rot einstellen, damit sie sofort ins Auge fallen, wenn etwas schiefgeht.

6. Button-Stile anpassen

Ihr Absende-Button ist der letzte „Call to Action“ für Ihr Formular. Er sollte sich deutlich genug abheben, damit Besucher ihn nicht suchen müssen.

Unter Button-Stile können Sie anpassen:

• Größe: Klein, Mittel oder Groß. Große Buttons eignen sich gut für Mobilgeräte, während Mittel für Desktop-Layouts besser geeignet sein könnten.
• Randstil: Durchgezogen, gestrichelt oder gepunktet – obwohl die meisten modernen Designs für einen saubereren Look bei durchgezogen oder keine bleiben.
• Randgröße & Radius: Dickere Ränder und schärfere Ecken wirken formeller; dünnere Ränder und abgerundete Ecken wirken freundlicher und legerer.
• Hintergrund- und Textfarben: Diese legen das Hauptaussehen Ihres Buttons fest.

💡 Tipp: Die Hintergrundfarbe wird hier auch zur Akzentfarbe für den Rest Ihres Formulars, einschließlich Feld-Fokus-Zuständen, Fortschrittsbalken und sogar Kontrollkästchen. Wenn Sie also Ihren Button in Türkis gestalten, erwarten Sie, dass dieses Türkis dezent in Ihrem gesamten Formular für einen koordinierten Look erscheint.

7. Container-Stile anpassen

Der Container ist wie der „Rahmen“ um Ihr Formular. Er trennt das Formular visuell vom Rest der Seite und kann dazu beitragen, dass es sich bewusster anfühlt.

Unter Container-Stile können Sie ändern:

• Abstand: Wie viel Platz sich innerhalb des Containers um Ihre Formularfelder befindet. Mehr Abstand sorgt für ein sauberes, geräumiges Gefühl; weniger Abstand schafft ein kompaktes, platzsparendes Aussehen.
• Randstil, -größe und -radius: Passen Sie dies an den visuellen Ton Ihrer Website an – eckige Ecken und durchgezogene Ränder für einen professionellen Look, abgerundete Ecken und dezente Ränder für ein weicheres Gefühl.
• Schatten: Das Hinzufügen eines kleinen oder mittleren Schlagschattens kann dazu führen, dass Ihr Formular „vom“ Seitenrand abgehoben erscheint. Großartig, um es auf flachen Hintergründen hervorzuheben.
• Randfarbe: Oft übersehen, aber ein farbiger Rand kann Ihr Formular mit Ihrer Markenpalette verbinden.

Für eine Fotografie-Portfolio-Website könnten Sie beispielsweise einen Container mit großzügigem Abstand, einem dünnen weißen Rand und einem weichen Schlagschatten verwenden, um einen eleganten „Karten“-Effekt zu erzielen.

8. Hintergrundstile anpassen

Der Hintergrund ist, wo Sie kreativ werden können, aber auch, wo es leicht ist, es zu übertreiben. Ein guter Hintergrund ergänzt das Formular, ohne die Lesbarkeit zu erschweren. Widerstehen Sie also der Versuchung!

Optionen hier sind:

• Bildquelle: Laden Sie aus Ihrer Mediathek hoch oder durchsuchen Sie die integrierten Stockfotos von WPForms (wenn Sie Stockfotos zum ersten Mal verwenden, laden Sie die gesamte Bibliothek herunter).
• Position: Steuern Sie, wo das Bild platziert wird – Oben Mitte, Mitte Mitte, Unten Rechts usw.
• Wiederholen: Wählen Sie Keine Wiederholung für ein einzelnes Bild, Kachel, um es über den Hintergrund zu wiederholen, oder horizontale/vertikale Wiederholungen für Muster.
• Größe: Abdecken lässt das Bild den Containerbereich ausfüllen. Abmessungen ermöglicht es Ihnen, eine genaue Breite und Höhe festzulegen.
• Einfarbige Hintergrundfarbe: Eine großartige Option, wenn Sie etwas Einfaches wünschen oder wenn Ihr Bild nicht geladen wird.

💡Vermeiden Sie unruhige Hintergründe, die das Lesen von Text erschweren. Wenn Sie ein unruhiges Bild lieben, dämpfen Sie es mit einer Farbüberlagerung ab, bevor Sie es hochladen.

10. Speichern, Vorschau und Testen

Sobald Sie Ihre Änderungen vorgenommen haben, müssen Sie nur noch Ihr Formular speichern. Klicken Sie im Formular-Builder auf Speichern.

Oder verwenden Sie Vorschau (oben rechts), um Ihre Stile auf einem Beispielformularlayout zu sehen. Gehen Sie dann in Ihrem WordPress-Editor zu Ihrer Seite und sehen Sie sich das tatsächliche Formular mit echten Feldern in der Vorschau an.

Vergessen Sie nicht, Sie können es auch testen:

• Füllen Sie jedes Feld aus, um Abstände und Ausrichtung zu überprüfen.
• Lösen Sie eine Fehlermeldung aus, um zu sehen, ob Ihre Farben klar sind.
• Sehen Sie sich das Formular auf Mobilgeräten, Tablets und Desktops an, um sicherzustellen, dass es responsiv ist.

Und das ist alles! Sie können jetzt mit der Gestaltung Ihrer Kontaktformulare (oder anderer Formulare) beginnen, die Sie in WordPress haben, direkt im Formular-Builder.

Viel Spaß beim Gestalten!

Kontaktformulare gestalten – FAQs

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

Werden meine Stile überall angewendet?

Ja. Wenn Sie ein Formular im WPForms-Builder gestalten, werden diese Einstellungen mit dem Formular selbst gespeichert – nicht nur mit der Seite, an der Sie arbeiten.

Das bedeutet, wenn Sie dasselbe Formular auf mehreren Seiten oder Beiträgen einbetten, wird es standardmäßig überall konsistent aussehen. Die einzige Ausnahme ist, wenn Sie den Stil beim Einbetten im Block-Editor oder Elementor absichtlich überschreiben. Diese Änderungen gelten nur für diese spezielle Seite.

Kann ich eine Formularvorlage gestalten?

Absolut. Vorlagen in WPForms – wie „Einfaches Kontaktformular“ oder „Newsletter-Anmeldung“ – sind nur vordefinierte Feldersätze. Sobald Sie ein formularbasiertes Template einbetten, können Sie ein Theme auswählen und dessen Styling genau wie bei einem benutzerdefinierten Formular anpassen.

Kann ich ein benutzerdefiniertes Theme löschen?

Ja, aber tun Sie es vorsichtig. Wenn Sie ein benutzerdefiniertes Theme aus dem Themes-Panel im Builder löschen, ist es für immer weg.

Als Nächstes: Verbinden Sie Ihre WordPress-Formulare mit ChatGPT

Sind Sie neugierig, wie Sie Ihren Workflow bei Formularen automatisieren können? Finden Sie heraus, wie Sie ChatGPT mit Ihren WordPress-Formularen verbinden und Antworten mit KI optimieren.

Suchen Sie nach einer Möglichkeit, Ihre Formulare ansprechender zu gestalten? Lesen Sie unsere Tipps zur Erstellung interaktiver Formulare, die die Aufmerksamkeit der Benutzer auf sich ziehen.

Erstellen Sie jetzt Ihr WordPress-Formular

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

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