With so many contact form plugins now offering visual builders, Contact Form 7, once the king of contact forms, might start looking a little old and dusty, but before you write it off, let me show you how to put your fields into columns and style them to look more like Divi’s own form module.

Why Use Contact Form 7

Although Contact Form 7 might not have a visual builder and take a little more effort to set up, it certainly makes up for it with all the functionality it does offer. Let me highlight a few that make it a winner for me:

  1. You can install a plugin called Flamingo and save all the messages sent with your forms. It’s made by Takayuki Miyoshi, the creator of Contact Form 7 so you can trust it to be perfectly integrated with CF7.
  2. You can track form submissions with Google Analytics. You can link this to your AdWords campaign to track your conversions.
  3. It handles conditional recipients. In other words, you can choose who receives the email based on a selection made by the visitor. 
  4. You can use Google’s reCAPTCHA with it.
  5. With the addition of a free plugin, you can add a MailChimp signup checkbox to your forms.

There’s so much going for Contact Form 7 and best of all, it’s free. Nothing that I’ve mentioned above will cost you anything other than the time it takes you to set it up.

Styling Contact Form 7 to Look Like The Divi Contact Form Module and Adding Columns

Let’s begin by styling CF7 up a bit. The look we’re going for is this:

Step 1: Add the CSS to Style CF7

Add the following CSS to either your child theme or wherever you prefer to put this stuff.

This CSS is a minor variation of the example given on agentwp.com in their article called Making Contact Form 7 to Look Like Divi Contact Form Module. It’s here that you’d change things like colors, fonts sizes and the border radius of the fields and button.

Step 2: Install the Contact Form 7 Shortcode Enabler Plugin

In order to add columns to CF7, we need to be able to use shortcodes (see the next step) but, out of the box, the Contact Form 7 editor does not support them. Fortunately for us though, Tobias Zimpel (TZ Media) has created this nifty little plugin called Contact Form 7 Shortcode Enabler, and just like it says, it allows you to add shortcodes to CF7. So go ahead, download and install this plugin and head on down to step 3.

Step 3: Add Columns Using Divi’s Built In Column Shortcodes

Now that you’re enabled the use of shortcodes in the CF7 editor, it’s time to get to work adding columns to your layout. Fortunately for us, Divi comes with a tonne of predefined shortcodes including shortcodes for columns. You can check out the entire list of shortcodes with examples of their application in the shortcode documentation of the Elegant Themes theme called The Professional. There are cool shortcodes like the Dropcaps shortcode but I’ll leave you to discover them on your own.

For the example form pictured above, I used the following HTML in the CF7 editor (first tab):

You’ll see that in the first line I’ve included the column shortcode together with placeholders. Placeholders place the titles of each field into the field itself rather than above the field. You can obviously choose not to use placeholders and you can also change the number of columns, just refer to the CF7 documentation and the shortcode documentation respectively for more detailed instructions if you need to.

If you’re going to use reCAPTCHA, see the documentation on CF7s website for a hand guide.

Wrapping It Up

And there you have it, a beautiful Contact Form 7 form with columns and it’s responsive at that! So go ahead, install Contact Form 7 and style it up a bit. With 3+ million active installs, you’ll be hard pressed to find a more trusted, stable, and free contact form out there.

Feel free to add a comment below, it’d be great to hear your favorite CF7 feature and implementation.

Photo by Michael D Beckwith on Unsplash