Adding Side By Side Field Functionality To Contact Form 7

Contact Form 7 is one of the most used plugins on WordPress and rightfully so…it is endlessly customizable and the default “plug-and-play” form does the trick for most people. However, say you wanted your field forms to line up side by side and want to define how large of an area each takes up?

I searched through many a blog for the easiest solution to this issue. Sure there are certain CSS customizations you can add but I just wanted a simple bit of code to knock it out.

The Answer: Boostrap Grids

Now I will say…I am a not a Bootstrap expert by any means and I stumbled upon this solution by accident.  However, it works perfectly and is fully responsive so I had to share it with any other bloggers out there struggling with the same issue. If you decide to dig more into Bootstrap grids, head over to W3 schools to learn it all.

Adding Side By Side Customization To Your Contact Form 7

As you know, simply inserting the default shortcode of Contact Form 7 into your post will leave you a full height form which can often extend well beyond where you would like. Below is an example of what I am referring to…

When you start adding multiple fields, the form can quickly grow MASSIVE and require quite a bit of scrolling to complete. If you have a potential client filling out your form and they get distracted, it could be your loss! Below is an example of this same form laid out side by side using Bootstrap Grids.

Here Is How To Do It

The secret lies within the back of Contact Form 7 and surrounding your fields with a bit of code. Do not fear however! It is super easy and can be tested on a private page before moving it to your live website.

Step 1: Head to the Form section of CF7 and insert the following code around each field.

<div class=”col-md-4″>Your field and all that it includes goes in here </div> 

Below is the exact code used for the side by side example above. I have spaced the code out a bit more to make it easier to see.

Step 2: Define the amount of column”area” you want each field to span by changing the “4”

The larger the number, the larger the column! It is that easy. An example below of changing the the “Your Name” and “Your Email” columns to 2 instead of 4.

For another example, check out the contact form on my consultation page. Now there are thousands of designs and angles you could take with these grids, and all may come with unforeseen issues, however I hope this post will help you get started!

Let me know if you run into any issues or have questions.