Design custom forms

Completed

After deploying the Display custom form action, select the Custom form designer button to start designing your custom form.

Screenshot of the Display custom form action.

The designer consists of four main parts:

  • The form elements pane
  • The form structure pane - workspace
  • The properties pane (shown as "Custom form" in the image below)
  • The preview pane

Screenshot of the custom form designer.

The form elements pane provides various input elements that you can use to ask for specific types of data such as text, dates, and files. Additionally, the available non-interactive elements, such as texts and images, can help you make your forms more user-friendly and appealing.

Apart from these elements, there are actions that enable you to implement extra functionality to your forms. For example, the Submit action can either gather the provided user data or function as a cancel button.

Screenshot of a custom form preview.

To add an element to the custom form, double-click it or drag and drop it to the workspace area. Then use the preview pane on the bottom to see how the configured form will look during runtime.

All elements can be configured through the properties pane. Each element has different properties depending on its nature. For example, text inputs allow you to select the text style and the maximum text length.

Screenshot of the properties of a text input element.

The most critical property that all elements and actions require is the ID. The ID is a unique identifier for each element that you can use as a reference to access its data.

In the following section, you'll see how to use the ID property to access the provided form data in other actions in your desktop flows.