Das Divi WordPress Theme von Elegant Themes bieten eine sehr flexible und komfortable Möglichkeit Inhalte jeder Art in anzulegen.
Der Divi-Builder macht es einfach Beiträge und Seiten zu gestallten, Layouts anzulegen und Inhalte ohne Änderungen im Code zu bearbeiten.
Neuerungen werden häufig in Form von neuen Funktionen vom Entwickler bereitgestellt. Eine der Zahlreichen Module ist das Kontakt-Modul. Leider ist das integrierte Kontaktformular im Gegensatz zu dem weit verbreiteten Contact Form 7 längst nicht so umfangreich, weshalb von vielen auf dieses Drittanbieter Plugin ausweichen.
Um das Design von Contact Form 7 dem Design vom Divi-Modul anzupassen können folgende CSS-Änderungen sich als nützlich erweisen
Der nachfolgenden CSS-Code kann dafür in den erweiterten Einstellungen vom Theme eingefügt werden.
Contact Form 7 Style für Divi Theme
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
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;
color: #999 !important;
padding: 16px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7-submit {
color: #2EA3F2 !important;
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;
background: transparent;
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;
}
.wpcf7-submit:hover {
background-color: #eee;
border-color:#eee;
padding: 6px 20px !important;
}