Form components and specific settings
Beside general settings, each form component has its specific configuration options, which are different between the components. The configurations allow form admin to turn on authorization, and add on new feature for the component fields. And with these configurations, the form admin have the power to customize the form based on the needs of businesses.
Basic form components
Text field
A Text field can be used for short and general text input. There are options to change the widget, define input masks and validations which allow users to mold information into desired formats.
Widget
This option is displayed in the Display tab. The widget is the display UI used to input the value of the field. You can change the widget to Input Field or Calendar Picker
Input Mask
This option is displayed in the Display tab. Define the input mask when you want the end-user to input data following a specific format, such as: Postal codes, SSN, etc. The input mask will affect the value which will be saved. If the Display Mask is not defined, the field format will follow the input mask.
Display Mask
This option is displayed in the Display tab. A display mask helps to display the input in a readable way and will not affect the value which will be saved. If you want to affect both view and saved value, you should only use the Input Mask.
Input Mask Placeholder Char
This option is displayed in the Display tab. This option is only enabled if the Input Mask or the Display Mask is defined. With this option, you can define the character which is used as the placeholder of the field. The character will be displayed following the defined mask.
Allow Multiple Masks
This option is displayed in the Display tab. If you want the end-user to be able to select the input format, you can use this settings. When the Allow Multiple Masks checkbox is ticked, the Input Mask and Display Mask fields are hidden. Meanwhile, the grid field Input Masks for adding the input masks will be displayed and you can add multiple input masks. If the field has this settings, at the view of end-users, it will be a list of the defined masks for them to select the format they want.
Text Case
This option is displayed in the Data tab. It is used to defined the case of the value when the end-user input the data. There are 3 options for text case: Mixed, Uppercase, Lowercase.
Mixed: If this option is selected, the entered values are kept as it is, it can be either lowercase or uppercase.
Uppercase: If this option is selected, the entered values are forced to be changed to uppercase.
Lowercase: If this option is selected, the entered values are forced to be changed to lowercase
Text area
Text area is an input field allowing multiple lines for longer text. Similar to the Text Field component, the Text Area also has the Display Mask option. Besides that, you can also convert the text area to a WYSIWYG editors which is used by the end-user, and configure the image uploads based on the editor.
Following is the specific settings for the component Text area.
Rows
This option is displayed in the Display tab. You can define how many default rows are set in the Text Area with this option.
Display Mask
This option is displayed in the Display tab. Similar to the Text field component above, the Display Mask helps to display the input in a readable way and will not affect the value which will be saved.
Editor
This option is displayed in the Display tab. This option will convert the text area into the selected WYSIWYG Editor user interface. There are 3 provided editors: ACE, CKEditor, and Quill.
Enable image upload
This option is displayed in the Display tab. This option is only enabled and displayed if the selected editor is CKEditor, or Quill. Tick this checkbox if you want to allow the image uploads to the WYSIWYG Editor.
Image Upload Storage
This option is displayed in the Display tab. This option is only enabled and displayed if the checkbox Enable image upload is ticked. With it, you can select one of the provided storages to save the files in.
Image Upload Directory
This option is displayed in the Display tab. This option is only enabled and displayed if the checkbox Enable image upload is ticked. You can enter a directory to place all the uploaded files.
Image Upload Custom request options
This option is displayed in the Display tab. This option is only enabled and displayed if the selected image upload storages is Url. With this option, you can pass your custom xhr options.
Save as
This option is displayed in the Display tab. This option is only enabled and displayed if the selected editor is ACE, or Quill. You can select whether the value should be entered and stored in database as String, JSON, or HTML.
Editor Settings
This option is displayed in the Display tab. Here you can modify the code base of the WYSIWYG Editor to customize the UI specific to your needs.
Auto expand
This option is displayed in the Display tab. This option is only enabled if no WYSIWYG editor is selected. When this option is turned on, the height of the text area field will be expanded automatically according to the number of lines of the entered data. The expansion happens immediately as the user is typing into the field.
Text Case
This option is displayed in the Data tab. It is used to defined the case of the value when the end-user input the data. There are 3 options for text case: Mixed, Uppercase, Lowercase.
Mixed: If this option is selected, the entered values are kept as it is, it can be either lowercase or uppercase.
Uppercase: If this option is selected, the entered values are forced to be changed to uppercase.
Lowercase: If this option is selected, the entered values are forced to be changed to lowercase
Number
Number field can be used whenever a field should be limited to a type of number value. The specific settings of the Number component includes: Use Thousands Separator, Decimal Places, and Require Decimals.
Use Thousands Separator
This option is displayed in the Data tab. Tick this option if you want the value in this component to separate thousands by a local delimiter.
Decimal Places
This option is displayed in the Data tab. This option is to specify maximum number of decimal places for the values in this field.
Require Decimal
This option is displayed in the Data tab. If you tick this option, the decimals are always shown for this field, even if trailing zeros.
Password
Password component is an input field in which the entered value is displayed as hidden input symbols. Similar to the Text Field component, the Password component also has the Display Mask option. Not like Text field component, HTML <input> type of the Password component is password instead of text. The Password component does not have other specific settings.
Check Box
Check Box component can be used for the input field with boolean value. It can either be ticked (true) or unticked (false). You can configure input type for this component.
Shortcut
This option is displayed in the Display tab. You can select a keyboard from the list which is used as the shortcut to tick or untick the checkbox on the rendered form. On the rendered form, to use the shortcut, press the combination of keys: Ctrl + the selected keyboard.
Input Type
This option is displayed in the Display tab. You can select the input type for the field, when you drag and drop the field to the form, the default Input Type is Checkbox, you can change it to Radio.
Radio Key
This option is displayed in the Display tab. The Radio Key setting is only displayed and enabled if the selected Input Type is Radio. You can input the key of the radio that will store data, e.g: maritialStatus.
Radio Value
This option is displayed in the Display tab. The Radio Value setting is only displayed and enabled if the selected Input Type is Radio. You can input the value of the radio key when the checkbox is ticked, e.g: Single.
Select boxes
This component allows you to select one or multiple options in checkbox style format. The specific settings of this component include setting values and value shortcut, min/max validation of checked number and checked error messages.
Data Source Type
This option is displayed in the Data tab. This option is to define whether the type of data source to use for the component is Values or URL. The additional setting options will be displayed according to the selected data source type.
Values
This option is displayed in the Data tab and only enabled if the Data Source Type is Values. You can define the values list of the field, each value will be displayed as a checkbox in the checkboxes list. There are 3 related settings for the value, including: Label, Value, Shortcut.
Label is the front-end identifier for the end-user.
Value is back-end identifier for the option and is what is saved to the database. Only Strings or Numeric values should be set for the Value.
Shortcut is the keyboard to tick or untick the corresponding checkbox of the value on the rendered form. To use the shortcut, press the combination of keys: Ctrl + the selected keyboard.
Data Source URL
This option is displayed in the Data tab and only enabled if the Data Source Type is URL. You can input the URL that returns a JSON array to use as data source.
Request Headers
This option is displayed in the Data tab and only enabled if the Data Source Type is URL. You can set the headers that should be sent along with the request to the url. This setting is useful for authentication.
Value Property
This option is displayed in the Data tab and only enabled if the Data Source Type is URL. You can specify the value that corresponds to the desired property within each object which is set in the Item Template. If the value is not specified, the item itself will be used.
Item Template
This option is displayed in the Data tab and only enabled if the Data Source Type is URL. You can input the HTML template for the result data items.
Formio Authenticate
This option is displayed in the Data tab and only enabled if the Data Source Type is URL. Tick this checkbox if you want to use Formio Authentication with the request.
Disables Storing Request Result in the Cache
This option is displayed in the Data tab and only enabled if the Data Source Type is URL. Tick this checkbox if you don't want the requests and its results to be stored in the cache.
Allow only available values
This option is displayed in the Validation tab. Tick this checkbox if you want the selected value to be validated whether it is available before the submission.
For example, the end-user opens the previous version of the registration form which includes a value of the select box component. This value is no more available in the latest version of the form. When the user selects the unavailable value and submits the form, the validation will be triggered, the submission will be prevented, and the error message of unavailable value will be displayed.
Minimum checked number
This option is displayed in the Validation tab. With this option, you can define the minimum number of must-be-ticked checkbox.
On the rendered form, if the amount of ticked checkbox is smaller than the defined minimum number, the validation will be triggered, and the message for the amount of must-be-ticked checkbox will be displayed, and the end-user cannot submit the form.
Maximum checked number
This option is displayed in the Validation tab. With this option, you can define the maximum number of tick-able checkbox.
On the rendered form, if the amount of ticked checkbox is equal to the defined maximum number, the validation will be triggered, and the remaining unticked checkboxes will be disabled.
Minimum checked error message
This option is displayed in the Validation tab. With this option, you can define the validation message relating the above Minimum checked number setting. If this message is not defined, the default message will be shown.
Select
The Select component displays a list of values in a dropdown list where users can select one or multiple the values. There is also a large offering of settings providing different ways of filtering, querying, and loading data values.
Widget Type
This option is displayed in the Display tab. You can select whether the widget type is ChoiceJS or HTML 5.
Unique Options
This option is displayed in the Display tab. Tick this checkbox if you want the dropdown list only show the unique options and do not display the duplicated ones.
Request Headers
This option is displayed in the Data tab. You can set the headers that should be sent along with the request to the url. This setting is useful for authentication.
Lazy Load Data
This option is displayed in the Data tab. Tick this option to improve the performance if you have many Select dropdowns on your form where the APIs will only fire when the field is activated.
Value Property
This option is displayed in the Data tab. You can specify the property of each item in the data source to use as the select value. If the value is not specified, the item itself will be used.
Search request delay
This option is displayed in the Data tab. You can input the delay in seconds before the search request is sent, measured from the last character input in the search field. The default is set to 0.3.
Item Template
This option is displayed in the Data tab. You can input HTML template that determines how the select options are displayed within the dropdown. You can use the item variable to access the current object in the array.
Filter Query
This option is displayed in the Data tab. You can use this to provide the additional filtering within the dropdown using query parameters.
Sort Query
This option is displayed in the Data tab. You can use this to provide the additional sorting using query parameters.
Limit
This option is displayed in the Data tab. You can input the limit of the number of items to request or view within the select field dropdown.
Refresh Options On
This option is displayed in the Data tab. You can select the field that if its value is changed, the options of the Select field will be refreshed. You can also select Any Change, so that, if it is any change on the form, the options of the Select field will be refreshed. This option is helpful when dealing with dynamic values.
Refresh Options On Blur
This option is displayed in the Data tab. You can select the field that if it is blurred, the options of the Select field will be refreshed. You can also select Any Change, so that, if it is any field on the form is blurred, the options of the Select field will be refreshed.
Clear Value On Refresh Options
This option is displayed in the Data tab. Tick this checkbox if you want to clear any selected value of the Select field when the field is reset by the Refresh Options On setting.
Disable Options Refresh When Scrolling
This option is displayed in the Data tab. Tick this checkbox if you want the options of the Select field will not be refreshed when end-user scrolls through the list of options.
Radio
The radio component allows users to select a single option from a list of options displayed in radio-style format. Users can click a selected option to deselect it, returning the field back to its original state. Following is the specific settings of the radio component.
Options Label Position
This option is displayed in the Display tab. You can select the position of the option label relative to the option bubble.
Data Source Type
This option is displayed in the Data tab. You can select the source to use for the select data. There are 2 data source types, including Values and URL. The additional setting options will be displayed according to the selected data source type.
Values
This option is displayed in the Data tab and only enabled if the Data Source Type is Values. You can define the list of radio options, each value will be displayed as a radio option. There are 3 related settings for the value, including: Label, Value, Shortcut.
Label is the front-end identifier for the end-user.
Value is back-end identifier for the option and is what is saved to the database. Only Strings or Numeric values should be set for the Value.
Shortcut is the keyboard to tick or untick the corresponding checkbox of the value on the rendered form. To use the shortcut, press the combination of keys: Ctrl + the selected keyboard.
Data Source URL
This option is displayed in the Data tab and only enabled if the Data Source Type is URL. You can input the URL that returns a JSON array to use as data source.
Request Headers
This option is displayed in the Data tab and only enabled if the Data Source Type is URL. You can set the headers that should be sent along with the request to the url. This setting is useful for authentication.
Value Property
This option is displayed in the Data tab and only enabled if the Data Source Type is URL. You can specify the value that corresponds to the desired property within each object which is set in the Item Template. If the value is not specified, the item itself will be used.
Item Template
This option is displayed in the Data tab and only enabled if the Data Source Type is URL. You can input the HTML template for the result data items.
Formio Authenticate
This option is displayed in the Data tab and only enabled if the Data Source Type is URL. Tick this checkbox if you want to use Formio Authentication with the request.
Disables Storing Request Result in the Cache
This option is displayed in the Data tab and only enabled if the Data Source Type is URL. Tick this checkbox if you don't want the requests and its results to be stored in the cache.
Storage Type
This option is displayed in the Data tab. If you select a type to store data. If you select a type which is not Autotype, the data will be forced to the selected type.
Advanced form components
The Advanced form components are the extended Basic form components so that it can meet the more complex requirements.
The Email component is a string field. This component has the special validation which ensures the entered data is in a valid email format. A valid email address consists of an email prefix and an email domain, both in acceptable formats. Following is the specific settings of the email component.
Kickbox
This option is displayed in the Validation tab. You can tick the checkbox to enable the Kickbox email validation service.
URL
The URL component is a string field. This component has the special validation which ensures the entered data is in a valid URL format. With this validation, the entered input data will be checked whether it is at least in the correct format to potentially be a legitimate URL. There are no specific settings for this component.
Phone number
The Phone Number component is a string field. The component has a default input mask to force the user to enter the field data in Phone Number format. There are no specific settings for this component.
Date/Time
The Date/Time componen offers many options for validation, date ranges, and calculations using Moment.js. Following is the specific settings of the Date/Time component.
Display in Timezone
This option is displayed in the Display tab. You can select whether the display of captured date time should follow the timezone of viewer, submission, location, or UTC.
Use Locale Settings
This option is displayed in the Display tab. Tick this checkbox if you want to use the Date/Time of your local machine.
Allow Manual Input
This option is displayed in the Display tab. Tick this checkbox if you want to allow the end-user to input the value from the keyboard manually besides selecting date and time from the calendar widget. If the checkbox is unticked, the end-user can only select date and time from the calendar widget.
Format
This option is displayed in the Display tab. You can configure the format that the Date/Time value will be displayed in. If the time input is enabled, the format value must include hh:mm a (for 12-hour time format with AM/PM) or HH:mm (for 24-hour time format).
Enable Date Input
This option is displayed in the Date tab. This checkbox is ticked by default. If this option is enabled, the end-user can select the date from the calendar widget and can input the date from the keyboard (if the option Allow Manual Input is enabled).
Disable specific dates or dates by range
This option is displayed in the Date tab. You can add one or multiple blacklisted dates or date ranges. The end-user cannot input or select the blacklisted date/date range from the calendar widget. You must provide the blacklisted date/date range in the format yyyy-MM-dd or yyyy-MM-dd - yyyy-MM-dd.
Custom Disabled Dates
This option is displayed in the Date tab. When you expand the option,you can write a function with Java scripts to customize the disabled dates in the fieldDisabling dates by a function. The following example is the function of disabling all Sunday.
Disable weekends
This option is displayed in the Date tab. Tick this checkbox if you want the weekends are disabled from inputting and selecting from calendar widget.
Disable weekdays
This option is displayed in the Date tab. Tick this checkbox if you want the weekdays are disabled from inputting and selecting from calendar widget.
Enable Time Input
This option is displayed in the Time tab. This checkbox is ticked by default. If this option is enabled, the end-user can input the time in the calendar widget, or in the input field if the option Allow Manual Input is enabled.
Hour Step Size
This option is displayed in the Time tab. You can provide the number of hours to be incremented/decremented in the time picker. The default hour step size is 1 hour.
Minute Step Size
This option is displayed in the Time tab. You can provide the number of minutes to be incremented/decremented in the time picker. The default minute step size is 1 minute.
12 Hour Time (AM/PM)
This option is displayed in the Time tab. Tick this checkbox if you want the time is displayed in 12-hour time format with AM/PM in the time picker . If the checkbox is unticked, the time will be displayed in 24-hour time format.
When you tick/untick the checkbox but the defined format in the Display tab is inconsistent, the defined format in the Display tab will be updated automatically. For example, if the defined format is dd-mm-yyyy hh:mm a , then you tick this option; after you save the change, the defined format will be updated to dd-mm-yyyy HH:mm automatically.
Default Date
This option is displayed in the Data tab. You can set a default value to a specific date by using the Moment.js function.
Flatpickr options
This option is displayed in the Data tab. You can input the raw JSON to set the options of the Flatpickr library, which is used to create the datepicker widget. For example, you can set the selector type of the month to static or dropdown as the following.
Besides that, you can also use this option to set the translation for the date picker by providing a value to the locale variable. The following example is translating the date picker to Danish.
Use calendar to set minDate
This option is displayed in the Validation tab. This option is a calendar widget, you can set the minimum date (time) by selecting a date from the calendar widget. Once the minimum date (time) was set, the end-user cannot select a date (time) which is earlier than the defined minimum date (time).
This option will be hidden if the Use Input to add moment.js for minDate checkbox is ticked.
Use calendar to set maxDate
This option is displayed in the Validation tab. This option is a calendar widget, you can set the maximum date (time) by selecting a date from the calendar widget. Once the maximum date (time) was set, the end-user cannot select a date (time) which is later than the defined maximum date (time).
This option will be hidden if the Use Input to add moment.js for maxDate checkbox is ticked.
Use Input to add moment.js for minDate
This option is displayed in the Validation tab. Similar to the option Use calendar to set minDate, this option is used to set the minimum date that the end-user can select. The different is that with this option, you can use the Moment.js instead of picking a specific date.
When you tick the checkbox, the input field Minimum Date will be displayed and you can fill the Moment.js function to the field to set the minimum date.
Use Input to add moment.js for maxDate
This option is displayed in the Validation tab. Similar to the option Use calendar to set maxDate, this option is used to set the maximum date that the end-user can select. With this option, instead of picking a specific date, you can use the Moment.js.
When you tick the checkbox, the input field Maximum Date will be displayed and you can fill the Moment.js function to the field to set the maximum date.
Day
The Day component is used to enter values for the Day, Month, and Year using a number or select type of field. Following is the specific settings of the component.
Hide Input Labels
This option is displayed in the Display tab. This option is used to show/hide the input labels like Month, Day, Year. Tick the checkbox if you want the input labels to be hidden.
Maximum Day
This option is displayed in the Validation tab. With this option, you can define the maximum date that the end-user can set. You can input a specific date or use Moment.js.
When the maximum day is set, if the end-user selects a date which is later than the set maximum day, error message will be displayed as following and the end-user cannot submit the form.
Minimum Day
This option is displayed in the Validation tab. With this option, you can define the minimum date that the end-user can set. You can input a specific date or use Moment.js.
When the minimum day is set, if the end-user selects a date which is earlier than the set minimum day, error message will be displayed as following and the end-user cannot submit the form.
Currency
The Currency component should be used when a field needs to display monetary amounts. This component holds a numeric input mask that allows two decimal values and automatically adds commas as a user inputs a currency amount. The specific setting of this component is the selection of currency type which changes the prefix currency symbol as following.
Currency
This option is displayed in the Data tab. It includes a list of currency types and you can select one of them. The prefix of the value will be changed according to the selected currency type.
Survey
The Survey component should be used when you want to display a list of radio button questions. Survey is a great component to utilize when asking multiple questions with the same context of answers or values. With this component, you can configure the questions and the answers within the component settings as following.
Questions
This option is displayed in the Data tab. You can input the questions that you would like to ask in the survey. The question will be displayed vertically in the left-hand column. A question includes 3 parts: Label, Value, Tooltip.
Label is the front-end identifier for the end-user.
Value is back-end identifier for the option and is what is saved to the database.
Tooltip is used as the explanation for the end-user. At the view of the end-user, a question mark icon will be displayed at the right of the question label if the tooltip was filled. And when the end-user hover over the icon, the tooltip value will be displayed.
Values
This option is displayed in the Data tab. You can input the answers for all the added questions above. The answer options will be the same for all questions. Each answer will be displayed as a column with the label at the top, and the radio buttons under the label. All answer columns are displayed horizontally at the right of the question column. The order of the answer columns from left to right are based on the order of the answers from top to bottom in the component setting.
Similar to the question, an answer includes 3 parts: Label, Value, Tooltip.
File
The File component allows form users to upload and download files to a form. Following is the specific settings of this component.
File Types
This option is displayed in the File tab. With this option, you can define a list of file types which is for the end-user to use to classify the uploaded files. For example, the uploaded file can be classified into Public documents, or Private documents.
This option includes 2 parts: Label, and Value.
Label is the front-end identifier for the end-user.
Value is back-end identifier for the option and is what is saved to the database.
At the view of end-user, after uploading a file, the end-user can select a file type from the list of file types in the Type field.
Custom request options
This option is displayed in the File tab. This option allows passing the custom xhr options.
File form-data key
This option is displayed in the File tab. You can input a key name which is used to modify for the file while calling API request.
Directory
This option is displayed in the File tab. You can input a directory to place all the files which are uploaded in the File field.
File Name Template
This option is displayed in the File tab. You can define a template for the name of the uploaded files. Regular template variables are available (data, component, user, value, moment, etc.). The variables fileName and guid are also available. The guid part must be present and will be added automatically if not found in the template.
Display as image(s)
This option is displayed in the File tab. Tick on this checkbox if you want the uploaded files are displayed as images in view of the end-user instead of being displayed as a link. When this option is ticked, the end-user can only upload the image files.
Following is the display of the uploaded images in view of the end-user.
Upload Only
This option is displayed in the File tab. Tick this option if you want the end-user to be able to upload the files only. If this option is ticked, the file name of the uploaded file will be displayed as a plain text instead of a link, and the end-user cannot download the uploaded files.
Following is the example of the File field which disallow downloading
File Pattern
This option is displayed in the File tab. You can define the whitelisted file extensions. Only the file having the extension includes in the list can be uploaded. The file having the extension which is not defined in this field will be unable to be uploaded. Input ***** if you do not want file with any file extension can be uploaded.
File Minimum Size
This option is displayed in the File tab. You can define the minimum size of the uploaded file.
At the view of the end-user, if the uploaded file size is smaller than the minimum size, the file will not be uploaded and error message of too small file size will be displayed.
File Maximum Size
This option is displayed in the File tab. You can define the maximum size of the uploaded file.
At the view of the end-user, if the uploaded file size is greater than the maximum size, the file will not be uploaded and error message of too big file size will be displayed.
Custom component
Read here
Data components
Data Grid
Data Grid component supports to add a group of components on a line item grid. After adding the Data Grid component to the form, you can drag and drop other form components into the grid. Each component will be displayed as a column in the grid. You can also add other data grid components into the grid. It is especially useful in case of needing the ability to add or duplicate multiple field sets.
Here is the example of a Data Grid component which includes other components, and another Data Grid component at the view of end-user:
Following is the specific settings of the Data grid component.
Disable Adding / Removing Rows
This option is displayed in the Display tab. Tick this checkbox if you want to hide the Add Another button, and the Remove Row button.
When this option is turned on, the data grid will include only 1 row, the end-user cannot add new row or remove any row.
Conditional Add Button
This option is displayed in the Display tab. You can define the condition when the Add Another button should be displayed.
Allow Reorder
This option is displayed in the Display tab. Tick this checkbox if you want to allow the end-user to change the order of the rows in the grid.
At the view of the end-user, the Reorder button will be displayed if this option is turned on.
Add Another Text
This option is displayed in the Display tab. This option is used to define the label for the button of adding row in the grid. By default, the button label is Add Another, you can define another label for this button.
Add Another Position
This option is displayed in the Display tab. You can select the position of the button Add Another on the grid. It includes 3 positions: Top, Bottom, Both.
Top: the button will be displayed at the top-right corner of the grid.
Bottom: the button will be displayed at the bottom-left corner of the grid.
Both: 2 buttons will be displayed, one at the top-right corner, and another at the bottom-left corner of the grid.
Following is the example of the display of the Add Another button in the grid in case the selected position is Both
Equal column width
This option is displayed in the Display tab. Tick this checkbox if you want all columns in the grid have the equal width.
Enable Row Groups
This option is displayed in the Display tab. Tick this checkbox if you want to separate the grid into groups of row. When the checkbox is ticked, the field Group will be displayed and you can define the label of the groups, and number of the rows of each group.
If this option is turned on, the buttons Add Another and Removing Row will be disabled automatically, it means the number of rows is fixed, and the end-user cannot add or remove any row.
Initialize Empty
This option is displayed in the Display tab. Tick this checkbox if you want the Data grid is displayed without any rows initially.
