Styling a form and its fields

Styling a form

By default, a Form inherits the full width of its parent. You can customize the styles for a Form, including size, paddings, margins, element placement, and more. To do this, select a Form on the Canvas or the Layers tab and set the desired styles on the Design tab.

For example, you can arrange form fields horizontally. To do this:

• Place the Form fields in a new Div block.

• Set the Flex in the Styles, horizontal direction, alignment, and gap.

Styling the Form elements

Also, you can style all Form elements individually. You can set styles for the entire group, for example, by setting paddings or margins. You can also style the label and the element field individually.

For example, you can change the font of the Form header and field labels, the size and placeholder for input fields, the color and size of a button, and so on.

Styling Input Field

For Input fields, you can replace Field Labels with Placeholder. To do this:

• You must hide the field labels (in the label element settings in the Display section) or remove the label element from the Canvas.

• Set Placeholder in the Input field settings.

Styling Checkboxes, Radio buttons, Select fields

By default, Checkboxes, Radio Buttons, and Select fields have custom styles, i.e. you can set styles for their elements.

In the Form settings, you can enable additional styles options - Apply standard browser styles to Checkbox and Radio Buttons and Apply standard browser styles to Select. In this case, these fields will have browser styles and it will be impossible to customize styles for their states.

Styling Select Field

To style the text inside a select list, you need to apply styles to the Select layer.

Select the Select layer either on the canvas or in the left panel, and configure the styles in the Design panel on the right, under the Text section. You can customize the font, weight, size, color, alignment, and casing (uppercase/lowercase) of the text in the field.

In the Appearance section of the Design panel, you can style the background of the Select field:

1. To style the background of the selected option, use the Fill property.

   If no background is needed for the selected option, click the eye icon next to the color value to hide it.

2. To style the background of the dropdown list, use the Background color property.

If you set both Background color and hide the Fill, the same background color will apply to both the selected option and the dropdown list.

Dropdown styles can only be previewed in Preview mode or after publishing the project.