The Divi contact form looks great, but if you need to add extra fields or input types you need to use a form plugin. One of the stalwarts of the WordPress plugin directory is Contact Form 7 which gets used on tens of thousands of sites.
But the problem is that the styling of contact form 7 forms needs to be added separately to the Divi child theme stylesheet to get the form looking anywhere near as good as Divi’s native contact form.
I hunted around the internet for ages and kept finding different versions of the same solution. The problem was that this solution would style text fields, the recaptcha and the submit button, but none of the other elements.
Hunting a bit further I found various other solutions that covered styling other elements (check boxes, radio buttons) so I have combined these to make a solution for Divi that covers:
- text boxes
- text areas
- recaptcha
- check boxes
- radio buttons
I hope it helps other Divi users.
To use, copy the CSS below into your child theme’s style.css, or add it to the Custom CSS box in the Divi settings.
Important: For the radio buttons and check boxes you also need to “Wrap each item with a label element” when creating your forms so that the controls pick up the styles.
/*---------- contact form 7 styling ----------*/
.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, #taxonomy-picker input[type="submit"] {
color: #ccc ;
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, #taxonomy-picker input[type="submit"]:hover {
color: #1FC8DF ;
background-color: white;
border-color: #1FC8DF;
padding: 6px 20px !important;
}
.wpcf7 input[type=checkbox] {
display: none;
}
.wpcf7 input[type=checkbox] + .wpcf7-list-item-label::before {
border-radius: 0;
}
.wpcf7 input[type=checkbox]:checked + .wpcf7-list-item-label::before {
content: "\2713";
font-size: 30px;
font-weight:600;
color: #666;
text-align: center;
line-height: 26px;
}
.wpcf7-list-item-label {
display: block;
cursor: pointer;
position: relative;
padding-left: 35px;
margin-right: 15px;
font-size: 15px;
}
.wpcf7-list-item-label::before {
content: "";
display: block;
width: 26px;
height: 26px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 0px;
background-color: #eee;
}
input[type=radio] {
display: none;
}
.wpcf7 input[type=radio] + .wpcf7-list-item-label::before {
border-radius: 15px;
}
.wpcf7 input[type=radio]:checked + .wpcf7-list-item-label::before {
content: "\2022";
color: #666;
font-size: 30px;
text-align: center;
line-height: 26px;
}