Using the Layout Field

Layout Field is a Basic Feature

Unlock Layout Field and other powerful features to grow your business.

Get WPForms Basic

Would you like more control over the layout of your WordPress forms? The Layout field for WPForms provides a powerful solution for building advanced form layouts that automatically adjust to the users’ screen size.

This tutorial will demonstrate how to use the Layout field in WPForms.

Have we made you happy?

Before you get started, be sure to install and activate WPForms and verify your license. Then, create a new form or edit an existing one to access the form builder.

Adding a Layout Field to Your Form

In the form builder, you’ll find the Layout field located under the Fancy Fields section. Go ahead and click the Layout field or drag and drop it to the preview area to add it to your form.

choose-the-layout-field

Choosing a Column Layout

Once you’ve added a Layout field to your form, it’s time to choose your preferred column layout.

The Layout field features multiple options for arranging your form fields in different columns. To open the Field Options panel and view the available column layouts, click the Layout field in the form preview area.

Select field options

Now you’ll see several available layouts featuring between 2 and 4 columns. By default, the Layout field uses the 2-column layout, which has 2 columns of equal width.

We’ll select the default layout in this tutorial, but the functionality remains the same for all layouts.
Select the 2-column layout

Note: Your form fields won’t display correctly if you previously used the CSS classes option to enable multi-column layout. See our FAQ section for more details.

Switching Layouts

If you’d like to change layouts, even after adding fields to individual columns, simply select any of the available layouts from the Field Options panel.

Change the layout

Columns and their contents will automatically adjust their size and position according to the user’s screen size.

Note: If fewer columns are in the newly selected layout than in the previous, any fields in the last column will be removed from the Layout field and placed in the main body of your form.

Using Multiple Layouts

If you’d like, you can add multiple Layout fields to your form and choose different column configurations for each one.

For example, one Layout field can have 2 columns, and another Layout field can have 3 columns, giving you more flexibility in your form’s appearance.

2-and-3-column-layout

To help you differentiate each Layout field, feel free to add a label to the Label field in the Field Options panel.

Renaming Layout field

Since Layout fields act as containers, they are the perfect solution for grouping items in the form.

Multiple layouts in a single form

Adding Fields to Individual Columns

To add a field to any column, click and drag the field from the sidebar to the target column.

drag-field-to-layout-column

Note: The Layout, Page Break, and Entry Preview fields can’t be added inside a Layout field.

If you’d like fields automatically added to a specific column when clicked, you can mark the column active by clicking the plus (+) icon.

Click the plus icon

This will also open the Add Fields tab in the sidebar and visually mark the column as active. When a column is active, the plus (+) icon will be replaced with an arrow icon. The button’s border color at the bottom of the column will also change.

An active column

Now clicking any field in the sidebar will add it to the active column. To deactivate a column, click on the arrow icon.

Click on the orange arrow icon

Note: Most fields added to the Layout field will default to a large field size, meaning they’ll take up the entire width of the column. However, the Rich Text and Paragraph Text field size is determined by height, defaulting to a medium field size inside the Layout field. For an adjustable height for the Paragraph Text field, refer to our developer documentation.

Removing a Layout Field From Your Form

If you’d like to remove a Layout field from your form, hover over the field and click the trash icon.

click-trash-icon-to-delete

Since deleting a Layout field will also delete all the fields inside it, you’ll see an overlay appear asking you to confirm the deletion. Go ahead and click OK if you agree to delete the Layout field and all fields you’ve added inside it.

click-ok-to-delete-field

Note: You won’t be able to recover any of the fields you added inside the Layout field once they’re deleted.

Previewing Your Form

Once you’ve added fields to the columns inside your Layout field(s), go ahead and save your changes by clicking Save.

Save your form

Then, click the Preview button to open the form preview in a new tab.

Click the preview button

On the preview page, you’ll see a working version of your form. Here you can interact with your form and test out its visual layout. You’ll also be able to test how well your form works on different screen sizes.

A preview of the completed form

Frequently Asked Questions

These are answers to some top questions about creating multi-column form layouts.

Why is the Layout field not showing properly when I preview my form?

If you previously used the CSS classes option to create multi-columns on your form, it will prevent the Layout field from working properly. You’ll need to remove the CSS classes from your form fields before using the Layout field.

For this, open the form builder and click on the field you’d like to edit to open the Field Options panel. Next, navigate to the Advanced tab and remove the multi-column CSS class(es) from the CSS Classes field.

Additional CSS Classes

After removing the CSS classes, be sure to save your changes and preview your form to ensure it looks and works as expected.

Can I display or hide a Layout field based on user selection?

Yes, you can show or hide a Layout Field in your forms depending on the answers provided by your users. This requires implementing conditional logic with custom code.

For step-by-step instructions, please refer to our developer documentation on showing or hiding a Layout Field.

Note: Please be aware that this requires advanced functionality, such as adding code to your site, and is therefore recommended for developers.

That’s it! You now know how to use the Layout field in WPForms.

Next, would you like to know how to show different options in your form based on user interactions? Check out our guide to using conditional logic in WPForms.