Form component reference

Learn what kind of form components the default component set has to offer and how they can be used in your application.

Updated over a week ago
Form components overview in the page builder

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.

For example, you can apply a submit button for posting values.

You are able to add one or more forms to your application. Use the scroll bar to navigate to the range of related components that are provided in the form components section of the page builder menu.

Before you start building a new form, it's necessary to apply a layout format for your page. For instance, add a column or container to a page's canvas.

There is an additional article that describes how the form components are interconnected with the data model and actions.

Note: Building forms involves knowledge of how to work with data and data models. You may need the support of an experienced IT developer for building forms.

The following components are available in the form section of the page builder menu:

Form

Submit button component icon

Form components are forms with input fields and a submit button to post the values to action.

Submit Button

Submit button components are buttons to finalize the user's input and submit forms.

Create Form

Update form component icon

Use to open the configure form fields based on a required model.

Update Form

Creates an update form record based on a selected model.

Login Form

Login form component icon

Provides fields for creating a login form. You are requested to select an authentication profile (specific to your application) and the page that is opened on successful login (Redirect after successful login).

Text Area

Text area component icon

Text area components are text fields that can contain multiple text lines and can be used inside forms to post text values.

Text Field

Text field component icon

Text field component that can be used inside a form to input and post text values.

Number

Number component icon

Number input fields that can be used inside forms to post number values.

Password

Password component icon

Password input fields can be used inside forms to post password values.

Price

Price component icon

Price input fields that can be used inside forms to post price values.

Email

Email component icon

Email input fields that can be used inside forms to post email values.

Autocomplete

Autocomplete component icon

The autocomplete component is a dropdown with suggestions based on what you enter in the input field

Decimal

Decimal component icon

Decimal component to specify the number of places in a number field.

Date Time Picker

Date picker icon

Datetime picker components are datetime pickers that can be used inside forms to post both date and time values.

Date Picker

Use for posting a date value in a form.

Time Picker

Time picker icon

Use for posting a time value in a form.

Switch

Switch icon

Apply a button for applying a switch on a form.

Select

Select component icon

Dropdown boxes containing values that can be selected and used in form to post specified values.

Radio

Radio component icon

Radio components can be chosen and used inside a form to post certain values.

Image Upload

Image upload component icon

Specify if an image can be uploaded to a form.

Hidden

Hidden component icon

Hidden input components are hidden input fields that can be used inside a form to post certain values.

File Upload

File upload component icon

File upload component can be applied for building file upload capabilities and specifying, for example, the accepted file formats.

Checkbox Group

Checkbox group component icon

Use the checkbox group component to specify values that can be chosen and used inside a form to post certain values.

Checkbox

Checkbox component icon

Checkbox components are checkbox groups containing options that can be chosen and used inside a form to post certain values.

Rating

Rating component icon

Use the rating component to apply a feedback rating button for users of your application.

Slider Input

Slider input component icon

Used to apply parameter changes for end users, e.g. volume.

Action Button

Action button component icon

You can build specific action buttons for use across your application. The action button component is part of the Actions module

IBAN

IBAN component icon

The IBAN component is used so that the end-users of the application can fill in a URL in the input.

Multi Autocomplete

Multi autocomplete component icon

The multi autocomplete component is a dropdown with multiple suggestions based on what you enter in the input field.

URL

URL component icon

Enables end users of an application can fill in a URL in the input.

Phone

Phone component icon

Enables end users to fill in the input with a phone number.

Rich text editor

Rich text editor component icon

An input field for a text that uses text markups, enters, and styling. The rich text needs to be saved in a rich text property type because the property needs to remember the styling/format of the text.

You can use customize the available components using the options available when a component is selected. You can use the 'Select parent component' or the 'Component Tree' menu to open the options for a form.

Image upload component on the front-end page

The following provides an example of the options menu available when working with the create form component. The options menu is based on the component selected and will vary based on the component selected.

Create form component options

You can use customize the available components using the options available when a component is selected. For example, you can:

Select an action to post the values to use the edit action. The actions module gets opened.

Specify the related model. The model App webuser is used as an example. You can use the edit button to open a model.

Did this answer your question?