Styling Form Pages

Let’s face it: nobody likes an ugly, confusing form. Styling your form pages lets you make your forms user friendly. There are two features for styling your forms:

1. Create rows and columns for form fields.

2. Move fields from one location to another.

Sometimes it doesn’t make sense to use the default single-column, vertically-oriented form. For example, a form with many fields can save space by putting them in different columns. You can also use a mixed approach, with each row broken into a different number of columns. The following screenshots show examples of these layouts.

Figure 1: This is the default single-column, vertically-oriented form.

Figure 2: Putting form fields in multiple columns can give you more space.

Figure 3: The first row is in two columns and the second row is in three columns.

By default, dragging a field onto a form page adds a field that occupies an entire row. Follow these steps to resize the field to make room for more fields in the row (columns):

1. Hover over the field to reveal its borders:

   

   Figure 4: Form field borders.

2. Drag the right or left edge of the field to resize it.

   

   Figure 5: After resizing, the field is smaller.

3. Add a new field to the remaining space in the row.

   

   Figure 6: There are now two fields in the row.

You can also move fields. To do so, follow these steps:

1. Hover over the field and the cursor becomes a hand.

2. Drag the field to an open location in the builder. Available locations are highlighted in blue and outlined with a dotted line. A field moved to a new row fills that entire row. A field moved to an existing row fills that row’s remaining space.

   

   Figure 7: You can also move fields on form pages.