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
<code>

/* === [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;
}
</code>
t

What's My Home Worth

Find out your current home value.

Your Moving Budget

$

Preferred Method of Contact

I am moving:

What day is your birthday?

Captcha (Spam Prevention)
To use CAPTCHA, you need Really Simple CAPTCHA plugin installed.

Enter the letters from above

(not cAse sEnsiTivE)

Tip Jar

Send a Gratuity

Your generosity is greatly appreciated 🙂


Credit Cards


Loading...

Give a Shout Out

10 + 8 =

mailbox email subscribe

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.

 

Pin It on Pinterest