Home / Wordpress Tutorials / How to add 2 columns in contact form 7
Wordpress Tutorials

How to add 2 columns in contact form 7

Hello friends, Today I am going to show you how to add a 2 columns (more if you want) contact form in WordPress with Contact Form 7 free plugin.

The theme I am using here is Zonic. It’s a free theme with a lot of premium features. Have a try yourself. I am sure you will love it.

OK let’s dive in.

Step 1 – Installing plugin and creating the form

Install free Contact form 7 plugin form WordPress plugin repository and create a basic form with the fields you want. Below you can see what I did.

Install Contact Form & Plugin
Install Contact Form & Plugin
wordpress contact form
Basic form

Step 2 – Adding form to the page

The next step is to add the form to a page. Create the page and add a Shortcode Block(Gutenberg block). Then paste the shortcode which you can copy from the Contact Form 7 form you just created( The text with the squire brackets). This will grab the form and show it on the front-end.

How to add 2 columns in contact form 7
Gutenberg Shortcode Block
How to add 2 columns in contact form 7
Showing the form on the page

Step 3 – how to add 2 columns in contact form 7

OK. So we just added our form to the contact page. But this is not what we are looking for, right? We want two columns. Not just a simple form like this.

Now, let me show you how to add 2 columns in contact form 7. For that part, for making the two columns layout, we are using the responsive grid system created by Graham Miller. (Actuallyt, you can write your own grid system with CSS3. But it is a time-consuming task. And why we have to re-invent the wheel? right. 😉 ). Anyway, so go to responsivegridsystem.com and generate the two columns grid code with Graham’s wonderful calculator.

Go ahead and copy the CSS code. The entire CSS code top and bottom. (You will see there are two CSS snippets and one HTML code). You can paste this in the Dashboard > Appearance > Customize > Additional CSS area or in the child theme’s style.css file. The third way is to use a third-party plugin like Simple Custom CSS and JS. Do it the way you prefer. It’s upto you.

Another thing, Instead of those methods, you can directly paste the code inside a HTML Code Block on the page itself. If you do that don’t forget to paste the CSS code inside <style>…..</style> tags.

Next you want to copy the HTML code and past it in the Contact Form 7 form design window. You will have to create few rows to match with the count of form fields you have in your form. Then cut and paste fields inside the columns. Below is what I did.

Also, you can have just a single row with two columns. Like in the second version. Use the best suit for your form. (I have used the second method in my live demo)

How to add 2 columns in contact form 7
The final form created with the grid system – Version 1
How to add 2 columns in contact form 7
The final form created with the grid system – Version 2

See how it looks on the front-end.

It was an easy task thanks to Graham. right? Use the trick and create something nice yourself. Feel free to ask any question in the comments area. I will try to be responsive as much as I can.

How to add 2 columns in contact form 7
The final form created with the grid system

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *