How to Display Contact Form 7 Fields on 2 or More Columns

I get this question a lot. “How can I display my contact form on 2 or 3 columns?” or “What are my options to have a contact form with fields side by side?” You get it! The main idea is how to get those text fields like Name or Email Address displayed on the same line and not one under another. Why? Because it looks good, therefore it increases the user experience. Let`s see what options you have!

I will take the Contact Form 7 plugin as an example for this tutorial. I’ve been working with Contact Form 7 since ever, and it’s my first choice when it comes to using a free contact form plugin for a WordPress website.

By default, the markup of a contact form created with CF7 looks like this:

and the output on the website would be:

This is the default and you don’t want it. You want custom, tailored to your website’s look and feel. Good news is that the CF7 form builder allows HTML markup and we’ll use this to our advantage.

Next, I`m going to show you 2 ways to display those fields on multiple columns.

[thrive_leads id=’11852′]

Display Contact Form 7 Fields side by side with Column Shortcodes

By default, CF7 allows only HTML markup inside its editor. To use shortcodes, we need to tell WordPress that we want to enable shortcodes for CF7. There`s a plugin for doing it, called Contact Form 7 Shortcode Enabler. To use the plugin, go to Plugins->Add New, search for Contact Form 7 Shortcode Installer, install and activate the plugin.

Alternatively, you could do this by adding a filter via the functions.php of your WordPress child theme:

add_filter( 'wpcf7_form_elements', 'delicious_wpcf7_form_elements' );

function delicious_wpcf7_form_elements( $form ) {
$form = do_shortcode( $form );
return $form;
}

Column Shortcodes is a plugin which adds shortcodes to your WordPress website functionality for displaying content on multiple columns. You can use it not only for splitting contact form fields on single columns but for any other content on your website. That`s two rabbits hit with one shot!

To use the plugin, go to Plugins->Add New, search for Column Shortcodes, install and activate the plugin.

Once installed, you’ll find a new button on your WordPress editor from which you can generate a column shortcode. Let’s put the plugin to the test. I went to my contact page, generated shortcodes for a two-columns line and placed some content inside the shortcodes:

Notice that to create a 2-columns line, you need to generate a shortcode for the first half and another shortcode for the last half. The output should be similar to this:

This is how you split the content of a page on two columns. Now that you got those shortcodes, let`s go back to the Contact Form 7 editor(Wp Dashboard>Contact->Contact Forms: Your contact form) and use them with the fields.

The markup of my contact form becomes:

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>


<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

And the output becomes:

Pretty neat! For having the fields displayed on 3 columns, you will adjust the Contact Form 7 markup to:

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Your Subject
     </label>


<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

…and the output will become:

So the takeaway for this method is:

1. Install Column Shortcodes plugin to enable shortcodes for splitting content on multiple columns
2. Install Contact Form 7 Shortcode Enabler plugin to allow the use of shortcodes in the CF7 editor
3. Wrap Contact Form 7 fields with shortcodes like so
   ...cf7 field ...
   and
   ...cf7 field ...
   .

Display Contact Form 7 fields on columns with HTML markup

Above, I show you how to use plugins to extend WordPress default functionality. The next method is about using default/basic HTML markup(like divs) and a bit of CSS to split content into columns. Let`s do this.

I`m going to create a series of classes for the columns: one-half, one-third, last. The CSS code for them is:

.one-half,
.one-third {
	position: relative;
	margin-right: 4%;
	float: left;
        margin-bottom: 20px;

}

.one-half { width: 48%; }
.one-third { width: 30.66%; }

.last {
	margin-right: 0 !important;
	clear: right;
}

@media only screen and (max-width: 767px) {
	.one-half, .one-third {
		width: 100%;
		margin-right: 0;
	}
}

You should insert this code in your child theme(learn more about child themes here) or you could use a plugin for code injection like the Simple Custom CSS plugin.

The .last class removes the margin-right value from the columns for perfect alignment to the container. Also, a media query specifies that if the screen is smaller than 768px(the width of a tablet screen), display columns one under another. In other words, the code creates responsive columns for Contact Form 7.

Edit the CF7 form and wrap it with divs like <div class="one-half"> ... </div>.

<div class="one-half">
<label> Your Name (required) 
     </label>
</div>

<div class="one-half last">
<label> Your Email (required)
    [email* your-email] </label>
</div>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

The output on the website will become:

Awesome!

To Conclude…

Whether you plan to show contact form fields or any other type of content on columns, solutions do exist. It`s your task to choose which method fits you well and how you`re going to implement it. Also, keep in mind that your current theme might come with all the tools you need.

Feel free to share in the comments below your thoughts and if you have more questions, you can bet that they will get answered! Cheers!