AgentWP

  • Tutorials
  • Themes
  • Plugins
  • Services
  • Contact

How To Make Contact Form 7 To Look Like Divi Contact Form Module

The Divi WordPress Theme From Elegant Themes offers a lot of flexibility in creating any type of website using WordPress. The Divi Builder makes it easy to design and edit the pages without using any code. Divi Theme is also evolving each day as new features are being added to it in each version.

One of the most requested feature in Divi theme is the contact form builder like contact form 7 plugin. The Divi contact form module is great but its not easy to customize and you are stuck with the form fields it has by default. Until a form Builder is added to Divi, the easiest solution is to use contact form 7 plugin.

The default look of a contact form built using the contact form 7 plugin is not very good. To make a form built using contact form 7 to look like Divi contact form module, copy the following code, and paste it in the custom css box in Divi theme options (epanel).

.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;
}

Here’s a side by side comparison of how a form built using contact form 7 looks exactly like Divi contact form module after adding the above code,

contact form 7 divi

Related: If you are not using some other theme from Elegant Themes, then check how you can style contact form 7 to look exactly like Elegant Themes’ contact page template.

Get useful WordPress related tricks, tips, tutorials and reviews delivered straight to your inbox.

StudioPress - Premium Wordpress Themes
ElegantThemes - Premium Wordpress Themes

Copyright © 2023 · AGENTWP · All Rights Reserved

Copyright © 2023 · awp on Genesis Framework · WordPress · Log in