Contact Form 7 – two columns layout guide

About Contact Form 7

Contact Form 7 stands out as one of the most widely adopted WordPress contact form plugins, celebrated for its user-friendly interface, configurability, and, notably, its free availability. However, when juxtaposed with premium alternatives like Gravity Forms, Contact Form 7 does come with a somewhat restricted set of features. While its simplicity and cost-effectiveness make it a popular choice, users may occasionally find themselves yearning for additional customization options.

In this guide, I will walk you through a straightforward process to elevate the visual appeal and functionality of your Contact Form 7 by seamlessly incorporating a two-column layout. At the top you’ll see a video tutorial, at the bottom you’ll see a written tutorial.

Gravity Forms Black Friday Sale

You might be interested in Gravity Forms, one of my favourite form Builders, which willl be on a huge promotion next week! Apart from working with Contact Form 7 I heavily use Gravity Forms, for which I prepared a lot of tutorials already, that you may read here. Imho, this is a great opportunity to give this software a try!

Video Tutorial

Default Contact Form 7 Layout

The default one-column layout in Contact Form 7 provides a straightforward and vertically aligned structure for displaying form fields. In this layout, each form element, such as name, email, message, etc., is typically presented one below the other, creating a clean and easy-to-follow design.

Contact Form 7 Default Layout

Cloudways Hosting

Have you heard of Cloudways, yet?

Adding Two Columns to Contact Form 7

Contact Form 7 forms are typically constructed using HTML and shortcodes. To implement a two-column layout, we’ll use HTML structure within the form editor.

Step 1: Accessing the Contact Form 7 Editor

1. Navigate to the WordPress admin dashboard.
2. Click on “Contact” in the left-hand menu to access Contact Form 7 forms.
3. Select the form you wish to modify.
4. Add the following HTML markup to your form.

Step 2: Adding custom CSS to your Theme

Place, the following .css code within your theme Customizer -> Additional CSS or use any other different method for custom theme .css.

Step: 3 Save and Preview

After implementing the changes, save your form, and preview it to ensure that the two-column layout is applied successfully. The default contact form undergoes a transformation, presenting an aesthetically refined and structurally enhanced appearance. Here’s a detailed portrayal of how the form evolves:

Contact Form 7 Final Layout

By following this user-friendly guide, you can seamlessly introduce a two-column layout to your Contact Form 7 without delving into complex coding or investing in premium plugins. This simple yet effective customization enhances the visual appeal and organization of your forms, contributing to an improved user experience for your website visitors.

Example

Are you looking for a more robust form solution? If yes, try Gravity Forms 👇