SEO Blog

CSS Code zum Design von Contact Form 7

Dezember 19, 2016

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

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

Noch mehr spannende Themen:

Blog

Kostenloser Firmeneintrag – 30 Gratis Branchenbücher

SEO Blog 30 kostenlose Branchenbücher für Euren Firmeneintrag Aktuelle Liste 2023 – Inklusive Domain Rating zu jedem Eintrag Im Folgenden findet Ihr eine Liste mit

Andreas 5. April 2020

Blog

Elementor Pro – Widgets in der Live Anwendung

Elementor Pro – Widgets und andere Funktionen im Überblick Lohnt sich Elementor Pro? Im Video Tutorial findet Ihr die Funktionen von Elementor Pro im Überblick

Andreas 27. August 2017

SEOHIT

SEOHIT

CSS Code zum Design von Contact Form 7

Inhaltsverzeichnis:

Werbung