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

Artikel bewerten:

5/5
5.0 (5 Bewertungen)

SEO Online Beratung

Wir optimieren Deine Seite zusammen.
SEO Reports Bild
  • SEO "Learning by Doing"
  • Optimierung Startseite oder Unterseite**
  • Individuelle Empfehlungen
  • Zahlreiche Tool Tipps
  • Kostenloses Vorgespräch
  • Schon ab 34,50€* / 30 Min.

*Alle Preise zzgl. 19% USt | **Keine Programmierung 

Werbung

Weitere Blogartikel

Bewerbung 6/6

Interesse?

Ich hoffe, die Bewerbung hat Ihnen gefallen. Sollten Sie Interesse an mir haben, würde ich mich über eine Einladung zu einem persönlichen Vorstellungsgespräch natürlich sehr freuen.
Neben den Kontaktmöglichkeiten im Lebenslauf können Sie dazu auch gerne das folgende Formular nutzen:

Einladung Vorstellungsgespräch
Diese Website verwendet Cookies. Wenn Du die Website weiterhin nutzt, gehen wir von Deiner Zustimmung dazu aus.