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.
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.
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.
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.
To change a field’s flex class:
- Start typing flex in the Add a Class box, then select a class from the list.
- If necessary, click X on the existing class (such as flex-100) to delete it.