Viele WordPress-Benutzer beginnen mit Contact Form 7, da es kostenlos und beliebt ist. Aber diese anfängliche Begeisterung weicht oft der Frustration, wenn sie sehen, wie schlicht die Standardformulare aussehen.
Das grundlegende graue Styling kann mit dem Rest Ihrer Website kollidieren und das Gesamtdesign weniger poliert wirken lassen.
Leider verfügt Contact Form 7 nicht über einen visuellen Editor oder integrierte Styling-Optionen. Das bedeutet, dass selbst kleine Änderungen überwältigend sein können, wenn Sie sich mit Code nicht wohlfühlen.
Wenn Sie sich also jemals festgefahren gefühlt haben, wenn Sie versucht haben, Ihre Formulare an Ihre Marke anzupassen, sind Sie definitiv nicht allein!
Die gute Nachricht ist, dass Sie kein Entwickler sein müssen, um dies zu beheben. Mit nur wenigen CSS-Anpassungen können Sie Ihre Formulare so gestalten, dass sie sauber, modern und vollständig markenkonform aussehen.
In diesem anfängerfreundlichen Leitfaden zeigen wir Ihnen Schritt für Schritt, wie Sie Contact Form 7 anpassen – ganz ohne fortgeschrittene Programmier- oder Designkenntnisse.
Warum Ihr Kontaktformular 7 gestalten?
Contact Form 7 ist eines der beliebtesten Kontaktformular-Plugins für WordPress. Es ist kostenlos und ermöglicht Ihnen, ein WordPress-Formular mit einem Shortcode hinzuzufügen.
Contact Form 7 ist jedoch sehr eingeschränkt in seinen Funktionen.
Eines der Probleme mit Contact Form 7 ist, dass die Formulare schlicht gestaltet sind. Außerdem bietet das Plugin keine integrierten Optionen, um das Design Ihrer Formulare zu ändern.
Dies erschwert es, das Design des Kontaktformulars an Ihr Website-Theme anzupassen. Oder wenn Sie die Schrift- und Hintergrundfarbe bearbeiten möchten, um Ihr Formular hervorzuheben.
📦 Insider-Tipp: Wenn Sie anpassbarere Formulare mit erweiterten Funktionen wünschen, empfehlen wir WPForms. Es verfügt über einen Drag-and-Drop-Formularersteller, KI-Tools, über 2.000 vorgefertigte Formularvorlagen und zahlreiche Anpassungsoptionen.
Wir verwenden tatsächlich WPForms für fast alle unsere Formulare – vom WPBeginner-Kontaktformular über unsere jährlichen Leserumfragen bis hin zum Formular für Anfragen zur Website-Migration. Sehen Sie sich unsere detaillierte WPForms-Bewertung an, um zu sehen, warum wir diesen Formularersteller sehr empfehlen.
Wenn Sie ein begrenztes Budget haben, gibt es eine kostenlose Version von WPForms. Sie enthält über 60 Vorlagen, bedingte Logik, Stripe-Zahlungen und mehr.
Wir haben einen direkten Vergleich von Contact Form 7 vs WPForms, den Sie sich ansehen können!
Dennoch werden wir uns ansehen, wie Sie ein Contact Form 7-Formular in WordPress gestalten können. Hier sind alle Punkte, die wir in den folgenden Abschnitten behandeln werden:
- Erste Schritte mit Contact Form 7
- Methode 1: Contact Form 7-Formulare mit benutzerdefiniertem CSS gestalten
- Methode 2: Kontaktformular 7 mit CSS Hero gestalten
- Bonustipp 💡: Eine codefreie Methode zum Stylen von WordPress-Formularen
Lass uns anfangen!
Erste Schritte mit Contact Form 7
Zuerst müssen Sie das Contact Form 7 Plugin auf Ihrer Website installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zum Installieren eines WordPress Plugins.
Nach der Aktivierung können Sie in Ihrem WordPress-Dashboard zu Kontakte » Neu hinzufügen navigieren.
Sie können nun das Formular für Ihre Website bearbeiten und mit der Eingabe eines Titels für Ihr Formular beginnen.
Das Plugin fügt automatisch den Standardnamen des Formulars, die E-Mail-Adresse, den Betreff und die Nachrichtenfelder hinzu. Sie können jedoch auch weitere Felder hinzufügen, indem Sie sie einfach per Drag & Drop verschieben.
Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken und den Shortcode zu kopieren.
Der nächste Schritt ist, das Formular einzubetten in Ihren Blogbeitrag oder Ihre Seite.
Um das zu tun, bearbeiten Sie einfach einen Beitrag oder fügen Sie einen neuen hinzu.
Sobald Sie sich im WordPress-Editor befinden, klicken Sie auf das „+“-Zeichen oben und fügen Sie dann einen Shortcode-Block hinzu.
Geben Sie danach einfach den Shortcode für Ihr Kontaktformular 7 in den Shortcode-Block ein. Es wird ungefähr so aussehen:
[contact-form-7 id="117" title="Contact Form"]
Veröffentlichen Sie nun Ihren WordPress Blogbeitrag, um das Kontaktformular in Aktion zu sehen.
Für diesen Artikel verwenden wir das Standard-Kontaktformular und fügen es zu einer WordPress-Seite hinzu. So sah das Kontaktformular auf unserer Testseite aus.
Sind Sie bereit, Ihr Contact Form 7-Formular in WordPress anzupassen?
Methode 1: Contact Form 7-Formulare mit benutzerdefiniertem CSS gestalten
Da Contact Form 7 keine integrierten Stiloptionen hat, müssen Sie CSS verwenden, um Ihre Formulare zu gestalten.
Contact Form 7 generiert standardkonformen Code für Formulare. Jedes Element im Formular hat eine eigene ID und CSS-Klasse, was die Anpassung erleichtert, wenn Sie CSS kennen.
Jedes Contact Form 7-Formular verwendet die CSS-Klasse .wpcf7, die Sie zum Stylen Ihres Formulars verwenden können.
In diesem Beispiel verwenden wir die benutzerdefinierte Schriftart namens Lora in unseren Eingabefeldern und ändern die Hintergrundfarbe des Formulars.
div.wpcf7 {
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif;
font-style:italic;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}
Wenn Sie Hilfe beim Hinzufügen des benutzerdefinierten CSS benötigen, lesen Sie bitte unseren Leitfaden zum einfachen Hinzufügen von benutzerdefiniertem CSS zu einer WordPress-Website.
So sah unser Kontaktformular nach Anwendung dieses CSS aus.
Mehrere Contact Form 7-Formulare gestalten
Wenn Sie mehrere Kontaktformulare verwenden und diese unterschiedlich gestalten möchten, müssen Sie die von Contact Form 7 für jedes Formular generierte ID verwenden.
Das Problem mit dem oben verwendeten CSS ist, dass es auf alle Contact Form 7-Formulare auf Ihrer Website angewendet wird.
Öffnen Sie zunächst einfach eine Seite, die das Formular enthält, das Sie ändern möchten. Bewegen Sie dann Ihre Maus zum ersten Feld im Formular, klicken Sie mit der rechten Maustaste und wählen Sie die Option „Inspizieren“.
Der Browserbildschirm wird geteilt und Sie sehen den Quellcode der Seite. Im Quellcode müssen Sie die Startzeile des Formularcodes finden.
Wie Sie im obigen Screenshot sehen können, beginnt unser Kontaktformular-Code mit der Zeile:
<div role="form" class="wpcf7" id="wpcf7-f113-p114-o1" lang="en-US" dir="ltr">
Das ID-Attribut ist eine eindeutige Kennung, die von Contact Form 7 für dieses spezielle Formular generiert wird. Es ist eine Kombination aus der Formular-ID und der Beitrags-ID, wo dieses Formular hinzugefügt wird.
Wir werden diese ID in unserem CSS verwenden, um unser Kontaktformular zu gestalten und .wpcf7 in unserem ersten CSS-Snippet durch #wpcf7-f113-p114-o1 zu ersetzen.
div#wpcf7-f113-p114-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f113-p114-o1 input[type="text"],
#wpcf7-f113-p114-o1 input[type="email"],
#wpcf7-f113-p114-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f113-p114-o1 input[type="submit"],
#wpcf7-f113-p114-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}
Sie können den Schritt nun für alle Ihre Formulare wiederholen und die Formular-ID für jedes Contact Form 7-Formular ersetzen, das Sie anpassen möchten.
Methode 2: Kontaktformular 7 mit CSS Hero gestalten
Ein einfacherer Weg, den Stil von Kontaktformular 7-Formularen zu ändern, ist die Verwendung von CSS Hero. Damit können Sie Ihre Formulare bearbeiten, ohne CSS schreiben zu müssen.
Installieren und aktivieren Sie einfach das CSS Hero Plugin auf Ihrer Website. Sie können unserer Anleitung folgen: wie man ein WordPress-Plugin installiert.
Gehen Sie als Nächstes zu der Seite, die Ihr Formular enthält, und klicken Sie in der Symbolleiste oben auf die Option „Mit CSS Hero anpassen“.
CSS Hero bietet Ihnen eine benutzerfreundliche Oberfläche, um das CSS zu bearbeiten, ohne Code schreiben zu müssen.
Mit dem Plugin können Sie auf jedes Feld, jede Überschrift und andere Elemente Ihres Formulars klicken und die Hintergrundfarbe, Schriftart, Ränder, Abstände und vieles mehr bearbeiten.
Nachdem Sie Ihr Formular angepasst haben, klicken Sie einfach unten auf die Schaltfläche „Speichern & Veröffentlichen“.
Bonustipp 💡: Eine codefreie Methode zum Stylen von WordPress-Formularen
Wenn Ihnen die Arbeit mit CSS in Contact Form 7 etwas zu technisch ist, gibt es eine viel einfachere, codefreie Lösung: WPForms.
WPForms ist der beste Formularersteller auf dem Markt. Er verfügt über einen visuellen Editor und vordefinierte Designs, sodass Sie Ihre Formulare vollständig anpassen können, ohne eine einzige Zeile Code schreiben zu müssen.
So einfach gestalten Sie ein Formular in WPForms:
Nachdem Sie Ihr Formular zu einer Seite hinzugefügt haben, öffnen Sie das Blockeinstellungen-Panel auf der rechten Seite und scrollen Sie zum Abschnitt 'Themes'.
Dann können Sie einfach aus über 40 schönen, vordefinierten Themes wählen, um sie sofort an das Design Ihrer Website anzupassen.
Darüber hinaus können Sie:
- Feldgröße, Rahmen und Farben anpassen
- Schriftarten, Unterbeschriftungen und Fehlermeldungen anpassen
- Gestalten Sie die Absenden-Schaltfläche passend zu Ihrem Branding
Für Schritt-für-Schritt-Anleitungen können Sie unseren Leitfaden zur Anpassung und Gestaltung von WordPress-Formularen einsehen.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Contact Form 7-Formulare in WordPress gestalten. Möglicherweise möchten Sie auch unsere Expertentipps zur Verwendung bedingter Logik in WordPress-Formularen und unseren ultimativen Leitfaden zur Verwendung von WordPress-Formularen sehen.
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.
Alejandro
Danke!
Ihre Anweisungen waren sehr nützlich.
Vielen Dank, dass Sie sich die Zeit genommen haben, sie zu teilen!
WPBeginner Support
Glad our guide was helpful
Admin
hmi
Hallo Herr, wo finde ich den CSS-Code der Felder?
Vielen Dank
WPBeginner Support
Um das aktuelle CSS zu finden, sollten Sie das Element untersuchen:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Tony Tran
Ich kann die Hintergrundfarbe des CSS-Buttons zum Absenden nicht ändern... bitte helfen Sie
WPBeginner Support
Möglicherweise zielen Sie auf das falsche Objekt ab. Möglicherweise möchten Sie sich unseren Artikel hier ansehen:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Deshave
Die Schaltfläche zum Absenden im PDF funktioniert nicht mehr, seitdem das Formular auf die WordPress-Website hochgeladen wurde.
WPBeginner Support
Das von uns empfohlene PDF-Einbettungsformat dient zur Anzeige von Inhalten. Zum Ausfüllen von Formularen empfehlen wir die Verwendung eines Formular-Plugins.
Admin
zeeshan alam
Danke fürs Teilen, Sir
WPBeginner Support
You’re welcome
Admin
Steve
Hallo, ist es möglich, eine Nachricht hinzuzufügen, wenn ich ein oder mehrere „Pflichtfelder“ nicht ausgefüllt habe, um eine Nachricht zu erhalten? Denn ich erhalte nur die „roten Pfeile“ auf den „Pflichtfeldern“, die ich nicht ausgefüllt habe. Ich möchte zusätzlich eine Fehlermeldung wie
"Ein oder mehrere Pflichtfelder enthalten einen Fehler. Bitte überprüfen Sie und versuchen Sie es erneut."
Aber ich habe nur die roten Pfeile, und das Problem ist, dass die roten Pfeile auf Mobiltelefonen nicht im Fenster sind und der Kunde sie nicht sieht.
WPBeginner Support
Sie müssten sich an den Support von Contact Form 7 wenden, um zu erfahren, was sie derzeit anbieten.
Admin
FRED_VERSATILE
Hallo,
Vielen Dank für dieses Tutorial.
Ich möchte ein benutzerdefiniertes Bild rechts neben dem „Senden“-Label in der Schaltfläche hinzufügen.
Ich habe es mit einem :before für die anderen Schaltflächen auf meiner Website gemacht, aber ich kann das Element im Sendeformular nicht finden, um das CSS einzufügen...
WPBeginner Support
Abhängig von Ihrem Formular würde sich ändern, was Sie ansprechen möchten. Wenn Sie das Element untersuchen, sollten Sie die ID oder Klasse des Objekts sehen können:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Sie könnten auch :after anstelle von :before als weitere Option verwenden
Admin
Muhammad Tahir
Wie man die Farbe des Antworttextes eines BESTIMMTEN Kontaktformulars ändert
waqas
Können wir ein Zeitfeld in Contact Form 7 ohne Plugin hinzufügen?
Mary Lou Hoffman
Ich bin ein Anfänger, aber entschlossen, das herauszufinden! Bitte geben Sie mir also Schritt-für-Schritt-Anleitungen, wenn Sie antworten.
Ich habe ein Kontaktformular7 auf meiner Website. Die Schrift wird für die Beschriftungen (Ihr Name, Ihre E-Mail usw.) als weiß auf weißem Hintergrund angezeigt.
Wie ändere ich die Farbe – wohin muss ich gehen, um sie zu ändern?
Ich habe versucht, einige der Codes, die ihr in euren Antworten oben hattet, zu kopieren und einzufügen, aber sie erschienen einfach auf meiner Seite, änderten aber nicht die Schrift.
Karu Price
Sie können den Beschriftungsbereich wie folgt anvisieren:
.wpcf7 form p label { color: white; background: black; font-family: sans-serif; }
Rita Accarpio
Hallo!
Ich kämpfe hier mit Modal-Überschriften. Ich habe den Formularhintergrund in eine dunklere Farbe geändert, möchte aber jetzt die Farbe der Überschrift ändern. Es scheint sich mit allen verschiedenen Optionen, die ich bisher ausprobiert habe, überhaupt nicht zu ändern.
Kennen Sie einen Weg, das zu tun? Helfen Sie mir bitte!
Danke!
Chris
Danke!
Abhijeet
Ich möchte den Abstand zwischen den Feldern für Name und E-Mail verringern... wie mache ich das.
Naveen
Danke für einen großartigen Beitrag, er war sehr hilfreich.
Josh
Das hat sehr geholfen. Danke!
Joel Desrosiers
Mein Kontaktformular hat einen dunklen Bildhintergrund, daher benötige ich, dass „Ihr Name“, „Ihre E-Mail“ und „Ihre Nachricht“ weiß sind. Ich kann keine Klasse oder ID für diese Elemente finden, ich habe es mit „Element untersuchen“ versucht, aber nichts gefunden, das funktioniert. Dies ist das einzige Kontaktformular auf dieser Website. Ich verwende CSS im Stylesheet meines Child-Themes und habe verschiedene Optionen ausprobiert, aber die Farbe kann ich nicht ändern. Kann mir jemand helfen?
Merriann Fu
Ich bin ziemlich neu bei WordPress und Plugins im Allgemeinen, habe aber dieses Plugin installiert und alles funktioniert korrekt, aber anstatt die Nachricht der Person zu sehen, wird im E-Mail-Text nur [Ihre-Nachricht] angezeigt. Ich habe alles wie oben eingerichtet und richtig geschrieben, daher bin ich mir nicht sicher, was das Problem ist. Jede Hilfe wäre sehr willkommen! Danke!
Don Walley
Ich habe dasselbe Problem. Ich bin neu bei Formularen in WP, aber ich stecke auch fest. Ich versuche, eine Registrierungsseite mit Firmennamen, Adresse usw. zusammen mit persönlichen Kontaktdaten und einem Dropdown-Menü zur Auswahl sowie natürlich einem Kommentarfeld zu erstellen. Nach zahlreichen Tests erhalte ich dasselbe wie Sie; den Inhalt des Kommentarfeldes.
Ich wünschte, es gäbe ein oder zwei Beispiele auf der Dokumentationsseite von Contact 7; etwas anderes als nur das Standard-Contact Form.
Miguel Ceballos
Ich glaube nicht, dass Contact Form 7 das beliebteste ist. Es ist bei vielen Themes und WordPress-Installationen vorinstalliert, deshalb haben sie so viele Benutzer. Es ist so frustrierend, etwas in diesem Plugin zu bearbeiten.
Osama Ali Khan
Hallo, falls jemand ein Kontaktformular mit transparentem Hintergrund wünscht oder ein Kontaktformular 7 auf einem großen Bannerbild mit transparentem Hintergrund hinzufügen möchte, fügen Sie diesen Code zu Ihrem benutzerdefinierten CSS hinzu.
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
background-color: Transparent;
color: BLUE;
width: 100%;
}
div.wpcf7 { color: white; margin: 0; padding: 0; }
Deborah
Du bist ein absoluter Lebensretter. Ich habe stundenlang damit gekämpft.
Ein Punkt, den ich ansprechen möchte und der für andere nützlich sein könnte, ist, dass ich versucht habe, den Absende-Button zu stylen, der auf einem Kontaktformular 7 war, das ich in meine Seitenleiste eingefügt hatte.
Dies funktionierte für die erste Seite, auf der es sich befand, aber dann nicht mehr auf nachfolgenden Seiten. Ich bemerkte dann jedoch, dass der f2-Code auf der zweiten Seite ein Suffix von 'o2' hatte, und als ich dies zu meinem CSS hinzufügte, funktionierte das Styling auf dieser Seite ebenfalls.
Nochmals vielen Dank.
WPBeginner Support
Glad you found it helpful.
Admin
Mikko
Danke für einen tollen Beitrag, war sehr hilfreich. Eine Sache stört mich immer noch, und zwar, dass ich keinen Weg gefunden habe, Kontrollkästchen anzupassen. Haben Sie einen Weg gefunden, wie man die Größe von Kontrollkästchen ändern könnte, damit es in jedem Browser funktioniert?
Scheint, als ob die Eingabestruktur nicht geändert wurde, sodass keine zusätzlichen Spans hinzugefügt werden konnten, um die Kontrollkästchen zu simulieren, habe ich Recht?
Freut mich, wenn Sie Zeit haben, mir zu helfen, Prost.
Wendy
Oh mein Gott! Sie haben keine Ahnung, wie dankbar ich für diesen Beitrag bin! DANKE!
Ich wollte einfach die Schriftart für den Senden-Button ändern. Ich habe stundenlang gesucht und verschiedene CSS-Codevarianten ausprobiert, aber nichts funktionierte, bis ich auf Ihren Code gestoßen bin und dann ein Font-Element hinzugefügt habe. Problem gelöst!
pranav shinde
contact-form-7/includes/css/styles.css (inaktiv) dies erscheint über meiner CSS-Bearbeitungsdatei, wodurch keine meiner Änderungen auf der Website angewendet werden. Helfen Sie mir, wie ich sie aktiv machen kann
WPBeginner Support
Sie sollten die Kern-Plugin-Dateien nicht bearbeiten. Fügen Sie stattdessen Ihr CSS zum Stylesheet Ihres Themes hinzu.
Admin
pranav shinde
Ja, ich habe es verstanden, können Sie mir bitte helfen, wie ich das machen kann? Bitte helfen Sie mir im Detail.
pranav shinde
Vielen Dank, Sir, sehr hilfreich, ich werde Ihren Kanal abonnieren
pranav shinde
bedeutet, ich sollte diesen Code in die CSS-Datei meines Themes kopieren, richtig??
Monique
Hallo,
Ich frage mich, ob mir jemand helfen kann, das Kontaktformular für Mobilgeräte zu reparieren. Ich kann das Formular sehen, aber es ist zu breit und wird abgeschnitten.
Danke.
puneet singh
dieses sehr hilfreiche, wirklich nette Tutorial
Jiniya
Ich finde Ihre Website sehr hilfreich. Nur ein Vorschlag: Es wäre toll, wenn Sie bald eine App für Ihre Website herausbringen könnten… Apps sind bequemer als E-Mails zu verfolgen.
WPBeginner Support
Klingt nach einer guten Idee. In der Zwischenzeit können Sie WPBeginner über die Feedly-App auf Ihrem Mobilgerät aufrufen.
Admin
Anee
Die wichtigsten Funktionen in WordPress, die Sie ganz einfach gestalten können, ohne tiefgreifende Kenntnisse für die Verwaltung Ihrer Website in WordPress zu benötigen. Im Contact 7 Formular können Sie Ihre eigene Struktur verwenden, die Sie bereits in HTML oder einer anderen Form entworfen haben.
Neil Murray
Wenn die Arbeit mit CSS Ihre aktuellen Fähigkeiten übersteigt, könnten Sie auch https://wordpress.org/plugins/contact-form-7-skins/ in Betracht ziehen.
Contact Form 7 Skins, das direkt in der normalen Contact Form 7-Oberfläche funktioniert und es normalen WordPress-Benutzern erleichtert, professionell aussehende Contact Form 7-Formulare mit einer Reihe kompatibler Vorlagen und Stile zu erstellen – auch wenn Sie keine HTML- und CSS-Kenntnisse haben.
Sam
danke Neil
Andrew Wilkerson
Danke Neil, ich glaube, das ist genau das, was ich brauchte. Ich war aufgeregt und habe es installiert, dann meine bestehende Form gelöscht, also musste ich ein Backup meiner Website wiederherstellen, um es wieder zum Laufen zu bringen. Ich werde es mir genauer ansehen, wenn ich Zeit habe. Ich schätze, ich muss meine aktuelle Form hineinkopieren oder von vorne mit einer neuen beginnen. Ich gehe jetzt ein paar Tutorials schauen. Hoffentlich ist dies immer noch das beste, was man verwenden kann. Ich weiß, dass dies ein alter Beitrag hier ist, aber er besagt, dass er auf der Plugin-Seite kürzlich aktualisiert wurde.
Bhongo
Fantastischer Artikel. Ich werde dies verwenden, um meine Website zu gestalten.
Mark
Ein weiterer guter Artikel, bei dem man nicht noch ein Plugin verwendet.