Die meisten, die das Divi-Theme von Elegantthemes verwenden, nutzen vermutlich das integrierte Kontakt-Modul.
In meinen Anwendungsfällen, kommt meistens Contact Form 7 zum Einsatz oder eben das Ninja Forms Plugin.In beiden Fällen mag ich allerdings die „nackte“ Auslieferung nicht leiden und passe Sie lieber an dem Style des integrieren Divi-Modul an.
Der folgende Code kann einfach in den erweiterten Einstellungen vom DIvi-Theme als benutzerdefiniertes CSS hinzugefügt werden.
Sauberer geht’s noch, wenn vorher ein Child-Theme angelegt wird.
CSS-Anpassungen für Divi Theme
/* START - Divi Ninja Form Styling */
.ninja-forms-form-wrap input, select{
background-color: #eee;
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
font-size: 16px;
color: #999 ;
padding: 16px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.ninja-forms-form-wrap select{
width: 100% !important;
height: 50px !important;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.ninja-forms-required-items {
display: none;
}
textarea.ninja-forms-field{
background-color: #eee;
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
font-size: 16px;
color: #999 ;
padding: 16px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*[id^='nf_submit_'] > .ninja-forms-field {
float: right;
width: 150px;
color: #1e73be !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;
}
*[id^='nf_submit_'] > .ninja-forms-field:hover {
background-color: #eee;
border-color:#eee;
padding: 6px 20px !important;
width: 170px;
}
/* END - Divi Ninja Form Styling */