Divi comes with a contact form module that has come along way since version one. While it should fit the needs of most, there are times when a more advanced contact form is needed. If you need an easy-to-use drag-n-drop interface with advanced features like file upload, complex conditional logic, and spam blocking look no further than Gravity Forms. I have used this plugin on several websites and it’s hands-down the best contact form plugin for WordPress. It’s not a free plugin, but it’s well worth the cost depending on your needs.

If you’re on a budget but still need more options than Divi’s built-in contact form, you can’t go wrong with Contact Form 7. This plugin has been installed on millions of websites and is well documented. However, it does have a major drawback. It’s not very pretty. Compared to Divi’s contact form and forms created by Gravity Forms, it’s downright ugly. But it’s weakness is also it’s strength. Rather than adding its own CSS style that you have to override, Contact Form 7 provides a blank canvas that you can easily turn into a beautiful contact form. In this tweak, I’m going to show you how to do just that.

You can view the demo here.

Adding style to Contact Form 7

The first thing we’ll do is add style to the form inputs and buttons. For this, I always reference a great tutorial on making Contact Form 7 look like Divi’s contact form from AgentWP. A simple copy and paste into your child theme’s style.css file will do the trick. For this tutorial, I added a border around the form and add the date picker to one of the styles:

You don’t have to use Divi to use the CSS above. It will make the form look nice on any WordPress website. And of course, you can modify it to fit your needs.

Adding a 12 column grid system

Our next step is to wrap the contact form labels and fields into a grid system. For this, I like to use Simple Grid. This is exactly what it sounds like. A simple grid system based on CSS classes, very similar to Bootstrap, that creates all of the column percentages for you so you don’t have to do the math. It’s a big time saver. Download the zip file and copy the contents of the simplegrid.css file into your child theme’s style.css file.

I did make one adjustment to the .grid class near the top of this file to prevent it from overflowing:

I simply removed the max and min width:

The best part about adding this grid system to your stylesheet is that it doesn’t conflict with Divi columns AND you can use it anywhere on your site to add up to 12 columns to any layout. This can come in handy since Divi is limited to 4 columns. Now let’s create our contact form and wrap the fields in the appropriate containers for this grid.

Create a contact form using the grid

The index.html file included in the Simple Grid zip file you downloaded earlier has examples of how to create different column layouts. You can use that as a reference for controlling the column width for each form element. I’ve copied and pasted the contact form I created in my demo below.

If you’ve never used Contact Form 7 before, you’ll see a new menu item, Contact, in WordPress after you’ve activated the plugin. Click on Contact -> Add New. Give your new form a title. Copy and paste the contents of the form I created below into the form section of your new contact form. Click Save and you should now have a shortcode for your new contact form just below the form title. You can add the form to any page by copying and pasting the shortcode into the page.

Voila! If you’ve copied all of the styles into your child theme and copied the form below into your new Contact Form 7 form, you should get the same results as the demo. Tweak to your heart’s content.