How to Add Multi-Column Classes to Post Forms

With the free version of the WP User Frontend, users can rearrange form fields column-wise for better appearance and user experience. This applies to both platforms and registration forms.

To do this, open an existing Post Form or create a new one.

For 2 columns

Click the Edit option on the first field that you want to put side by side in 2 columns.

In this case, we want to put the title and content fields together in two columns.

Click on Advanced Options.

Then, under the first field's CSS class name (like title), type the following container class name: wpuf-col-half

In the second field's CSS Class Name (like Content), type the following: wpuf-col-half-last

For 3 columns

Click on Advanced Options>CSS Class Name for the fields you want to put side by side in 3 columns.

In this case, we're putting Email, URL and Image Upload fields together side by side.

For the first two fields (like email and URL), type the following CSS class name: wpuf-col-one-third

For the last field (like Image Upload), type the following: wpuf-col-one-third-last

The combination of fields could be different types, like Text, Text Area, Names, Email Address, URL, Radio, Drop-downs, and any other.

As you type these class names, you'll view the changes in real time in the form builder. You can also view the published version using the Preview option located on the top-right of the form.

Frontend View

Publish your form in the normal way you do. Then view it from the front end. You will now see the fields of your form arranged in this manner.