Contact Form 7 anpassen

„Contact Form 7“ ist meiner Meinung nach das beste Formular-PlugIn für WordPress. Daher nutze ich es ausschliesslich. Da passiert es natürlich auch, dass man individuelle Einstellung machen muss, damit es optisch zum Theme passt.

Hier nun der CSS-Code für einige Einstellungen. Ich füge den Code immer unter „Design -> Customizer -> Zusätzliches CSS“ ein.

 

Code Hauptformular

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

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

 

Code Dropdown/ Select

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.

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

 

Code Eingabefelder Text, E-Mail, Textfeld etc.

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

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

 

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;
}

 

Code Mouseover Sendebutton

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

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

 

Code für alle Meldungen nach Absenden

Code definiert sowohl Fehlermeldung als auch Erfolgsmeldung!

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

 

Code für Erfolgsmeldung nach Absenden

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

 

Code für Fehlermeldung nach Absenden

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