1. Help Center
  2. Building your form

Changing field styles and layout

Learn how to change the layout and style of the fields throughout your Smart Form.

You can use CSS classes to style fields and change their appearance. You can also use classes to change the field layout. For example, you might want to place fields beside each other or make some fields wider than others.

Open the Style & Layout tab

Click the Style & Layout tab for the field.

fields-style-and-layout

Using custom classes

You can use your own CSS classes to style a field. Just enter the class in the Add a Class box.

Using flex classes

You can use flex classes to change the field layout. By default, a field has a flex-100 setting which means the field will grow to fit 100% of the screen width. This puts each field on a separate line. In the following example, the First Name and Last Name fields have a flex-100 class and are shown on separate lines.

flex-class-100

If you want to place fields beside each other, set their flex classes to less than 100. The flex classes for the fields on the same line must equal 95 or less (5% of the space is used for padding between the fields). In the following example, the flex classes for the First Name and Last Name fields have been changed to flex-45. The fields are now shown beside each other.

flex-class-side-by-side

You can set flex classes for different screen sizes. In the following example, the field width will be 40% if the screen size is greater than medium (flex-gt-md-40), otherwise the field width will be 100% (flex-100).

Tip  Be sure to include a default field width (such as flex-100). This width will be used if the other flex settings don’t match the respondent’s screen size.

flex-class-relative

To change a field’s flex class:

  1. Start typing flex in the Add a Class box, then select a class from the list.
  2. If necessary, click X on the existing class (such as flex-100) to delete it.