Learn about the Form component: its characteristics, options and the inputs you can add to it.
After reading this article, you’ll know:
-
What the Form component is and what kind of inputs can be added
-
Important options and uses of the Form and its input components
Form components serve to gather input from users and submit it to the action(s) connected to the form. In other words, by employing Form components, one can create web pages with input fields connected to a data model.
When dragging a Form component onto your canvas, a configuration menu appears that allows you to create the form based on a data model, or without.
When creating a form based on a data model, you have the option to select the properties from a model you would like to gather from your users, these properties will then automatically be generated in the model action as input variables.
When generating a form that isn’t based on a model, you are asked to choose a name for the action generated with the form and can do so without any data connected to the form whatsoever.
A standard Form component comes with a Submit button and two Alert components. The Submit button is connected to all the input fields you drag into the form and when connected correctly, will submit all the data you are asking from your users, via the form.
The Alert components generated with the Form component, trigger based on the action result and the pre-build interactions with the form. Be careful: changing these alerts might not work as expected.
If the action submits the data successfully, the green success alert shows, and on an error, the red alert with the corresponding message will show.
What are input components?
Input components work together with Forms to collect information based on user input. Think about the various logins you have to do daily! The fields you type your username, email address, or password in, are all input fields.
A best practice is to use an input field with the same type as the data you want to collect; are you asking for a username with an email address? Use the Email input component. Is the username a short name? Use the Text field input component.
When generating a form based on a model, input components based on the property type of the selected model property, will automatically be generated.
As seen in the example, when a Text input and Email field properties from the Webuser model are selected in the configuration wizard of the form.
Besides the two input fields shown in the example, we offer a variety of input components, corresponding to the data you would like to collect and can save in your application.
Action step synchronization
When updating a form input, your action step may be automatically updated if the 'action synchronisation feature' is turned on. If you would like to enable action synchronization yourself, look into this article for more info.
Form & input options
Form component
Tables can't be imported directly. Please insert an image of your table which can be found here.
Options
-
Reconfigure
Allows you to re-order the items in the form, and delete input fields from your form. When deleted this way, the input is also deleted from the form action.
-
Action
Navigate to the action the form is submitting its use input to
-
Model
The model that this form is based on is a record that is being loaded in the context of the form.
-
Filter
Configure the filter based on the selected model of the model option.
Default interactions
-
onActionLoad
This event is triggered when the action is processing the submitted data of the end-user. -
onActionSuccess
This event is triggered when the action flow is executed successfully. -
onActionError
This event is triggered when there is an error within the action flow. This specific event also passes the error messages so that they can be displayed within the alert component. -
onActionDone
This event is triggered when the action flow is executed.
Input component options
Input components are used to ask your application user for information, the kind of input component you want to use depends on the kind of information you need.
Within the input fields, you can also change the formatting you would like the user to provide you the information with, think of asking for a date in DD/MM or MM/DD. For more information on formatting, we have created this formatting reference guide.
Common options
Because most input components share the same (or highly similar) option items, let's cover them beforehand. That will leave us more space for explaining some unique features of each input component.
Property
This is the property selected in either the form or input configuration. It is used to connect the component and the action input variable.
Label
Configure the label of the input component to give context to the end user what it is intended for.
Value
Configure the input component to give it a default value or base it on a dynamic property.
Autocomplete / Disabled
When the Autocomplete option is enabled, the browser of an end user will show autocomplete suggestions. The Disabled option sets the input to its disabled state. It prevents the values of this input from being submitted and an end-user from filling in any values.
Placeholder
Show the Placeholder within the input component to demonstrate the format/example of how the input text has to look.
Helper text
Adds text below the input to give an end user more information. When there are validation messages, this text will be replaced to display them.
Margin
Configure the spacing around the input component.
Size
The default sizing is available for the input component.
Place label above input
Toggle the 'Place label above input' option to display the input label on top of its main field.
Full width
When enabled, the width of the input will be based on the width of his direct parent container component.
Variant
Select the pre-defined styling variants for the input.
Icon
Displays an icon inside the input component to give context to an end user.
Validation options
Validation is key to ensuring that data input aligns with specific rules and conditions. The platform provides a set of validation options that help developers control the type and quality of data entered by users. Below is a brief explanation of the most common validation options for input components.
Required / Value required message
Ensures a field must be filled before proceeding. Essential for mandatory inputs like names, email, passwords, etc.
Validation pattern
A regex-based rule that enforces specific input formats (e.g., emails or phone numbers).
Pattern mismatch message
Displays 'Invalid value' message by default when input doesn’t match the pattern, but can be customized (also using variables).
Min length / Max length
Ensures input meets a minimum character length, useful for fields like passwords.
Value too short / Value too long messages
Shows “This value is too short” by default if the input is below the minimum length.
Displays “This value is too long” if the input exceeds the character limit.
Styling options
Styling options are used to customize the appearance of input components. These include settings like hiding the label, adjusting background and border colors (with hover effects), as well as setting labels and text colors, error messages, etc. to match your design needs. For more detailed guidance, refer to the Styling best practices and Color use articles.
Advanced options
Interaction (change) delay allows you to set a delay (in milliseconds) before an action is triggered after user input. Another feature is the Test attribute, which lets you add a custom data attribute to components, making it easier to identify and interact with them in testing tools, for metric gathering, or applying custom CSS.
Input components overview
Text
Text component enables end users of an application to fill in the text in the input. In the context of the form, this input can be submitted to the action where it can fulfill multiple use cases. Text (single-line) property works well with this input field.
Multi-line text
Multi-line text field component enables end users of the application to fill in multiple lines of text in the input. In the context of the form, this input can be submitted to the action where it can fulfill multiple use cases. Text (multi-line) property works well with this input field
See the unique options for this component:
-
Multiline
This option toggles whether the input has multiple rows or not.
-
Rows
This option specifies the number of rows in the text area.
Number
Number input enables end users of the application to fill in a number in the input. It has browser-specific behavior and a mobile keyboard switch on mobile devices. The Number (or Decimal number) property works well with this input field.
More information on Number formatting can be found here
Password
Password input enables end users of the application to fill in a password in the input. The default behavior of such inputs is hiding the characters that an end user fills in to make it safer. Also, it has browser-specific behavior and a mobile keyboard switch on mobile devices. The Password property works well with this input field.
Price
Price input enables end users of the application to fill in a number in the input. It has browser-specific behavior and a mobile keyboard switch on mobile devices. The Price or Number properties work well with this input field.
See the unique option for this component:
-
Currency
You can pass in the currency icon via text input. This action replaces the icon option.
More information on Price formatting can be found here.
Email input enables end users of the application to fill in an email address in the input. In the context of the form, this input can be submitted to the action where it can fulfill multiple use cases. The Email address property works well with this input field.
Autocomplete
Autocomplete input provides a menu of options based on the records of relational models or based on the values of a List property. When typing, the component fetches records to show in the menu of options.
Limits
Currently, the dropdown shows 20 records in the menu of options when based on a relation.
Options
-
Model
The model this input is based on. -
Filter
Filter the records displayed in the dropdown menu of available options. -
Order by
Change the ordering in the dropdown menu of available options. -
Label for options
Overwrite the label that is displayed in the dropdown menu of available options.
-
Add checkboxes
Enable checking the options provided via the Autocomplete
-
Close dropdown after select
The dropdown of the Autocomplete form closes after your selected an option -
No options
Adds text below the input to give you more information. When there are validation messages, this text will be replaced to display them.
Decimal
Decimal input enables end users of the application to fill in a number in the input. It has browser-specific behavior and a keyboard switch on mobile devices. The Number with decimal property works well with this input field
More information on Number formatting can be found here.
Date picker
Date picker allows you to configure a Form where an end user can select a specific date. The Date property works well with this input field.
Options
-
Format
Defines the date format displayed in the input component.
-
Locale / Hour format
Define local time and 12 or 24-hour format
Date time picker
Date picker allows you to configure a form where an end user can select a specific date. The Date time property works well with this input field.
Options
The options are the same as in the Date picker.
More information on Date formatting can be found here.
Time picker
Time picker allows you to configure a form where an end user can select a specific date. The Time property works well with this input field.
Options
The options are the same as in the date picker except for this one:
-
Format
Defines the time format displayed in the input component.
More information on date & time formatting can be found here.
Switch
Switch works like the Checkbox, except the boolean toggle is shown with a slider instead of a checkbox.
Select
Select input allows you to provide a menu of options based on the records of relational models or based on the values of a listed property. The List property works well with this input field.
A unique option includes:
-
Allow users to empty selection
When enabled, users can avoid selecting any kind of value from the list.
Image upload
Image upload component enables the end users of the application to upload files in the input. In the context of the form, this input can be submitted to the action which allows the user to populate Image properties.
Unique validation options:
-
Hide default error
Suppresses the default error message when an invalid file is uploaded.
-
Accept files: Limits accepted file types to images (e.g., image/*), with the option to make this dynamic using variables. Configure the accepted mime type.
-
Max file size (MB)
Sets a limit on the maximum file size allowed for uploads, in megabytes.
-
Invalid file size message
Displays a custom message if the uploaded file exceeds the set size limit.
File upload
File upload component enables the end users of the application to upload files in the input. In the context of the form, this input can be submitted to the action which allows the user to populate File (or Image) properties.
The File upload options repeat the ones of Image upload.
Checkbox
Tables can't be imported directly. Please insert an image of your table which can be found here.
Checkbox allows you to let the end users submit boolean values. The Checkbox property works well with this input field.
A single unique option includes:
-
Label position
Set the label text position around a checkbox.
Checkbox group
Checkbox group functions similarly to a single Checkbox but allows end users to submit multiple boolean values. It uses a relational connection to a relational object, where the Checkbox property is ideal for handling these inputs.
Hidden
Hidden input can be used to pass values to the action the end user is unable to directly update. Depending on the expected input of the hidden input field: the text, number, or checkbox property works best with this input field.
Configuration:
During the configuration of the Hidden input, you may choose what kind of value you expect in the Hidden input, being: Text, Number, or Checkbox.
Options:
-
Action input variable
A property that was selected in either the form or input configuration is used for the connection between the component and the action input variable.
IBAN
IBAN input enables end users of the application to fill in an 18-digit IBAN (with letters) in the input. It has browser-specific behavior and a mobile keyboard switch on mobile devices. The IBAN property works well with this input field.
Multi Autocomplete
The main difference between Autocomplete and Multi Autocomplete is that Autocomplete allows users to select a single option from a dropdown list of suggestions based on their input, while Multi Autocomplete enables users to select multiple options from the list.
In Autocomplete, once an option is selected, the input is finalized. In Multi Autocomplete, users can continue selecting additional options, often using checkboxes for easier selection.
Phone
Phone input enables end users of the application to fill in a phone number in the input. It has browser-specific behavior and a mobile keyboard switch on mobile devices. The Phone number or Number properties works well with this input field.
Radio
Radio allows you to provide a list of options based on the List property. Only one option can be selected at a time. The List property works well with this input field.
Options
-
Label position
Set the label text position around a radio item.
-
Row
The radios are displayed in a list or a row next to each other.
Rating
Rating component allows you to collect a score from 1 to 10 (customizable) and parse this to the Form action. The Number property works well with this input field
Unique options include:
-
Is read-only
Stops the user from being able to change it
-
Number of icons
Allows you to define the score of the given rating from 0/1 to 0/10.
-
Precision
When enabled, Allows users to select half an icon. Enabling to give a,5 rating up to 10.
-
Size
Changes the size of the rating icon.
Rich text editor
Rich text editor allows you to collect text, and save its styling and formatting. The Rich text property works well with this input field.
Options
-
Height
Sets the height of the component using its parent height -
Width
This option specifies the width of the text area. -
Spacing
Allows you to set the outer space of the component, with options to define the space per side: top, left, right, bottom.
Toolbar options:
-
Bold - Write the selected text in bold
-
Italic -Write the selected text in italic
-
Underlined - Writes the selected text while underlined
-
Strikethrough - Write the selected text with a strikethrough
-
Code inline - Allows you to write code structure in the rich text editor and allow javascript or other coding tags to pass through the action.
-
Code block - Allows you to write an example code block using javascript or other coding tags
-
Numbered list - Lists the text in a numbered order
-
Bulleted list - Lists the text in a bulleted order
-
Left alignment - Aligns the text on the left-hand side of the rich text field
-
Center alignment - Aligns the text on the center of the rich text field
-
Right alignment - Aligns the text on the right-hand side of the rich text field
-
Justify alignment - Aligns the text according to the parent component it is placed into, justified.
URL
URL input is used to enable end users of the application to fill in a URL in the input. It has browser-specific behavior and a mobile keyboard switch on mobile devices. The URL property works well with this input field.
Using the components
Let’s look at the configuration of a model-based - Form component and an input field on a page canvas.
-
Drag a Form into a section of your page layout
-
Select the model you would like to use in your form
-
Select one or more properties you would like to collect data from on your page
-
Press
Save, the form will now be generated -
To add input fields, drag an input field on your form
-
Select a property connected to the model your form uses
-
Press
Save -
The new input field has been added to the model
-
Beware: in the form action, the input variable has been created but not yet connected to action steps, you will need to do this manually if you wish to do so
-
-
Beware: in the form action, the input variable has been created but not yet connected to action steps, you will need to do this manually if you wish to do so
If you would like to know more about configuring an action behind a form, have a look at building an action.
Regular Form vs the other Form components
The Form component can be customized from the get-go by dragging it onto your canvas and adding input components in the form field. (don’t forget to add the added input fields in the action too!).
However, to save yourself some work, you can also use the Create form, Update form, or Login form. These forms come with an in-depth wizard to help you set up their functionality instead of having to do it manually, look into this article for more information.
Regular Form vs configured Forms
The regular Form component is a starter for the predefined forms, our advice would always be to start with a Create or Update form as most of the steps users often take are connected to an update or create action, and how nice it is if it’s already there for you!
However, if you would like to parse multiple variables to your action, the regular form is perfect. Maybe you would like to delete multiple items at once, for this case, you could use the regular form and add multiple Hidden input components to the form and parse these to the action behind the form.
Another case would be to combine them with the use of schema models, it could be possible that you would like to collect data in your schema model and modify it after for other use cases.