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 1: This is the default single-column, vertically-oriented form.

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

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.

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.

    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.

    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.

    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.

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

« Form PermissionsDynamic Data Lists »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています