Understand and manage the Form Input Fields
Text Field
A Text Field can be used for short and general text input. There are options to define input masks and validations, allowing users to mold information into desired formats.
Widget: You can change widget. The widget is the display UI used to input the value of the field.
Text Area
A Text Area has the same options as the Text Field form component. The difference is that it will be a multi-line input field that allows for longer text. The Text Area can also be utilized as ACE, CKEditor or Quill WYSIWYG editor for the end user which is configured within the component settings.
Rows: This allows control over how many rows are visible in the Text Area.
Editor: This option will turn the text area into the WYSIWYG Editor user interface of your choice.
Editor Settings: Here you can modify the code base of the WYSIWYG Editor to customize the UI specific to your needs.
Number
Number fields can be used whenever a field should be limited to a type of number value. There are options to set Thousands Separator, set Decimal Places and Require Decimals.
Use Thousands Separator: Check this setting if you would like the value in this component to separate thousands by local delimiter.
Decimal Places: The maximum number of decimal places for the values in this field.
Require Decimals: Always show decimals for this field, even if trailing zeros.
The email component is nearly identical to the text field component. The Email component has a custom validation setting that, if set up correctly, can ensure the value entered is a valid email address. The email component can also more easily be integrate into a form’s email action. Use this component when you want an email address field for your form.
Check Box
A check box can be used for boolean value input field. It can either be on or off. There are options to set Shortcut and Input Type.
Shortcut: Shortcut can be added to check/uncheck checkbox.
Input Type: Input type can be changed to checkbox or radio.
Password
The password field has the same options as a text field component. It differs from a text field in that its html
<input> type will be password instead of text. This will cause the field to display asterisks instead of the value entered.
Select Boxes
The Select Boxes allows the user to check multiple values from list of options.
Values: These are the values that will be selected on this field. The Value column is what will be stored in the database and the Label is what is shown to the users.
Inline Layout: If checked, this field will layout the checkboxes horizontally instead of vertically.
Radio
The Radio allows the user to check only one value from list of options.
Values: These are the values that will be selected on this field. The Value column is what will be stored in the database and the Label is what is shown to the users.
Inline Layout: If checked, this field will layout the radio buttons horizontally instead of vertically.
Button
Buttons can be added to perform various actions within the form.
Action: This is the action that will be performed. Currently there are the next actions that can be performed – Submit, Save in State, Event, Custom, Reset, OAuth and POST to URL.
Submit: A submit action submits the form to either the form.io server or a custom callback url that has been priorly set up.
Reset: Reset the form fields back to their original state.
OAuth: Opens an OAuth authentication popup. This will only work after it has been assigned to an OAuth Action. See the OAuth guide for more information on how to set up OAuth in your project.
Theme: Set a theme (color) for the button. These options currently map to Bootstrap classes that will be added to the button.
Size: Set the size of the button. These options currently map to Bootstrap classes that will be added to the button.
Left Icon: If you have an icon library and would like to include an icon to the left of the button label, you can do so by adding the icon class here.
Right Icon: If you have an icon library and would like to include an icon to the right of the button label, you can do so by adding the icon class here.
Block: If checked, the display of the button will be set to “block” which will cause it to span the full width of the container.
Disable on Form Invalid: If checked, this button will be disabled if any of the client side validation fails. This is useful for preventing the submission of a form that has invalid data entered.
Select
The Select displays a list of values in a dropdown list to users. Users can select one of the values.
Widget Type: You can select the type of widget you would like to use.
Data Source Type: Select the type of data the options will be pulled from.
Values: These are the values that will be selected on this field. You should fill Data Source Values. The Value column is what will be stored in the database and the Label is what is shown to the users.
Raw JSON: Enter a JSON Array into Data Source Raw JSON to use. It should be formatted as an array of objects with named properties.
URL: Enter a url with a data source in JSON Array format. This can be used to populate a Select list with external JSON values. For example, suppose you wish to populate your Select dropdown with a list of all States of the U.S. You can use an external JSON array like the following.
1
https://cdn.rawgit.com/mshafrir/2646763/raw/states_titlecase.json
Copied!
Place that in Data Source URL. Then you will need to provide the Value Property as well as change the Item Template so that it will pull the right value as well as display correctly within the dropdown. The following image shows how the configuration would look like for this particular setup.
This will now turn your select dropdown into a list of available States of the U.S.
Value Property: If Raw JSON, URL or Custom is selected as Data Source Type, enter the name of the property for the objects that will contain the value that will be stored in the database. If it is not specified, the item itself will be used.
Search Query Name: If URL or Resourse is selected as Data Source Type, enter the name of the search query parameter to filter requests with. Example, if your url is
http://api.dogs.com/dogs, and Search Query Name is set to type, and then user types nice in the Select field, then this component will send a request to http://api.dogs.com/dogs?type=nice and update the Select items with the results. If this option is omitted, no new requests will be made when user enters text in the select field.Item Template: Use the template field to determine how the values will be displayed in the Select dropdown. You can use the item variable to access the current object in the array. For example, you can embed the value by using
{{ item.value }} in a template.Dynamic Select Filtering
A very common use case that many people have in forms is to dynamically filter a Select dropdown based on the selection of another Select dropdown. The most typical use case is a form that provides the Make, Model and Year of vehicles where when you select the Make dropdown, it filters the Model dropdown for those that are inside that Make. This functionality is covered in detail in our user guide resources section.
Conditional Components
The conditional component requires an API key to be configured to function correctly.
Any form component can use conditional logic to determine when to hide or display itself. The settings for a conditional field, are configured on the component itself, and can be found by viewing the Conditional tab within the components settings.
The conditional logic is based on the following rules:
-
Each field can hide or display
-
The visibility is dependent on another component defined within the form.
-
The logic is activated when the configured field contains the plaintext value defined in the settings.
In addition to Simple Conditional logic, you can also use Advanced Conditional logic, which uses actual JavaScript for any combination of conditions.
JavaScript conditional logic requires you to set the value of show to either true or false. You have access to the current value of any form component via the data object, and the components API key. Advanced Conditional logic will only work, if Simple Conditional logic isn’t already defined.
When using Advanced Conditional logic with the select boxes form component, you must use the following syntax to get the value of the select box, which will always be true or false, depending on if it is checked or not: data.selectbox_component.selectbox_value
