If we are using Divi theme and we want to make contact Form 7 just like the Divi Contact Form. In some cases, the user prefers contact form 7 in comparison with Divi Contact Form but due to the stunning design of Divi Contact form, users don’t change it. And today we will see how we can use contact form 7 and can give it a feel like Divi contact form.
Steps to customize Contact Form 7
If you want to make contact form 7 just like the Divi contact form so you just have to implement some code in your Custom CSS Field in your Divi theme just follow these simple steps.
– first of all Install the contact form 7 plugin.
– Take the shortcode and paste it wherever you want to make the Contact Form.
– Go to Divi >> Theme Option >> Custom CSS Field and paste the code given below in the Custom CSS Field.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.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; } |
The above CSS will change your contact form (produced by contact form 7) just like Divi Form. See in the image below.
Hope this article will help you in making contact form 7 just like Divi contact form. Please let us know if the above CSS creates any problem or any other issue regarding to the contact forms. Feel free to leave your comments in the comment box, Have a Nice Day! Good Luck
You May Also Like
- Tested on Divi version 2.7.8
- Tested on Contact Form 7 Version 4.4.2
Which Divi CSS or theme file has the forms styling tags? I’d like to examine the default styles.
All css is in style.css file
Hi,
How can i have a two fields in a single row?
Best regards.
Hello,
Thanks, question:
How can I modify the file type, or how can I personalize this field in contact form 7 using Divi Theme 3