Forms
Table of contents

Fields

Types

This section explains all the different fields we support. Its visual representation varies in function of the type from native browser components to custom ones with a UX better than their original equivalents.

Choice field

Group of different options where the user chooses one or more possibilities. Multiple choice is disabled unless you check Multiple values option.

Configurable rules: Date format and Default value.

Visual representation: Group of either radio buttons (single value) or checkboxes (multiple). Both cases use custom components to support styling.

API requirement: String for single value fields or an array of strings when multiple values are allowed.

Date/Time field

Input where users can set a date (eg. Jan 1st 1990) or a time (eg. 13:37) depending on the chosen format.

Configurable rules: Date/Time format and Default value.

Visual representation: Native browser input for date or time fields.

API requirement: String with format yyyy-MM-dd (date) or HH:mm (time).

Dropdown field

Dropdown with several options where users can set one or more values depending on Multiple values option.

Configurable rules: Multiple values, Valid values and Default value.

Visual representation: Custom component that supports multiple selection and partial search.

API requirement: String for single value fields or an array of strings for multiple values.

Email field

Input that expects a well-formed email. If you want to check it exists or exclude disposable emails, you have to use a validation flow for it.

Configurable rules: Default value.

Visual representation: Standard browser input for an email field.

API requirement: String matching the standard email pattern.

Legal field

Checkbox followed by a statement that confirms the user read and accepted something.

Configurable rules: None.

Visual representation: Custom browser input for an email field.

API requirement: String matching the boolean value true/false.

Number field

Input that expects a number. Accepted values depends on Numeric format property.

Configurable rules: Numeric format, Minimum value, Maximum value and Default value.

Visual representation: Standard browser input for a number field.

API requirement: String matching the defined numeric format.

Password field

Masked input to store passwords and secrets. Its value can be hashed using Hash function rule.

Configurable rules: Hash function.

Visual representation: Standard browser input for a password field.

API requirement: String. Hashing must be applied by client when SDK is not used.

Payment field

Advanced input for one-off charges or recurring subscriptions. Multiple providers are supported.

Configurable rules: See Payments section for more info.

Visual representation: Custom component to process credit card information.

API requirement: Card token generated by the chosen payment provider.

Phone field

Input that expects a phone. Accepted phones depend on field configuration.

Configurable rules: Minimum length, Maximum length and Default value.

Visual representation: Standard browser input for a tel field.

API requirement: String matching E.164 numbering plan.

Social login

Enables login with the social network of your choice.

Configurable rules: List of allowed providers, including their corresponding client identifiers and scopes.

Visual representation: Buttons following the corresponding color schema of each social network.

API requirement: JSON object specifying provider and access token.

Text field

Standard input that admits any value.

Configurable rules: Minimum length, Maximum length and Default value.

Visual representation: Standard browser input for a text field.

API requirement: String.

URL field

Input that expects a well-formed URL. If you have to check the existence of the provided URL, use a validation flow.

Configurable rules: Default value.

Visual representation: Standard browser input

API requirement: String containing a valid URL.

Yes/No field

Most basic field for yes/no statements. As it only supports two different values, default value is mandatory.

Configurable rules: Default value.

Visual representation: Custom component that displays a switch with two different positions: Yes or No.

API requirement: String matching the boolean value true/false.

Rules

Depending on the type of field you choose, you have a different set of rules to configure. Furthermore, if you have to add an advanced validation, you can create a validation flow and link it to your form.

To make sure malicious users do not introduce invalid data, unlike other competitors, all our data validations are performed on both server and client side.

Date/Time format

Form does not accept any date that does not satisfy the chosen format. If you have to ask for a full date (including hour), use two different fields with date and time format respectively.

Useful for: Asking the user her birthdate or a slot for a demo.

Available for: Date field.

Default value

Sets a value that will be assigned to that field when the user does not specify a value. This default value is assigned by backend, so it works even if you use a standard HTML form or the API.

The specified value must satisfy any additional requirement or server will return an error. For example, if you set a minimum length, the default value cannot be shorter than the specified length.

Useful for: Setting a default department on contact request or assigning a standard priority on issue report.

Available for: Yes/No, Choice, Date/Time, Dropdown, Email, Number, Phone, Text and URL fields.

Maximum length

Every value specified by an user must be equal or shorter than the length you specified for that field.

This rule does not omit whitespaces when validation is performed.

Useful for: Validating length of promotional codes.

Available for: Number field.

Maximum value

Forbides values greater than the specified value.

Useful for: Establishing a maximum number of items that someone can order using your forms.

Available for: Number field.

Minimum length

Every value specified by an user must be equal or longer than the length you specified for that field.

This rule does not omit whitespaces when validation is performed.
This rule does not replace Required field property, so do not forget to configure it when needed.

Useful for: Validating length of promotional codes.

Available for: Number field.

Minimum value

Requires users to specify a number equal or greater than the specified one.

Useful for: Requiring a minimum fee that someone has to pay.

Available for: Number field.

Multiple values

This flag is not required, but allows users to provide more than one value for a field.

If you have to require a specific number of options, combine it with Minimum options and/or Maximum options properties.

Useful for: Collecting areas of interest on user sign-up or setting affected services on issue report.

Available for: Choice and Dropdown fields.

Numeric format

Form does not accept any value that does not satisfy the specified numeric format. Formats that support decimal numbers do not require users to specify them when integers are provided.

Currency format allows negative numbers, so establish a Minimum value when needed.

Useful for: Requiring integer amounts on pre-sale product.

Available for: Number field.

Valid values

Specifies the possible options that a user can set for a field. This rule can be combined with the Additional values property when you have to allow people to set custom values.

Useful for: Setting the company departments or specifying the available sizes of a t-shirt.

Available for: Choice and Dropdown fields.

Settings

Every field can be configured by determining its settings. These are the available settings to personalize the fields of your form. Apart from these, each field may have particular settings of its own.

Hint Text

It adds an additional text below the label. For instance, in order to add a small explanation for the users. It supports dynamic values based on previous user values.

Label

It shows or hides the main label of the field. To change the text on the label, click on it on the form editor. It supports dynamic values based on previous user values.

Placeholder

It adds additional information that is displayed in the form field. It is often used to display the format of the value, in order to ease the filling process for the submitters. For instance, when indicating the format of a promotional code: AA123.

Required

It sets a form field as mandatory. If a field is mandatory and the user does not fill it, the form will not be submitted.

Transient

It avoids field data to be stored in Arengu’s systems.

To ease the setup of your forms, some form fields come with predefined settings. For instance, passwords are a sensitive datum — you probably do not want your users’ passwords to be stored in Arengu’s systems, so this field is marked as transient by default.