So passen Sie den Stil des Kontaktformulars 7 an Ihre Website an
Veröffentlicht: 2018-10-10Mit über einer Million aktiver Installationen ist Contact Form 7 mit Abstand eines der beliebtesten WordPress-Plugins aller Zeiten. Seine Popularität hat wahrscheinlich viel mit der Wahrheit hinter seiner Beschreibung zu tun: „Einfach, aber flexibel“.
Mit Contact Form 7 können Sie mehrere Kontaktformulare erstellen, indem Sie nichts anderes als einfaches HTML-Markup verwenden (das es für Sie generiert). Nach der Erstellung kann jedes Formular schnell bereitgestellt werden, indem der entsprechende Shortcode dort platziert wird, wo das Formular angezeigt werden soll. im Seiten-, Beitrags- oder Widget-Bereich. Über die Formulare übermittelte Nachrichten werden an die in den Plugin-Einstellungen hinterlegte E-Mail-Adresse gesendet und Spam wird durch die Unterstützung von CAPTCHA und Akismet bekämpft.
Das Kontaktformular 7 ist so einfach, dass es buchstäblich jeder effektiv nutzen kann. Auch das Styling soll einfach sein. Aber vielleicht für manche zu einfach. Standardmäßig gestaltet das Contact Form 7-Plugin seine Formulare nicht. Jedes Styling, das sie haben, ist das Ergebnis von Standard-Stylings, die im Stylesheet eines WordPress-Themes vorhanden sind.
In der Regel führt dies zu etwas ganz Grundlegendem, wie zum Beispiel:
Leider ist diese Art von Formular zwar einfach und flexibel, aber möglicherweise nicht so schön gestaltet wie die anderen Elemente auf der eigenen Website. Dies lässt viele ansonsten zufriedene Benutzer zurück, die nach Alternativen zu Contact Form 7 mit mehr Styling-Optionen suchen. Zum Glück ist jedoch mit nur ein wenig CSS keine Plugin-Alternative erforderlich.
Im heutigen Beitrag werde ich eine Reihe von Tipps teilen, die eine Vielzahl von Gestaltungsmöglichkeiten für das Kontaktformular 7 für jeden mit jedem Thema eröffnen.
So passen Sie den Stil des Kontaktformulars 7 an Ihre Website an
Abonnieren Sie unseren Youtube-Kanal
Wo Sie Ihr Kontaktformular 7 CSS bearbeiten (und warum)
Es ist wichtig, dass Sie beim Hinzufügen von benutzerdefiniertem CSS es nicht zum Stylesheet von Contact Form 7 oder Ihrem übergeordneten Thema hinzufügen. Alle Änderungen oder Ergänzungen, die Sie dort vornehmen, werden überschrieben, sobald das Theme und/oder Plugin aktualisiert wird.
Stattdessen solltest du das unten stehende CSS zum CSS deines Child-Themes hinzufügen. Sie können auch die benutzerdefinierte CSS-Funktion von Jetpack verwenden, oder wenn Ihr Thema in seinem Admin-Panel einen Abschnitt für benutzerdefiniertes CSS bereitstellt, können Sie dies auch verwenden.
Ok, da wir jetzt wissen, wo die Stile platziert werden sollen, die wir unten besprechen werden, fangen wir an!
So erstellen Sie Site-weite Formularstile
Beginnen wir mit einigen allgemeinen Änderungen, die sich auf das gesamte Formular beziehen. Wir können dies tun, indem wir den Klassenselektor .wpcf7 verwenden und dann Stile darunter hinzufügen.
(Ich möchte auch dringend vorschlagen, dass Sie die auskommentierte Überschrift, die ich unten geschrieben habe, in Ihr Stylesheet einfügen, um anzuzeigen, wo Ihre Contact Form 7-Stile beginnen.)
/* Contact Form 7 Styles
---------------------------------*/
.wpcf7 {
background-color: #F0F0F0;
border: 5px solid #666666;
}
Nachdem Sie den obigen Code zu Ihrem Stylesheet hinzugefügt haben, hat jedes Formular, das Sie mit Contact Form 7 erstellen, die soeben definierten Hintergrund- und Rahmenstile. Unten ist ein Beispiel.
Wie Sie sehen, gibt es einige Abstandsprobleme. Um dies zu beheben, müssen Sie die Ränder zwischen dem Rahmen und den inneren Formularelementen anpassen. Sie können dies mit dem folgenden Code tun.
.wpcf7-form {
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
Auf meiner Testseite ergab sich folgendes:
Hinweis: Diese Stile können sich auf Ihre Formulare auf leicht unterschiedliche Weise auswirken, da wir höchstwahrscheinlich mit unterschiedlichen Designs arbeiten. Das bedeutet nicht, dass dieser Code für Sie nicht funktioniert, nur dass Sie die Zahlen möglicherweise ein wenig anpassen müssen, um die Dinge für Ihre Website richtig zu machen.
So erstellen Sie Site-weite Formularfeldstile
Eine der häufigsten Anfragen an die Gestaltung von Kontaktformular 7 ist die Anpassung der Breite der Felder. Besonders der Nachrichtenbereich, der nicht sehr weit reicht.
Der folgende Code erweitert den Nachrichtenbereich auf die gewünschte Breite (wenn angepasst). Ich habe meine im Beispiel auf 95% gesetzt, da dies in meinem vorgestellten Anwendungsfall am besten aussah. Sie können es auch nach Ihren Bedürfnissen einstellen – mit einem Prozentsatz oder einer festen Pixelzahl.
.wpcf7-textarea {
width: 85%;
}
Sie können auch die Breite der anderen Felder anpassen, indem Sie den Eingabeklassenselektor anpassen.
.wpcf7 input {
width: 50%;
}
Wenn Sie nicht alle Ihre Eingabefelder mit den gleichen Kriterien anpassen möchten, können Sie einen kleinen Drilldown durchführen, indem Sie nur diejenigen auswählen, die Sie interessieren. Im folgenden Beispiel habe ich mich dafür entschieden, nur meine Textfelder so zu ändern, dass mein Senden-Button ist ebenfalls nicht betroffen.
.wpcf7-text {
width: 50%;
}
Nach all den oben genannten Änderungen konnte ich das Formular, das Sie unten sehen, formatieren.
Ich persönlich wollte meine Knopffarbe nicht ändern, aber ich denke, das ist wahrscheinlich ein weiterer häufiger Wunsch. Wenn Sie also die Farbe Ihrer Schaltfläche ändern möchten, können Sie das unten stehende CSS verwenden, um zu experimentieren.
.wpcf7-submit {
background: #555555;
color: #ffffff;
}
Mit diesen CSS-Bits sieht jedes mit Contact Form 7 erstellte Formular wie das letzte Bild oben aus. Aber was passiert, wenn Sie möchten, dass ein bestimmtes Formular anders aussieht als alle anderen?
So gestalten Sie ein bestimmtes Formular
Es kann etwas mühsam sein, die spezifische CSS-ID zu erhalten, die erforderlich ist, um Stiländerungen an einem bestimmten Formular vorzunehmen, aber es ist mit ein wenig Bastelei möglich.
Das erste, was Sie tun möchten, ist, den Formular-Shortcode zu Ihrer Site hinzuzufügen und eine Vorschau anzuzeigen. (Sie werden feststellen, dass in diesem Shortcode eine Nummer für die ID steht – aber das ist nicht die vollständige ID, die Sie benötigen.)
Sehen Sie sich dann mit der Elementprüfungsfunktion von Google Chrome oder einer ähnlichen Funktion in einem anderen Browser den Code für das Formular an. Damit finden Sie die vollständige Formular-ID.
In meinem Fall war die ID-Nummer in meinem Shortcode 4407 . Es stellte sich heraus, dass die vollständige ID wpcf7-f4407-p4405-o1 lautete . Das bedeutete, dass ich weitere Änderungen nur an diesem speziellen Formular vornehmen konnte, indem ich den folgenden Code mit verschiedenen Kriterien verwende, die sich von meinen Site-weiten Einstellungen unterschieden.
#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}
So gestalten Sie bestimmte Felder
Dasselbe können Sie mit bestimmten Feldern tun. Anstatt eine bestimmte CSS-Klasse oder -ID in Ihrem Browser aufzuspüren, müssen Sie sie nur im Formular-Builder hinzufügen.
Beim Generieren eines Tags zum Platzieren im Formular-Generator werden Sie feststellen, dass es zwei Optionen zum Erstellen einer ID, einer Klasse oder beidem gibt.
In diesem Beispiel habe ich mich dafür entschieden, eine Klasse namens Customized-field zu erstellen. Wenn Sie dasselbe (oder etwas Ähnliches) tun, können Sie nur dieses Feld mit Ihrer neuen ID (oder Klasse) wie unten angegeben formatieren.
#customized-field {
color: #ffffff;
border: 2px solid #333333;
}
So erstellen Sie benutzerdefinierte Formularlayouts für Kontrollkästchen und radiale Schaltflächen
Standardmäßig werden Kontrollkästchen und Radien von links nach rechts angezeigt.
Aber aufgrund persönlicher Vorlieben oder eines bestimmten Anwendungsfalls, in dem die Anzeige von oben nach unten vorzuziehen ist, können Sie eine der beiden folgenden Optionen verwenden.
Verwenden Sie diese Option, um Ihre Kontrollkästchen oder radialen Schaltflächen von oben nach unten und links anzuzeigen.
.wpcf7-list-item {
display: block;
}
Verwenden Sie dies, um Ihre Kontrollkästchen und radialen Schaltflächen von oben nach unten und rechts anzuzeigen. Stellen Sie außerdem sicher, dass Sie beim Generieren des Tags für diese Option das Kontrollkästchen „Zuerst beschriften“ aktivieren.
.wpcf7-list-item {
display: table-row;
}
.wpcf7-list-item * {
display: table-cell;
}
Bonus-Tipp: So entfernen Sie Feldtitel und verwenden stattdessen Platzhaltertext
Dieser Tipp erfordert nicht die Verwendung von CSS wie die anderen oben, sondern eine einfache Anpassung des Markups, das im Formular-Builder von Contact Form 7 verwendet wird.
Manchmal ist es nicht erforderlich, Feldtitel zu verwenden, insbesondere wenn Sie Platzhaltertext in die Felder selbst einfügen können, der erklärt, welche Informationen dorthin gehören.
Wenn dies auf Ihrer Site der Fall ist, müssen Sie nur die Titel im Formular-Builder löschen und Platzhaltertext hinzufügen, wie ich es im folgenden Beispiel getan habe.
<p></p> <p>[email* your-email placeholder "Email Address"]</p> <p></p> <p>[textarea your-message placeholder "Talk to me"]</p>
Das Ergebnis ist ein saubereres Formular mit weniger Unordnung.
Abschließend
Ich hoffe, ich habe in den obigen Beispielen gezeigt, dass das Contact Form 7-Plugin hochgradig anpassbar ist. Es stimmt, es erfordert ein bisschen Basteln, aber für ein kostenloses Plugin könnte man das erwarten.
Ich denke, dass das Fehlen von standardmäßigen Styling-Optionen ein großer Teil davon ist, warum das Plugin für so viele so gut funktioniert. Es ist also nur fair, dass jeder, der viel Wert daraus zieht, der mehr Stil will, sich ein paar Minuten Zeit nimmt, um eine Version eines der obigen Codebeispiele einzufügen.
Haben Sie eigene Stiltipps für Kontaktformular 7? Irgendwelche Favoriten, die Sie verwendet haben und die Sie teilen möchten? Schreib uns unten in die Kommentare!
Miniaturansicht des Artikels über Dmitry Lemon5ky // shutterstock.com