Formularfelder anpassen

Wie man Contact Form 7 & Co. an den Divi Style anpasst.

Das ist das Formular-Kontakt-Modul

3 + 3 =

Wie style ich Formuarfelder im Divi-Stil?

Es gibt bereits verschiedene gute Ansätze Formularfelder für das Top-Plugin ContactForm7  und andere Module für Divi anzupassen. Die Links dazu post ich weiter unten. Hier mein Vorschlag. Es sollte eine umfassende Lösung sein. Sowohl für ContactForm7 als auch für andere Plugins, in der Formularfelder zum Einsatz kommen.

 

 

 Code für oberes Beispiel

CSS

form label {
display: none;
}
input[type=text], input[type=password], input[type=tel], input[type=email], input[type=date], input.text, input.title, textarea, select{
background-color: #eee !important;
border: none !important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 14px !important;
color: #999 !important;
padding: 16px !important;
margin: 5px;
-moz-box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
}

input[type=”submit” i] {
font-family: inherit;
display: block;
float: right;
margin: 8px auto 0;
cursor: pointer;
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 6px 20px;
line-height: 1.7em;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
position: relative;
}

Contact Form7

<p>[text* your-name placeholder “Name” ] </p>

<p>[email* your-email placeholder “E-Mail-Adresse” ] </p>

<p>[text your-subject placeholder “Betreff”] </p>

<p>[textarea your-message placeholder “Ihre Nachricht”] </p>

<p>[submit “Senden” class:et_pb_contact_submit ]</p>

Hinweis:

In oberen Beispiel habe ich dem Text-Modul, in dem der Shortcode des Formulars liegt eine ID gegeben : #newContact. Diese dient letztlich nur dazu, den Unterschied zwischen alt und neu darzustellen.

Läßt man die ID weg, bezieht sich der Style auf alle Formular-Felder, es sei den diese werden durch Plugin-CSS-Stile überschrieben.

Divi CSS Styling Contact Form 7