Form



Form widget is used to create forms that are an important part of many websites. This can be registrations forms, feedback forms, order forms, and so on.



Form structurally contains three child elements: 

These elements display three possible states of a Form. When a Form is created, it has Default state. This state is used to make major changes in a Form, e.g. add and remove elements, set it styles.

To control a Form in Success or Error state, you need to switch it in the Settings. For more details, see Form and fields states.

When created, a Form contains the following elements: 



In addition to the Form widget, the Elements panel contains individual elements that can be added to a Form.



Input field is used to collect one-line data.

You can use an input field to enter multiple types of data:

You can select the required data type in the Settings in the right panel in the Type field.

Phone data type assumes an additional setting, Field mask, which allows you to select a template for entering a phone number for different countries. 

After selecting a country, the corresponding template appears in the field.

Setting the data type for the Input field allows the user to enter data of the selected type. In the case of incorrect data type, an error will be displayed.  



Text Area allows the user to enter multi-line data, such as lengthy messages. It is commonly used to enter comments, reviews, and other long text.



Checkbox is an element that can be used by the user to answer closed (Yes/No) questions. Best used when the user may or may not agree to some condition.

Checkbox allows you to make single- or multiple-choice selections. You can add options in the Settings by clicking on the + button in the List Items section.

You can also delete an option by clicking on -, or swap options by dragging the icon to the left of the name.

You can click on the desired name and enter a new one to change the name of an option.



Radio buttons allows the user to select one out of multiple options.

Just like for Checkboxes, you can add options for Radio Buttons in the Settings.



Select field is a drop-down list that allows to select one or several list items. 

By default, there are three options in the select list. You can edit options in the Settings by adding, removing, swapping, and renaming them.

By default, the user can only select one item from the list. To select several items at a time, you need to enable Allow multiple selection option. In this case, the user will be able to select multiple options from the list using Shift or Ctrl.



When clicking the Submit button, all the data entered by the user are sent to the website owner.

Every created Form has the Submit button by default.  



You can add any element in a Form, such as an Input field or a Checkbox, to customize the desired functions. 

Also, if necessary, you can add ordinary elements or widgets to a Form, for example, a Text with a description or a Div Block for grouping the elements.

To add an element to a Form:



Each form element (except the Submit button) is a group of elements with the following structure:

For example, the structure of the Input Group looks like this:



On the Settings tab in the right panel, you can view the options for each element of a Form. These options will vary depending on the element type. For example, an Input field has the Type option and a Checkbox, Radio Buttons and a Select field has the List item option.

All Form fields (except the Submit button) have two parameters:



Input field and Text Area elements additionally have the Placeholder setting. This setting is used to display a default text that disappears when the user starts typing in a field. This can be a field name or a sample text.



In the Form Settings you can switch the Form state and the Fields state:



By switching the Form States in the Settings, you can see on the Canvas what a Form looks like in this particular state



To edit the success message for a form:

To edit the error message for a form:



A form field has two states:

To edit the error message for a field:



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 Styles tab. 

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



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.

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



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.



To style placeholder:

For example, you can change the font size or placeholder color.