After reading this article, you’ll know:

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.

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.

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.

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 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 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.

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.

Let’s look at the configuration of a model-based - Form component and an input field on a page canvas.

If you would like to know more about configuring an action behind a form, have a look at building an action.

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.

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.