Divi, as you may know, has a built in contact form which is simple and awesome.

However, from time to time you need more fields (say, Phone Number), and Contact Form 7 is pretty much the de facto standard in doing just this when using WordPress.

So I wanted to have the look/feel of Divi with CF7.

Here is the How to:

And the css used:

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea
{
 background-color: #eee;
 border: none;
 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-captchar {
 background-color: #fff !important;
 border: 1px solid !important;
 padding: 12px !important;
}
.wpcf7-submit {
 background-origin: padding-box;
 background-size: auto;
 background: transparent !important;
 color: #3a2719;
 border: 2px solid;
 font-size:20px;
 padding: 6px 20px;
 line-height:1.7em;
 border-radius: 2px;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 -khtml-border-radius: 2px;
 height: 50px ! important;
 width: 102px;
 -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 {
 background: #3a2719 !important;
 color:#eee;
 border: 2px solid transparent;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 -moz-transition: all 0.2s;
 -webkit-transition: all 0.2s;
 transition: all 0.2s;
}

Build Beautiful.

Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.

Share This