Walk the line: webform fields can now be displayed horizontally

The new Layout Box component can be used to group and display fields in rows.

If you've ever wished you could display webform fields in a single line, then you're in luck.

A new component has been added to webforms that can group and display fields horizontally. The new Layout Box field can be used to:

Show related input fields in a single line

Example of one select option and two textfields displayed horizontally
Image by Lee-Yan Marquez.

Display Number and Formula fields as line items

Example of three number fields and one formula field displayed horizontally
Image by Lee-Yan Marquez.

Show fieldsets in multiple columns

Example of three fieldsets displayed horizontally
Image by Lee-Yan Marquez.

How do I use it?

It's fairly simple. To show related fields like Salutation, First Name and Last Name in a single line, just add a Layout Box and nest the fields so that they become its children:

Screenshot of webform components: Layout box with nested components
Image by Lee-Yan Marquez.

So that what once looked like this:

Screenshot of webform with fields displayed vertically
Image by Lee-Yan Marquez.

Now looks like this:

Screenshot of webform with fields displayed horizontally
Image by Lee-Yan Marquez.


For detailed instructions and examples on how to use the Layout Box component, check out the IT Knowledge Base article: Webform Layout (a.k.a. Layout Box).


Related content:

Back to top