How to Set Multiple Column Fields in CF7 Styler Module?

We often need to set multiple form fields in columns, while designing a form. This is where we need to write some custom CSS code to design the form. With the Contact Form 7 Styler module, it is very easy to display fields in multiple columns by using predefined column classes listed below. You just need to add Custom CSS Class as required in the CF7 wrapper shortcode. Please take a look at the screenshot below.

You can add a class to the wrapper of the div as shown below.

One Column Display

uabb-cf7-col-1

Two Column Display

uabb-cf7-col-2

Three Column Display

uabb-cf7-col-3

Four Column Display

uabb-cf7-col-4

Five Column Display

uabb-cf7-col-5

Six Column Display

uabb-cf7-col-6

Not the solution you are looking for? Check other articles, or open a support ticket.