1. Documentation
  2. Working in the Unbounce Builder
  3. Adding Forms in the Builder

Toggling Between Horizontal and Vertical Form Field Layouts

Follow
Avatar
Jordan G.
Last Updated

Switching up your form fields with vertical or horizontal alignment is a cool way to customize designs and optimize the available space.

This can improve how you ask vital questions and create a more pleasant user experience. 

Vertical form with stacked fields versus horizontal form with fields side by side, both containing First Name, Email, and Phone Number.

This article will explain how to toggle between horizontal and vertical form fields for:

  • Classic Builder
  • Popups
  • Sticky Bars

Toggling between Horizontal/Vertical Form Fields in Classic Builder

Follow  the instructions below to toggle between horizontal and vertical form field alignment:

  1. Click on the form you’d like to edit:
    Form editor in Classic Builder showing Email and Coupon fields selected with layout alignment toolbar icons visible.

  2. Click on the Element tab on the right side of your screen and scroll down to the Field Attributes section. Move the Columns slider to match the number of horizontal fields you want. In this example, we’ve selected 2 columns:
    Field Attributes panel in Classic Builder showing Columns slider set to 2 for horizontal layout configuration.

    Note:

    Sticky Bars forms start with horizontal fields by default. Check out the Pro Tip below to change them to vertical form fields.

  3. Drag your form to further customize the appearance of your new horizontal form:
    Form editor showing two fields in a 2-column horizontal layout with Field Attributes panel open on the right.

Pro Tip:

If you wish to revert to a vertical form, simply drag the Columns slider back to “0”.

Related articles