Style Contact Form 7 to Match Divi
While there are plenty of form tools for WordPress, Contact From 7 has endured and advanced through the years, thus becoming the go to tool when one needs custom forms on their site. Divi has its own unique style and don’t we love just dropping in the Contact module for a quick and easy form. But when you need something a little more advanced, something with a stunning array of form fields, and you still want it to match the existing Divi form, then this little CSS code snippet is for you.
I know it’s not perfect and will gladly accept any offers of assistance, code modifications, rants and even raves.
Reveal CSS
/* === [www.divilicious.com Style As CF7 =========================== */
.et_pb_contact p input, .et_pb_contact p textarea { font-family: 'Open Sans', Arial, Helvetica, sans-serif;}
.et_pb_contact p input, .et_pb_contact p textarea{ background-color: rgba(221,221,221,0.4); }
input.wysija-input{
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
background-color: rgba(221,221,221,0.4);
border: none;
width: 100%;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
font-size: 14px;
color: #999;
padding: 16px;
}
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: rgba(221,221,221,0.4) !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: #555 !important;
padding: 16px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div.wpcf7 select {
background-color: rgba(221,221,221,0.4) !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: #555 !important;
padding: 0 !important;
min-height: 48px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
span.wpcf7-checkbox span.wpcf7-list-item { display: block; }
span.wpcf7-radio span.wpcf7-list-item { display: inline; }
input.wpcf7-submit {
color: inherit !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: 0.3em 1em;
float: right;
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;
}
input.wpcf7-submit:hover {
background-color: rgba(0,0,0,0.05);
border: 2px solid transparent;
padding: 0.3em 1em !important;
}
input.wpcf7-submit:after {
font-family: 'ETmodules';
content: "\35";
font-size: 32px;
opacity: 0;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 32px;
line-height: 1em;
position: absolute;
margin-left: -0.5em;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
input.wpcf7-submit:hover:after {
opacity: 1;
display: block;
font-family: 'ETmodules';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
right: 0px;
top: 5px;
margin-left: 0;
}
What's My Home Worth
Find out your current home value.
Error: Contact form not found.
Subscribe for Divi Freebies
Plugin update notifications :: stay abreast of new and or updated items by opting in to my very occasional email newsletter. I swear by all that is right and holy your email address will never be shared, sold, traded or otherwise abused and I seriously doubt you'll see anything more than plugin/code update notifications when they are of the utmost importance.
[mailpoet_form id="1"]