Make Your Contact Form 7 Look Like Divi’s

I’m a big fan of the Divi theme, but the out of the box contact form is pretty lackluster. Here are some general limitations:

Requirements:

• Does not connect with Flamingo (storing messages)
• Does not integrate well with ReCaptcha
• Formatting and extended functionality (like image uploading) is limited in comparison to Contact Form 7

So, how do you get around this? Contact Form 7 out of the box looks horrible…So here’s what you do

1. Install Contact Form 7
2. Install Flaimingo (if you want records of your messages and contact’s email addresses)
3. Install Invisible ReCaptcha (CF7 integration is buggy with ReCaptcha and Flamingo) (make sure to set up ReCaptcha keys)
4. Add the code below to your custom CSS file

Source Article

CSS Code

Add this to your custom CSS stylesheet.

.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 {
color: #2EA3F2 !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: 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 {
background-color: #eee;
border-color:#eee;
padding: 6px 20px !important;
}

[/cc]