Wie Sie Formulare in Contact Form 7 mit CSS in WordPress gestalten
Möchten Sie, dass Ihre WordPress-Formulare genauso ansprechend aussehen wie der Rest Ihrer Website? Mit Contact Form 7 haben Sie die volle Kontrolle über das Erscheinungsbild Ihres Formulars mithilfe von CSS. Diese Anleitung führt Sie Schritt für Schritt durch den Prozess der Gestaltung von Contact Form 7-Formularen, sodass Sie ein nahtloses, markenkonformes Erlebnis für Ihre Besucher schaffen können.
Warum Contact Form 7-Formulare gestalten?
Contact Form 7 ist eines der beliebtesten WordPress-Plugins zum Erstellen von Formularen – aber das Standarddesign ist schlicht. Individuelle Gestaltung in klassischen WordPress-Themes ermöglicht Ihnen:
Passen Sie das Branding Ihrer Website an
Benutzerfreundlichkeit und Barrierefreiheit verbessern
Formulare einladender und professioneller gestalten
Schritt 1: Identifizieren Sie die CSS-Selektoren Ihres Formulars
Bevor Sie mit dem Gestalten beginnen, müssen Sie wissen, welche CSS-Selektoren Ihre Formularelemente ansprechen.
Jedes Contact Form 7-Formular ist in eine eindeutige Klasse eingebettet: .wpcf7
Einzelne Elemente wie Eingabefelder, Textareas und Absenden-Schaltflächen verwenden Standard-HTML-Tags
Schritt 2: Fügen Sie benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzu
Sie können CSS auf zwei Hauptarten hinzufügen:
Über den Customizer:
Gehen Sie zu Design > Customizer > Zusätzliches CSS und fügen Sie Ihre Styles ein.
HINWEIS: Fügen Sie Ihr CSS für erweiterte Anpassungen in die style.css-Datei Ihres Child-Themes ein.
Schritt 3: Schreiben Sie Ihr benutzerdefiniertes CSS
Hier sind einige gängige Beispiele, um Ihnen den Einstieg zu erleichtern, wobei die Komponenten „Text“ und „Absenden“ als Beispiel dienen:
Alle Contact Form 7-Formulare gestalten
.wpcf7 input[type="text"],
.wpcf7 textarea {
border: 2px solid #0073e6;
padding: 10px;
width: 100%;
font-size: 1em;
}
.wpcf7 input[type="submit"] {
background: #0073e6;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1em;
cursor: pointer;
transition: background 0.2s;
}
.wpcf7 input[type="submit"]:hover {
background: #005bb5;
}
Pseudo-Klassen in CSS wie :hover ermöglichen es Ihnen, Elemente basierend auf ihrem Zustand oder der Interaktion des Nutzers zu gestalten. Zum Beispiel wendet die Pseudo-Klasse :hover Styles an, wenn ein Nutzer mit der Maus über eine Schaltfläche oder ein Feld fährt. Dies wird häufig verwendet, um Schaltflächen hervorzuheben oder deren Farbe beim Überfahren zu ändern, wodurch Ihre Formulare interaktiver und ansprechender werden. Weitere nützliche Pseudo-Klassen sind :focus (wenn ein Eingabefeld ausgewählt ist) und :active (wenn ein Element angeklickt wird). Die Verwendung von Pseudo-Klassen verbessert die Benutzererfahrung, indem sie sofortiges Feedback gibt, wenn Besucher mit Ihrem Formular interagieren.
Ein bestimmtes Formular ansprechen
Jedes Formular hat eine eindeutige ID, wie #wpcf7-f123-o1. Verwenden Sie diese, um nur dieses Formular zu gestalten:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Ersetzen Sie f123-o1 durch die tatsächliche ID Ihres Formulars. Sie finden die eindeutige ID Ihres Formulars, indem Sie die Seite aufrufen, auf der Ihr Contact Form 7-Formular eingebettet ist, mit der rechten Maustaste auf das Formular klicken und im Browser „Untersuchen“ (oder „Element untersuchen“) auswählen. Suchen Sie nach dem <div> mit der Klasse .wpcf7 – die ID erscheint im HTML-Code als id="wpcf7-f123-o1". Verwenden Sie diese ID in Ihrem CSS-Selektor, um nur dieses spezielle Formular anzusprechen.
Schritt 4: Verwenden Sie die integrierten Klassen von Contact Form 7
Contact Form 7 fügt den Elementen automatisch Klassen hinzu, was das Ansprechen noch einfacher macht. Zum Beispiel:
.wpcf7-form-control – Alle Formularelemente
.wpcf7-submit – Die Absenden-Schaltfläche
Sie können im Formular-Editor auch eigene Klassen hinzufügen, um noch mehr Kontrolle zu haben.
Beispiel
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
Schritt 5: Vorschau und Anpassung
Nachdem Sie Ihr CSS gespeichert haben, aktualisieren Sie Ihre Website, um die Änderungen zu sehen. Verwenden Sie das Inspektor-Tool Ihres Browsers, um Styles in Echtzeit anzupassen, bevor Sie sie auf Ihrer Website übernehmen. Leeren Sie nach Änderungen unbedingt den Cache Ihrer Website, damit die Aktualisierungen für Besucher sichtbar werden.
Hier sind Vorher-Nachher-Beispiele eines Formulars auf einer Demo-Website, bei denen wir den CSS-Code aus Schritt 3 verwendet haben, um die Rahmen um jedes Formularfeld blau zu färben.
Schnelle Tipps für besseres Formular-Design
Barrierefreiheit beachten: Sorgen Sie für guten Farbkontrast und gut lesbare Schriftgrößen
Abstände nutzen: Fügen Sie Polsterungen und Ränder hinzu, um ein sauberes, übersichtliches Erscheinungsbild zu erzielen
Fehler hervorheben: Gestalten Sie Fehlermeldungen mit einer klaren Farbe (z. B. Rot), damit Nutzer Fehler leichter beheben können
Auf Mobilgeräten testen: Stellen Sie sicher, dass Ihre Formulare auf allen Geräten gut aussehen
Fehlerbehebung
Wenn Ihre Styles nicht angezeigt werden, versuchen Sie Folgendes:
Browser- und Website-Cache leeren – Manchmal verhindern zwischengespeicherte Dateien die Anzeige des neuen CSS. Wenn Sie ein Caching-Plugin oder Managed Hosting verwenden, leeren Sie auch diese Caches.
CSS-Spezifitätsprobleme prüfen – Wenn Ihre Styles nicht angewendet werden, versuchen Sie, Ihre Selektoren spezifischer zu machen, um bestehende Styles zu überschreiben.
Stellen Sie sicher, dass Sie die richtige CSS-Datei oder den richtigen Abschnitt bearbeiten – Überprüfen Sie, ob Sie Ihren Code an der richtigen Stelle hinzufügen, z. B. im Bereich Zusätzliches CSS, in der style.css Ihres Child-Themes oder in einem benutzerdefinierten CSS-Plugin.
CSS-Klassen auf Tippfehler oder Fehler prüfen – Achten Sie auf falsch geschriebene Klassennamen, unnötige Leerzeichen oder versehentliche Verwendung der falschen Klasse. Überprüfen Sie außerdem, ob die Klasse, die Sie ansprechen möchten, tatsächlich im HTML Ihres Formulars existiert.
Auf doppelte oder widersprüchliche Klassen prüfen – Stellen Sie sicher, dass die von Ihnen verwendete Klasse nicht bereits an anderer Stelle mit anderen Styles verwendet wird, die Ihre Änderungen überschreiben könnten.
Allgemeine Best Practices befolgen – Verwenden Sie klare und konsistente Namen für Ihre Klassen, beenden Sie jede CSS-Regel mit einem Semikolon und schließen Sie Codeblöcke immer korrekt mit einer geschweiften Klammer (}).
Eine sorgfältige Überprüfung Ihres Codes auf diese häufigen Probleme hilft sicherzustellen, dass Ihre benutzerdefinierten Styles korrekt auf Ihrer Website angezeigt werden.
Beispiel: Komplettes benutzerdefiniertes CSS für ein Contact Form 7-Formular
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}
.wpcf7 input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 10px 24px;
font-size: 1.1em;
cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
background-color: #218838;
}
Hier ist ein Beispiel für ein Formular, das mit dem obigen CSS-Code gestaltet wurde. Dieser CSS-Code passt das Erscheinungsbild mehrerer Schlüsselelemente Ihres Contact Form 7-Formulars an. Er richtet sich an alle Textfelder, E-Mail-Felder und Textareas und verleiht ihnen einen hellgrauen Rahmen, abgerundete Ecken, angenehme Abstände und eine einheitliche Breite für ein sauberes, modernes Erscheinungsbild.
Der Code gestaltet außerdem die Absenden-Schaltfläche mit grünem Hintergrund, weißem Text, abgerundeten Ecken und einer fetten, gut lesbaren Schrift. Wenn Nutzer mit der Maus über die Absenden-Schaltfläche fahren, wird der Hintergrund dunkler grün, was ein interaktives Feedback bietet.
CSS hinzufügen: klassische Themes vs. Block-Themes
Die Schritte in dieser Anleitung zum Gestalten von Contact Form 7-Formularen mit CSS sind für klassische Themes in WordPress gedacht. Klassische Themes wie das beliebte Astra verwenden den Customizer, in dem Sie unter „Zusätzliches CSS“ ganz einfach eigenes CSS hinzufügen können. So können Sie Ihre Formulare einfach gestalten und Änderungen live sehen.
Wenn Ihre Website jedoch ein Block-Theme verwendet (manchmal auch als Full Site Editing oder FSE-Theme bezeichnet), ist der Prozess anders. Block-Themes enthalten nicht immer standardmäßig den Customizer oder das Feld „Zusätzliches CSS“. Stattdessen verwenden Sie den Site Editor, um Designänderungen vorzunehmen. Während Sie globale Styles für Farben, Typografie und Layout anpassen können, ist das Hinzufügen von beliebigem benutzerdefiniertem CSS nicht immer in der Benutzeroberfläche verfügbar.
Was tun, wenn Sie ein Block-Theme verwenden
Öffnen Sie Ihr WordPress-Dashboard und gehen Sie zu Design > Editor (Site Editor).
Suchen Sie im Site Editor nach dem Styles-Panel (das halb schattierte Kreis-Symbol).
Einige Block-Themes bieten jetzt eine Option „Zusätzliches CSS“ im Styles-Panel, aber das hängt von Ihrem Theme und Ihrer WordPress-Version ab.
Wenn Sie keine Option zum Hinzufügen von benutzerdefiniertem CSS sehen, können Sie ein Plugin wie WPCode verwenden, um benutzerdefiniertes CSS für die gesamte Website hinzuzufügen. WPCode ist einsteigerfreundlich und funktioniert mit jedem Theme, sodass Sie Ihre Formulare auch dann gestalten können, wenn Ihr Theme keine direkte CSS-Bearbeitung in der Benutzeroberfläche unterstützt. Beachten Sie jedoch, dass die Installation dieses Plugins das Design anderer bereits vorhandener Formulare auf Ihrer Website beeinflussen kann.
Weitere Ressourcen
Das Gestalten Ihrer Contact Form 7-Formulare ist eine einfache, aber wirkungsvolle Möglichkeit, die Benutzererfahrung Ihrer Website zu verbessern. Mit nur wenigen Zeilen CSS können Sie Ihre Formulare so gestalten, dass sie sich wie ein natürlicher Teil Ihrer Marke anfühlen und aussehen.