After reading this article, you’ll know:
What the Form component is and what kind of inputs can be added
The important options and uses of the Form component and its inputs
Note: This is quite a big article since the form and its input components belong together. Use the quick-navigate menu on the right side of the page to navigate to the segments you are looking for!
What is the Form component?
Form components serve for gathering input from users and submitting it to the action(s) connected to the form. In other words, by employing Form components, one can create web pages with input fields that are 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 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 interactions that are pre-build with the form. Be careful: if you change these the 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 are components that 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 that has the same type as the data you want to collect; are you asking for a username that is an email address? Use the email input component. Is the username a short name? Use the text field input component.
We will cover what kind of property we would advise to use with each input field down below.
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 single-line and text multi-line properties are selected in the configuration wizard of the form, the component will be created including a single-line text input field and a multi-line text input field.
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.
Form & input options
The form component
Options
|
|
Interactions > Triggers
Interactions > FunctionsSubmit This component function triggers the form to be submitted. |
Input components
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. If you need a user's email address you can use the email input component, or if you need someones birthdate, you can use the date component. Just like those examples there are way more components to choose from.
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.
Input configuration field
When adding an input component to an existing form, you select what the intended property this input is going to be submitting. The combination of the selected input and property will determine the action input variable that can be mapped to the assigned rows within the action. |
|
Textfield
The 'text (single line)' property works well with this input field
The text field 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. |
Options
Interactions > Triggers
Interactions > Functions
Enable/Disable
Sets disabled the state of the input. |
Text area
The 'text (multi-line)' property works well with this input field
The text area 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. |
|
The options are the same as in the text field with the exception below:
InteractionsThe interactions are the same as in the text field. |
File upload
The 'File' property works well with this input field
The 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' properties. |
|
The options are the same as in the text field with the exception below:
Interactions > Triggers
Interactions > Functions
|
Image upload
The 'Image' property works well with this input field
The 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. |
|
The options are the same as in the file upload component overview with the exception below:
The interactions are the same as in the file upload component overview. |
The 'Email address' property works well with this input field
The 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. |
OptionsThe options are the same as in the text field with the exception below:
InteractionsThe interactions are the same as in the text field. |
Password
The 'Password' property works well with this input field
The 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. |
|
Options The options are the same as in the text field with the exceptions below:
InteractionsThe interactions are the same as in the text field. |
Phone number
The 'Phone number' property works well with this input field
The phone number 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. |
|
Options The options are the same as in the text field with the exceptions below:
InteractionsThe interactions are the same as in the text field. |
URL
The 'URL' property works well with this input field
The 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.
|
Options The options are the same as in the text field.
Interactions The interactions are the same as in the text field. |
IBAN
The 'IBAN' property works well with this input field
The 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. |
Options The options are the same as in the text field with an exception:
Interactions The interactions are the same as in the text field. |
Hidden input
Depending on the expected input of the hidden input field: the text, number, or checkbox property works best with this input field.
The hidden input can be used to pass values to the action the end user is unable to directly update. |
|
Configure 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
Value Configure the value of the input component to give it a default value or base it on a dynamic property. |
Checkbox
The 'Checkbox' property works well with this input field
The checkbox allows you to let the end users submit boolean values. |
Options
Interactions > Triggers
Interactions > Functions
Check/Uncheck This component function sets the toggles to the checked value. |
Checkbox group
The checkbox group uses a relational connection to a relational object, for which the 'checkbox' property works best with this input field
The checkbox group works like the checkbox, except it allows you to let the end users submit multiple boolean values. Options The options are the same as in the check box except for this one:
InteractionsThe interactions are the same as in the checkbox |
Number
The 'Number' property works well with this input field
The 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. |
Options The options are the same as in the text field with an exception:
InteractionsThe interactions are the same as in the text field.
More information on Number formatting can be found here. |
Price
The 'Price' property works well with this input field
The 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. |
Options The options are the same as in the text field with an exception:
InteractionsThe interactions are the same as in the text field.
More information on Price formatting can be found here. |
Decimal
The 'Number with decimal' property works well with this input field
The 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. |
Options The options are the same as in the text field with an exception:
InteractionsThe interactions are the same as in the text field.
More information on Number formatting can be found here. |
Select
The 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. |
Options
Note: Some of the options are still under development, see them below:
Interactions > Triggers
Interactions > Functions
Note: Some of the options are still under development, see them below:
Enable/Disable
Sets disabled the state of the input. |
(Multi) Autocomplete
The 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
Interactions > Triggers
Interactions > Functions
|
Radio
The 'list' property works well with this input field
The radio allows you to provide a list of options based on the list property. Only one option can be selected at a time. |
Options
Interactions > Triggers
Interactions > Functions
Note: The reset function is still under development. |
Date picker
The 'Date' property works well with this input field
The date picker allows you to configure a form where an end user can select a specific date. |
Options
Interactions > Triggers
Interactions > Functions
Note: Some of the options are still under development, see them below:
More information on Date formatting can be found here. |
Date time picker
The 'Date time' property works well with this input field
The date picker allows you to configure a form where an end user can select a specific date. |
Options The options are the same as in the date picker except for this one:
Interactions > Triggers
Interactions > Functions
Note: Some of the functions are still under development, see them below:
More information on Date formatting can be found here. |
Time picker
The 'Time' property works well with this input field
Options The options are the same as in the date picker except for this one:
Interactions > Triggers
Interactions > Functions
Note: Some of the functions are still under development, see them below:
More information on Date & Time formatting can be found here. |
Switch
The 'Checkbox' property works well with this input field
The switch works like the checkbox, except the boolean toggle is shown with a slider instead of a checkbox. Options The options are the same as the check box.
Interactions The interactions are the same as the check box. |
Rating
The 'Number' property works well with this input field
The rating component allows you to collect a score from 1 to 10 (customizable) and parse this to the form action. Options The options are the same as in the checkbox except for this one:
InteractionsThe interaction options are the same as for the checkbox component.
|
Rich text
The 'Rich text' property works well with this input field
The rich text editor allows you to collect text, and save its styling and formatting. Options The options are the same as in the text field with the exception below:
Toolbar options
InteractionsThe interactions are the same as in the text 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 generatedTo 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
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.