General settings of form component

Display settings

The settings in the Display tab is for modifying the front-end UI of a component.

Following is the general settings in the Display tab of form components.

Label

This option is used to define the name or title of the field. You can also input the text resource key for the label if you want to field label to be displayed in multiple languages.

Label Position

This option is used to define the position for the label of the field. There are 6 options in the list of positions, you can choose an item from the provided list.

Top: the label will be displayed on the top of the component and left-aligned

Left (Left-aligned): the label will be displayed at the left of the component and aligned to the left of the component width span.

Left (Right-aligned): the label will be displayed at the left of the component and aligned to the right of the component width span.

Right (Left-aligned): the label will be displayed at the right of the component and aligned to the left of the component width span.

Right (Right-aligned): the label will be displayed at the right of the component and aligned to the right of the component width span.

Bottom: the label will be displayed below the component and left-aligned.

Label Width

This option is used to define the width of label on line in percentages. By default, the label width is 30%. This option is only enabled if the Label position is Left/Right.

Label Margin

This option is used to define the width of label margin on line in percentages. By default, the label margin width is 3%. This option is only enabled if the Label position is Left/Right.

Placeholder

This option is used to define the placeholder text that will appear when this field is empty.

Description

This option is used to define the description of the field which is displayed below the field. You can style the description content by using HTML.

This option is used to define the tooltip of the field. If the tooltip is defined, a question mark icon will be displayed at the right of the field label in front-end view. When the end-user hovers over the icon, the tooltip content will be displayed. You can style the tooltip content by using HTML.

Prefix

This option is used to define the text which is shown before the input field. For example, using 'DKK' for currency.

Suffix

This option is used to define the text which is shown after the input field. For example, using '%' for percentage.

Custom CSS Class

You can add custom CSS class to apply the styling and formatting to the component. You may add multiple class names separated by a space.

Tab Index

This option is used to define the order of the focused fields when the end-user presses the Tab keyboard. If the tab index is filled, the default tab order of the form will be overridden.

Autocomplete

This option is enabled by default. This option is used to indicate whether the input fields will automatically populate data from values previously entered by the user dictated by the cache of the user's browser. Input the off value inside the setting field to disable.

Hidden

This option is used to hide the field from the rendered form at the view of end-users. However, a hidden field is still a part of the form JSON. You can use it in combination with the dependency rule of visibility and accessibility.

Given the example that the Auxiliary documents field is hidden by default, and is only displayed, enabled, and required if the value of Project duration field is longer than 6 months. In this case, the Hidden checkbox in the configuration of the Auxiliary documents field should be ticked.

Hide Label

Tick this checkbox if you want to hide the label of this component. After the checkbox is ticked, the field label is still displayed in the design mode, and will be hidden on the rendered form at the view of end-users.

Show Word counter

Tick this checkbox if you want to show the count of the filled words while the end-user is typing.

Show characters counter

Tick this checkbox if you want to show the count of the filled characters while the end-user is typing.

Hide Input

Tick this checkbox if you want the input data on the field is displayed with the circle characters like how it is displayed on the password fields. This settings can be used to handle the case of sensitive data, such as Tax ID or SSN.

This option does not encrypt the data on the server. Do not use this setting for Passwords.

Initial Focus

Tick this checkbox if you want the field is focused initially on the rendered form when the form is loaded. Only one component should have the Initial Focus setting enabled. If more than one component on the form has the Initial Focus setting enabled, only the last component in the JSON structure with the setting enabled will be focused on the form.

Allow Spellcheck

Tick this checkbox if you want to enable the real-time spellchecking for input fields on the rendered form. This settings is turned on by default.

Disabled

Tick this checkbox if you want the field is displayed in disabled state on the rendered form. The end-user cannot input data to the disabled field.

Table View

If checked, the input data of the field will be shown in the table view of the submissions list.

Tick this checkbox if you want the end-user to input data for the field in a modal window.

If this option is enabled, on the rendered form, the input field will be replaced with a button.

Then, when the end-user clicks the button, a modal window will be opened to input, or edit the field data.

Data settings

The settings in the Data tab are utilized for configuring end-user input data, determining how it interacts with other field data within the form, and how it is stored on the server, such as setting a default value or configuring data calculations.

Following is the general settings in the Data tab of form components.

Default Value

This option is used to define the default value which will be displayed in the field when the form is rendered. If the end-user does not make any change in the field, the default value data will be saved with the submission.

Input Format

This option is used to force the output of the field to be sanitized in a specific format. There are 3 format options: Plain, HTML, Raw

Persistent

This option is used to determine how the field data will be stored when the form is submitted. There are 3 persistent options: None, Server, Client. The default selected option is Server.

None: The front-End will submit the data to the backend, but the backend will not store the value. This option should be selected in case the client-side logic is needed on the form without the requirement of sending or saving the data to the server.
Server: The Front-End will submit the data to the backend, and the backend will store the value.
Client: The Front-End will not submit the data to the backend, and the backend will not store the value. This option should be selected in case the server needs to intercept data for workflows such as logic or calculations, but there is no need or desire for the data to be stored.

Protected

This option is used to prevent the field data from being queried from an API call. Tick this checkbox if an extra layer of protection is needed for sensitive data.

Database Index

Tick this checkbox if you want to set this field as an index within database. It is used to increase the performance for submission queries.

Truncate Multiple Spaces

Tick this checkbox if you want to remove the unnecessary spaces between words or characters within the field.

Redraw On

This option is used to refresh the component when a specific changes occurs on the rendered form. This option includes a dropdown list of fields added in the form, you can select a field from the dropdown list; then, when it is a change on the selected field, the component will be refreshed. If you select the option Any change in the list, the component will be refreshed when it is any change occurs on the rendered form.

Clear Value When Hidden

This option is used to clear the entered field value when the field is hidden. By default, this settings is on. Untick the checkbox if you want the field value to be retained and subsequently re-displayed when using conditional logic.

Custom Default Value

With this option, you cab write custom Javascript or JSON Logic to set the default value of the field.

Calculated Value

With this option, you can write custom Javascript or JSON logic to set up calculation logic on the field.

Calculate Value On Server

This option is used to run the calculations on the server side. If you want to override the values submitted on the back-end with the calculations performed on the server, this setting is beneficial.

Allow Manual Override of Calculated Value

By default, the end-user cannot input any value to the field having the set calculations. Tick this option if you want the end-user to be able to input data to override the calculated value in the field.

Validation settings

The settings in the Validation tab relate directly to the configurable Front-End and Back-End validations for the field, such as required fields, unique data, min/max requirements, custom validations, and custom error messages.

Following is the general settings in the Validation tab of form components.

Validate On

This option is used to determine when the front-end validation of this component should be triggered. There are 2 options: Blur, Change.

Blur: The validation will be triggered when the field is no longer focused. This option is useful for the case that the field requires a certain format, so that the validation will only be triggered when the end-user has completed the data input, for example: email, phone number.
Change: The validation will be triggered whenever it is a change in the field.

Required

Tick this checkbox if you want to show a red asterisk at the right of the field label, and force the end-user to input data for the field before submitting the form. If the end-user submits the form without filling data for the required field, an error message will be displayed and the form cannot be submitted.

Unique

Tick this checkbox if you want to disallow submitting the same value for the field multiple times. For example: Apply this validation to the Email field of a registration form, so that an email address cannot be submitted twice.

When this setting is on, on the rendered form, if the end-user submits the form with the duplicated value of the field, the submission will be prevented and the error message of duplicated value will be displayed.

Minimum Length

This option is used to define the minimum number of characters of the input data. If the end-user input the data which is less than the minimum length, the error message of minimum number of characters will be displayed.

Maximum Length

This option is used to define the maximum number of characters of the input data. If the end-user input the data which is greater than the maximum length, the error message of maximum number of characters will be displayed.

Minimum Word Length

This option is used to define the minimum number of words of the input data. If the end-user input the data which is less than the minimum word length, the error message of minimum number of words will be displayed.

Maximum Word Length

This option is used to define the maximum number of words of the input data. If the end-user input the data which is greater than the maximum word length, the error message of maximum number of words will be displayed.

Regular Expression Pattern

With this option, you can define a Regex pattern (or filter) that details a set of strings that must match the pattern. Following is the example of the email address pattern

On the rendered form, if the end-user inputs the data which does not match the defined pattern, error message of not matched pattern will be displayed as following.

And the validation is passed if the entered data matches the defined pattern

Error Label

With this option, you can define the field label which is shown in the error message when the validation is triggered. This option is useful for the case that the field label is too long and you want to shorten the error message.

Following is the display of the defined error label in error message on the rendered form:

Custom Error Message

With this option, you can define a common error message which is used for all validations.

On the rendered form, when any validation is triggered, the common error message is displayed instead of the error message related to the validation.

Following are the examples for the display of common error message for the validation of not matching Regex pattern,

and the validation of required field:

Custom Validation

With this option, you can write Javascript to set up your own validation rules for the field.

Secret Validation: Tick this checkbox if you want the custom validation logic is performed only on the server side. This option keeps your validation logic private and secret.

JSONLogic Validation

With this option, you can write JSON logic to set up your own validation rules for the field.

Custom Errors

With this option, you can define different custom error messages for multiple errors, meanwhile the Custom Error Message setting only allows you to set one error message for all errors.

API settings

The settings in the API Tab contain Back-End settings such as the Property Name of the field as well as custom properties that can be set such as HTML and Tags.

Conditional and Logic settings

The settings in the Conditional tab, and Logic tab is for the creation of intelligent workflows using Conditions and Logic system of Form.io, such as show or hide the fields, merge component JSON schema, conditionally set field settings, and more, all based on user interaction on the form.