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.

Stellen wir nun sicher, dass Sie alle benötigten Versionen haben:

• 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! 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.

3. Wählen Sie Ihr Thema

Jetzt können Sie das Thema Ihres Formulars direkt im Formularersteller gestalten.

Gehen Sie zu Einstellungen >> Themen, um auf die Styling-Steuerung zuzugreifen.

Der linke Bereich zeigt alle Stiloptionen an. Der rechte Bereich zeigt eine Live-Vorschau mit Beispielfeldern.

Hier können Sie das Thema auswählen.

Themes sind Ihre Abkürzung zu einem großartig 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 diejenigen mit WPForms Lite, "Classic" und "Modern (Standard)" Themen sind verfügbar.

Benutzer mit einer WPForms-Lizenz haben Zugriff auf die gesamte Themenbibliothek, einschließlich 15 verschiedener Themen.

Lush ist mein Favorit!

Ich habe mir alle Themen selbst angeschaut und für jedes Thema diesen beschreibenden Überblick erstellt:

Thema Name	Aussehen und Gefühl	Akzentfarbe	Hintergrundfarbe	Anmerkungen
Modern (Standard)	Sauber, zeitgemäß	Blau	Keine	Standard für alle neuen Formulare
Klassisch	Minimalistisch	Gray	Keine	Sehr wenig CSS, ideal für ein einfaches Aussehen
Ozean	Ähnlich wie bei Modern	Dunkel Teal	Keine	Ideal für kühl getönte Marken
Mandarine	Warm, energiegeladen	Orange	Keine	Steht an neutralen Standorten aus
Aero	Leicht und luftig	Blau	Hellgrau mit Kastenschatten	Leichter "Karten"-Effekt
Beton	Industriell	Rosa	Textur des Betons	Erfordert das Herunterladen von Hintergrundbildern
Eleganz	Verfeinert	Entspricht dem Bild	Dekoratives Bild	Abgerundete Ecken am Behälter
Frisch	Von der Natur inspiriert	Grün	Blättriges Bild	Großartig für Öko-/Biomarken
Düsternis	Dunkler Modus	Grün	Dunkler Hintergrund	Kontrastreiche Formelemente
Korridor	Dramatisch	Dunkelheit	Bild	Kühnes, immersives Behältnis
Lush	Texturiert	Schwarz	Bild einer Backsteinmauer	Abgerundete Ecken und kastenförmiger Schatten
Monstera	Verspielt	Grün	Aquarelliertes Bild	Abgerundete Ecken
Bereich	Lebendig	Grün	Bild Sonnenuntergang	Umrandungen und Boxschatten
Frühling	Weicher Farbverlauf	Blau	Gradientenbild	Kastenschatten für Tiefe
Weinlese	Retro	Gelb	Einfarbig	Warmes, nostalgisches Gefühl

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

4. Anpassen von Feldstilen

Sobald Sie sich für ein Thema entschieden haben, können Sie es unter Feldstile anpassen:

• Größe: Klein, Mittel, Groß
• Umrandung: Durchgehend, gestrichelt, gepunktet
• Größe und Radius der Umrandung: Kontrollieren Sie Dicke und Eckenrundung
• Farben: Legen Sie Hintergrund, Rahmen und Text fest. Verwenden Sie die Themenpalette, den HEX-Code oder den Farbwähler.

Diese zusätzlichen Elemente tragen zu dem Effekt und der Stimmung bei, die Sie mit jeder Form erzielen wollen. Abgerundete Ecken wirken zum Beispiel freundlich, eckige Kanten wirken formell.

Hier finden Sie auch Optionen zum Aktualisieren der Hintergrund-, Rahmen- und Textfarben Ihrer Formularfelder.

Klicken Sie auf das Etikett, 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 ein bestimmtes Steuerelement eingeben.

5. Anpassen von Etikettenstilen

Beschriftungen sind die kurzen Textabschnitte über Ihren Formularfeldern, die den Nutzern sagen, was sie eingeben sollen, z. B. Name, E-Mail-Adresse oder Nachricht. Wenn sie gut gemacht sind, machen sie Ihr Formular leicht verständlich und helfen den Benutzern, Verwirrung und Fehler zu vermeiden.

Unter Etikettenstile können Sie diese ändern:

Größe: Kleiner, mittlerer oder großer Text. Zum Beispiel könnten Sie kleine Beschriftungen für ein minimalistisches Newsletter-Formular wünschen, aber große, fette Beschriftungen für ein Bewerbungsformular, wo Klarheit am wichtigsten ist.

Farben:

• Beschriftungstext: Der Haupttitel über jedem Feld.
• Unteretiketten & Hinweise: Hilfreiche Anweisungen wie "Nur Vornamen" oder "Wir geben Ihre E-Mail-Adresse nicht weiter".
• Fehlermeldungen: Text, der erscheint, wenn der Benutzer einen Fehler macht, z. B. "Dieses Feld ist erforderlich". Diese Farbe steuert auch das Sternchen bei erforderlichen Feldern

Wenn Ihre Website beispielsweise einen dunklen Hintergrund hat, können Sie den Beschriftungstext auf Weiß, die Unterbeschriftungen auf ein sanftes Grau und die Fehlermeldungen auf ein leuchtendes Rot setzen, damit sie sofort auffallen, wenn etwas nicht stimmt.

6. Anpassen von Schaltflächenstilen

Die Schaltfläche "Absenden" ist der letzte "Aufruf zum Handeln" für Ihr Formular. Sie sollte so auffällig sein, dass die Besucher sie nicht erst suchen müssen.

Unter Schaltflächenstile können Sie die Einstellungen vornehmen:

• Größe: Klein, Mittel oder Groß. Große Schaltflächen eignen sich gut für mobile Geräte, während die mittlere Größe besser für Desktop-Layouts geeignet ist.
• Stil der Umrandung: Durchgehend, gestrichelt oder gepunktet - die meisten modernen Designs bleiben jedoch bei Durchgehend oder Ohne für ein sauberes Aussehen.
• Größe und Radius der Umrandung: Dickere Ränder und schärfere Ecken wirken formeller; dünnere Ränder und abgerundete Ecken wirken freundlicher und legerer.
• Hintergrund- und Textfarben: Diese Farben bestimmen das Aussehen Ihrer Schaltfläche.

💡 Tipp: Die hier gewählte Hintergrundfarbe wird auch zur Akzentfarbe für den Rest Ihres Formulars, einschließlich Feldfokusstatus, Fortschrittsbalken und sogar Kontrollkästchen. Wenn Sie also Ihre Schaltfläche türkisfarben gestalten, sollten Sie damit rechnen, dass dieses Türkis im gesamten Formular auftaucht, um ein koordiniertes Aussehen zu erzielen.

7. Anpassen der Container-Stile

Der Container ist so etwas wie der "Rahmen" um Ihr Formular. Er trennt das Formular visuell vom Rest der Seite und kann dazu beitragen, dass es bewusster wirkt.

In Containerstile können Sie ändern:

• Auffüllung: Wie viel Platz innerhalb des Containers um Ihre Formularfelder herum ist. Mehr Füllung sorgt für ein sauberes, geräumiges Erscheinungsbild, weniger Füllung für ein kompaktes, platzsparendes Erscheinungsbild.
• Stil, Größe und Radius der Umrandung: Passen Sie dies an den visuellen Ton Ihrer Website an - quadratische Ecken und feste Ränder für einen Unternehmenslook, abgerundete Ecken und subtile Ränder für ein weicheres Gefühl.
• Schatten: Durch Hinzufügen eines kleinen oder mittleren Schlagschattens kann Ihr Formular von der Seite "abgehoben" erscheinen. Das ist ideal, um es auf flachen Hintergründen hervorzuheben.
• Farbe des Rahmens: Oft wird dies übersehen, aber ein farbiger Rahmen kann Ihr Formular mit Ihrer Markenpalette verbinden.

Für eine Fotoportfolio-Website könnten Sie zum Beispiel einen Container mit großzügiger Polsterung, einem dünnen weißen Rand und einem weichen Schlagschatten verwenden, um einen eleganten "Karten"-Effekt zu erzielen.

8. Anpassen von Hintergrundstilen

Beim Hintergrund können Sie kreativ werden, aber es ist auch leicht, es zu übertreiben. Ein guter Hintergrund ergänzt das Formular, ohne es schwer lesbar zu machen. Kämpfen Sie also gegen den Drang an!

Diese Optionen umfassen:

• Bildquelle: Upload von Ihrem Media Library oder durchsuchen WPForms 'eingebauten Stock Fotos (das erste Mal, wenn Sie Stock Fotos verwenden, werden Sie die ganze Bibliothek herunterladen).
• Position: Legen Sie fest, wo das Bild platziert werden soll: Oben Mitte, Mitte Mitte, Unten rechts usw.
• Wiederholung: Wählen Sie Keine Wiederholung für ein einzelnes Bild, Kachel für die Wiederholung im Hintergrund oder horizontale/vertikale Wiederholungen für Muster.
• Größe: Mit Cover füllt das Bild den Containerbereich aus. Mit Abmessungen können Sie eine genaue Breite und Höhe festlegen.
• Einfarbige Hintergrundfarbe: Eine gute Option, wenn Sie etwas Einfaches wollen oder Ihr Bild nicht geladen werden kann.

💡 Vermeiden Sie unruhige Hintergründe, die das Lesen von Text erschweren. Wenn Sie ein unruhiges Bild lieben, sollten Sie es vor dem Hochladen mit einer Farbüberlagerung abschwächen.

10. Speichern, Vorschau und Test

Sobald Sie Ihre Änderungen vorgenommen haben, müssen Sie Ihr Formular nur noch speichern. Klicken Sie in der Formularerstellung auf Speichern.

Oder verwenden Sie die Vorschau (oben rechts), um zu sehen, wie Ihre Stile auf ein Beispielformularlayout angewendet werden. Gehen Sie dann zu Ihrer Seite im WordPress-Editor und sehen Sie sich das tatsächliche Formular mit echten Feldern an.

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

• Füllen Sie jedes Feld aus, um die Abstände und die Ausrichtung zu überprüfen.
• Lösen Sie eine Fehlermeldung aus, um zu sehen, ob Ihre Farben klar sind.
• Schauen Sie sich das Formular auf dem Handy, dem Tablet und dem Desktop an, um sicherzustellen, dass es responsive ist.

Und das war's! Sie können nun damit beginnen, Ihre Kontaktformulare (oder andere Formulare) in WordPress zu gestalten, und zwar direkt im Formular-Builder.

Viel Spaß beim Styling!

Kontaktformulare gestalten - FAQs

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

Werden meine Stile überall gelten?

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 gerade arbeiten.

Das heißt, wenn Sie dasselbe Formular auf mehreren Seiten oder Beiträgen einbetten, wird es standardmäßig überall einheitlich aussehen. Die einzige Ausnahme ist, wenn Sie den Stil im Block-Editor oder in Elementor während der Einbettung absichtlich überschreiben. Diese Änderungen gelten nur für diese spezielle Seite.

Kann ich eine Formularvorlage gestalten?

Ganz genau. Templates in WPForms - wie "Simple Contact Form" oder "Newsletter Signup" - sind nur vorgefertigte Sätze von Feldern. Sobald Sie ein vorlagenbasiertes Formular einbetten, können Sie ein Thema wählen und sein Styling genau so anpassen, wie Sie es für ein benutzerdefiniertes Formular tun würden

Kann ich ein benutzerdefiniertes Thema löschen?

Ja, aber tun Sie es vorsichtig. Wenn Sie ein benutzerdefiniertes Thema aus dem Themen-Bedienfeld 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 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.