Create Responsive Multi-column Contact form 7

Contact form 7, is the most popular WordPress contact form plugin around. with 1+ million active installations, regular updates, secure and robust code, Contact form 7 or what we call CF7 became an indispensable add-on for every website owner and developer.

In this article I will show you how to create a stunning contact form using CF7.

Why do we need a multi column Contact form 7?

The default form that you see when you activate the CF7 plugin, is really simple and usually doesn’t look great, and this is why, most of websites owners try to adjust it to make it look great.

Another reason to create multi column Contact form, is to minimize the form height, and improve the user experience. Imagine you have 12 fields form, it won’t be good to make your visitors scroll all the way to the bottom of the page just to fill in all the fields, instead, we create a 2 columns form, which will be half height of the original form.

How to Display Contact Form 7 Fields on 2 Columns?

First, we will need to create a new contact form and we can create 6 fields, Name, Email, Phone, Subject, Message and of course the submit button.

Here is the HTML code for our demo form wrapped with the proper HTML classes:

And this is how my form looks before adding the CSS code.

White this might look different from one person to another due to different themes styling, but overall it will have the same structure.

Here is the CSS code that I created for this form.

And here is our form after adding the CSS code above:

Notice the code below, you can use 100% of width instead of 50% when you have a full page width.

Now, we will need to style the form once more, so it looks Sharpe and responsive.

and here is the final result:

You May Also Like

About the Author: Editorial Staff


Leave a Reply

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