There are many reasons you might want to use the Contact Form 7 Plugin to add a contact form on your site over the Default Contact Form Module found in Divi. Because you get many features in Contact Form 7 and so much more. So that’s why we’ve created a Module for Divi so that you can easily use the CF7 without worrying about Styling stuff.
As Divi doesn’t provide any styling to the Contact Form 7 you’ve to add so many lines of CSS to your site so you can make it look as you want. But that’s something where so many people struggle because they don’t know CSS. So now you don’t need to worry about it because Divi Supreme solves this problem for you.
With our Contact Form 7 Module, you can easily make the Contact Form 7’s Forms look the way you want. Here’s a quick comparison of how it looks before and how it looks after using our module.
Let’s get started
So let’s see how to use our Module to style the Contact Form 7 Forms. First of all, You’ve to make sure that you’ve created a form in Contact Form 7. If you haven’t already you can click on the “Add New” button to add a new form.
Once you’ve created a Form you can now enable the Divi Builder on the page you want to show the Form. And then simply insert the Module where you want to show the Form.
In the content Tab, you’ll need to choose the form you’ve recently created.
Alright, as you’ve now selected the Form, It’s now time to style it simply move to the Design Tab. You can style almost everything of the Form such as Dropdowns, Checkboxes, Radio buttons, and much more.
So now you can open any panel to design the form the way you want. So let’s first design the Fields. Simply open the Input, Textarea & Select panel design it. Here’s what we did.
- Background Color – #fff
- Font – Montserrat
- Font Weight – Semi Bold
- Input/Text color – #000
- Field Rounded Corners – 5px
- Field Border width – 2px
- Field Border Color – #eee
So the fields will now look beautiful.
So now let’s see how to style other elements like Checkbox and Radio. For this open the Radio & Checkbox Panel, so this is where you can change the Font, Color, and more of the Radio and Checkboxes.
- Font – Montserrat
- Font Weight – Semi Bold
- Text color – #000
- Text Size – 15px
Ok so now let’s see how to change the File upload button looks you can make it bigger so it can be seen easily and more. Simply open the File Panel and make your changes. Here’s what we did
- Padding – 15px 15px 20px 20px
- Background Color – #0e00db
- File Font – Montserrat
- Font Weight – Semi Bold
- Text Color – #fff
Okay so now as we’ve styled every element in the Form you can now design the Form Submit/Send button. Simply open the Button Panel and design the button the same way you design a standard Divi Button.
These are the changes that we made:
- Button Alignment – Right
- Use Custom Styles for Button – Yes
- Button Text size – 19px
- Button Text color – #fff
- Button Background – #0e00db
- Button Border width – 0px
- Button Border Radius – 5px
- Button Font – Montserrat
- Button Font weight – Semi Bold
- Button Font Style – Uppercase
- Button Padding – 8px 8px 40px 40px
So that’s it we’ve our Contac Form 7 Form ready to show to visitors that looks way cooler than before. And it didn’t end here You can even style Error/Succes Message, Label, Placeholder text, and more of the Form.
Here’s how it looks.
So that’s it for today’s tutorial and that’s the easiest and most convenient way to style the Contact Form 7 in Divi without going through much coding stuff, Let us know what you think about this in the comment section below. Have a great day!
How to access the Contact Form 7 Module
The Divi Contact Form 7 Module is 100% Free and can be used to create Beautiful Forms with Contact Form 7 for your Divi site. Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.
And also, give Divi Supreme Pro a try today, and don’t forget to share your experience with the Divi Contact Form 7 Module in the comments section below.
Divi Supreme Lite Offers 18 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.
This is much needed as I almost always have excessive spam issues with the default Divi contact form. Contact Form 7 integrates very very easily with Akismet, so this approach seems ideal for Divi sites. Thank you.