In Visual Form Builder, you can now customize the layout for the fields in your form by using the Field Layout option.  This is an easy way to tweak and control the look and feel of your form without having to write a bunch of new CSS.  Today, I’m going to go over how to use this powerful new feature.

Where is the Field Layout option?

All fields except for Fieldsets, Sections, and Instructions will include a Field Layout dropdown, seen below.

Field Layout option

Default Layout – Single Column

By default, all fields will be arranged in a single column.  If you have a particularly long form, or just want to change up the look to make your style, this may not be an ideal layout.

Default field layout

Left/Right Half – Two Column

To achieve a two column look, we will need to assign the Field Layout options as either Left Half or Right Half, depending on where you want that field to go.  On my example form, I change the Name item’s Field Layout to be Left Half and the Email item’s (which is arranged directly beneath Name) Field Layout to be Right Half.

It’s important that the two fields are next to each other in the form builder in order to achieve the correct look.

Left/Right Half field layout

Left/Middle/Right Third – Three Column

We can arrange even more fields on a single line using the Left, Middle, and Right Third option.  On my example form, I have three fields I want placed in one line: Start Date, End Date, and Number.  Start Date will be Left Third, End Date will be Middle Third, and Number will be Right Third.

It’s important that the three fields are next to each other in the form builder in order to achieve the correct look.

Left/Middle/Right Third field layout

Left/Right Two Thirds – Mixed columns

The last option allows us to stretch one field across two thirds of the form.  This is useful when you have one field that needs to be longer than the other on the same line.  The way we achieve this is by combining a Left/Right Two Third with a Left/Right Third.  On my example form, I will assign the URL as Left Two Third and Phone as Right Third.

It’s important that the two fields are next to each other in the form builder in order to achieve the correct look.

Left/Right Two Thirds field layout

If you wish to have the larger field on the right, simply use a Left Third with a Right Two Third.

Final Result

As you can see, our final result is a much smaller footprint for this form.

Customized fields using the Field Layout option

If you have any questions, please let me know!