Tel.: +49 (0) 231 97 390 682         Mail: info[at]seohit.de         Skype: SEOHIT_Do

CSS Code Contact Form 7

In diesem Blogbeitrag poste ich etwas CSS-Code zum Design eines Kontaktformulars mit Contact Form 7. Ihr könnt den Code gerne kopieren und für Euer eigenes Design verwenden.
Den Code einfügen könnt Ihr mit den gängigen CSS-Plugins für WordPress, beispielsweise mit Simple Custom CSS.
Für alles die sich sich nicht gut mit CSS auskennen gibt es ab und zu noch ein Paar Extrainfos zu den einzelnen Befehlen.

In diesem Blogbeitrag poste ich nur CSS-Code zum Design eines Kontaktformulars mit  Contact Form 7. Ihr könnt den Code gerne kopieren und für Euer eigenes Design verwenden.
Den Code einfügen könnt Ihr mit den gängigen CSS-Plugins für WordPress, beispielsweise mit Simple Custom CSS.
Für alles die sich sich nicht gut mit CSS aus kennen gebe ich immer noch ein Paar Extrainfos zu den einzelnen Befehlen.

01 | Code Hauptformular

div.wpcf7 {
background-color: #2590c5 ;
border: 2px solid #2590c5 ;
border-radius: 5px;
padding:20px;
color:#ffffff;
font-size:15px;
}

Code für die Breite, Hintergrundfarbe, die Innenabstände etc. des Kontaktformulars.

02 | Code Dropdown/ Select

.wpcf7 select {
color: black;
width: 25% ;
font-size:17px !important;
}

Code  für Euer Dropdown-Menu im Formular (=Select als Code im Formular). !important  bei der Schriftgröße bedeutet übrigens, dass der Befehl auf jeden Fall befolgt werden soll, egal ob es andere Befehle für denselben Wert innerhalb Eurer WordPress-Seite gibt.

Elementor ist mein absoluter Lieblings-WordPress Pagebuilder. Mehr dazu erfahrt Ihr im Blogartikel zur Pro Version (diese ist kostenpflichtig – die bereits sehr gute Basisversion ist allersings kostenlos) oder auf der Elementor Website.*

03 | Code Eingabefelder Text, E-Mail, Textfeld etc.

.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 textarea {
background:#ffffff;
color:#000000;
font-family:arial;
width: 70% !important;
}

Code zum Definieren mehrer Eingabefelder, die dieselben Werte und Designs haben.

04 | Code Senden / Sendebutton

.wpcf7 input[type=”submit”]
{
background-color:#efefef;
color:#4a6c7a;
font-family:arial;
font-size: 16px;
width:70%;
margin-left:0%;
text-align:center;
text-transform:uppercase;
float:left;
}

05 | Code Mouseover Sendebutton

.wpcf7 input[type=”submit”]:hover
{
background-color:#efefef;
color:#4a6c7a;
font-size:18px;
}

Der Befehl :hover sorgt dafür, dass sich das entsprechende Feld/der entsprechende Bereich ändert, sobald man mit der Maus darüberfährt.

06 | Code für alle Meldungen nach Absenden

.wpcf7 div.wpcf7-response-output {
background-color:#efefef;
color:#4a6c7a;
font-size:18px;
border:2px solid #4a6c7a;
}

Code definiert sowohl Fehlermeldung als auch Erfolgsmeldung!

07 | Code für Erfolgsmeldung nach Absenden

.wpcf7 div.wpcf7-mail-sent-ok {
background-color:#efefef;
color:#4a6c7a;
font-size:18px;
border:2px solid #4a6c7a;
}

08 | Code für Fehlermeldung nach Absenden

.wpcf7 div.wpcf7-validation-errors {
background-color:#efefef;
color:#4a6c7a;
font-size:18px;
border:2px solid #4a6c7a;
}

* Alle Links zur Elementor Website sind Affiliate Links. 

© Copywright SEOHIT 2018 | Alle Rechte vorbehalten