Form elements

In addition to the Form widget, the Elements panel contains individual elements that can be added to a Form — Input, Textarea, Checkbox, Radio, Select, Upload File.

Adding elements in a Form

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:

• drag and drop the required element into a Form from the Elements panel.
• or select a Form (Default State block) on the Canvas or the Layers tab and click on the name of the required element in the Elements panel.

Input field

Input field is used to collect one-line data.

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

• Plain text
• E-mail
• Phone
• Number
• Date

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

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

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

Radio buttons allow 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

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.

File Upload

Upload File widget allows users to upload files via a form.

The widget can be configured to:

• display different states on the site: Default / Error / Success
• specify allowed file types for upload
• set the number of files that can be added to the form

Upload File Widget Settings

To configure the widget settings, select it on the canvas or in the layers panel, then go to Settings tab on the right panel.

• Field name – the title that will be submitted along with the form data.

• File types – choose which types of files are allowed for upload: documents, images, video, audio, or a custom type (you can specify the required file extensions).

• UI state – by switching between “Default”, “Error”, and “Success” states, you can edit the widget’s content and styles.

• Required field – if this checkbox is enabled, the user won’t be able to submit the form without uploading a file. The checkbox is disabled/inactive by default.

• Allow multiple files to upload – you can allow users to upload multiple files. The checkbox is disabled/inactive by default.

Upload File Widget States

You can customize the widget’s content and styles for each state — “Default”, “Error”, and “Success”. To style the widget elements, switch to the desired state, select the desired element, and go to Design tab.

• In the “Default” state, the widget includes Field Label and File Button consisting of an icon and text.

You can edit the text in the widget by clicking on the respective element, and you can also replace the button icon in Design tab.

• In “Error” state, an additional Error Message is displayed.

You can modify the error message text in the settings in Text field.

• In “Success” state, File Upload Button is hidden. Instead, Files List is shown — including the file name, size, and a delete icon.

You can edit texts in the widget by clicking on the corresponding element, and also change the icon in Design tab.

How to View or Download Submitted Files

When a user submits files through a form, they will be available for download in the project settings under Leads → Submissions. To view the received data, click Show Results button next to the form name.

In the window that opens, click on the file name to open or to download it.

Submit Button

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.

Structure of the Form elements

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

• Field Label is a text element with a field name that is displayed on a webpage. You can edit text of a Field Label and also remove a Label from the page.
• Field (name depending on the element) is an element of a Form itself, with which the user interacts.
• Error Message is a message that is displayed when there is an error in a field (for example, if a required field is not filled). The error message can be changed by switching the Form state. For more details, see Fields states.

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

Form elements settings

General settings

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:

• Field name is a header transmitted to the data with the form submission.
• Required field, if set, prohibits the user from submitting a form without filling in this field.

Placeholder

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.

Placeholder text can be configured in the Settings panel under the UI State section.