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)
captcha

Enter the letters from above

(not cAse sEnsiTivE)

[give_form id="114248"]

Give a Shout Out

15 + 11 =

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

Signup For Access To Free WordPress Tips & Resources

Signup For Access To Free WordPress Tips & Resources

Signup for our very occasional newsletter and get access to free downloads, as well as WordPress tips, tricks and resources.

You have Successfully Subscribed!