CSS Code Contact Form 7

Kontaktformular individuell anpassen

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, damit Ihr das Formular optimal an Eure Wünsche anpassen könnt.

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.

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

Aktuelle Angebote

*Alle Preise zzgl. 19% USt.

Weitere Blogartikel

Werbung

Seobility SEO Tool
Menü schließen