Reference - Form Builder components

This page lists all components available for the Form Builder by default in new installations of Xperience. For details on how to programmatically configure these components when used in the widget configuration dialog or in the form builder, see Editing components. 

Configure selector editing components

When using selector components as editing components, configure the DataSource property to define their options. You can either specify a list of values, or a semicolon-separated list of values and text. Each option needs to be entered on a separate line. For example:

// Assigns an editing component with DataSource to the SelectedOption property
[DropDownComponent(DataSource = "cz;Czech Republic\r\nusa;United States")]
public string SelectedOption { get; set; }

    // Assigns an editing component with DataSource to the SelectedOption property and sets "-" as the separator for the options
    [DropDownComponent(DataSource = "cz-Czech Republic\r\nusa-United States", DataSourceValueSeparator = "-")]
    public string SelectedOption { get; set; }

Configure the Upload file component

You can configure properties of the file uploader via the FormBuilderOptions object:

• Limit the maximum uploadable file size – describes how to set the maximum allowed size of uploaded files.
• Protect against Denial of Service – describes measures the system employs as prevention against malicious attacks.

Limit the maximum uploadable file size

You can control the maximum size of files uploaded via the file uploader form component by setting the FormBuilderOptions.FileUploaderFileSizeLimit option in your application’s startup code. The component automatically prevents people from uploading files larger than the specified limit and notifies them using a browser alert.

using Kentico.Forms.Web.Mvc;

WebApplicationBuilder builder = WebApplication.CreateBuilder(args);

...

// Sets the maximum file size of files uploaded using the 'File uploader' form component to 100MB
// You can also load this value from any configuration source using the configuration provider pattern
builder.Services.Configure<FormBuilderOptions>(options => options.FileUploaderFileSizeLimit = 1024 * 100);

Protect against Denial of Service

To expedite the form submission process, all files selected using the Upload file component are immediately uploaded and stored in a dedicated folder on the server. This occurs independently of the form submission process. After the form is submitted, the system moves the corresponding file (currently selected in the Upload file component) to the folder used to store form data on the server.

As a measure of protection against denial of service attacks, for example, by repeatedly uploading large files without submitting the form, the system limits the size of the folder used to temporarily store the uploaded files. The folder size limit, set to 500 MB by default, can be configured by setting the FormBuilderOptions.TemporaryUploadFilesFolderSizeLimit option in your application’s startup code. If the folder size limit is exceeded, the system prevents users from uploading additional files and logs an exception to the event log.

using Kentico.Forms.Web.Mvc;

WebApplicationBuilder builder = WebApplication.CreateBuilder(args);

...

// Sets the temporary folder size limit to 1000MB
// You can also load this value from any configuration source using the configuration provider pattern
builder.Services.Configure<FormBuilderOptions>(options => options.TemporaryUploadFilesFolderSizeLimit = 1000);

The system deletes the contents of the temporary folder once every two hours. If you wish to modify this behavior, for example in cases where you expect higher volumes of form submissions containing large files, you can override the default two hour interval by configuring the CMSDeleteTemporaryUploadFilesOlderThan key in your project’s configuration file (appsettings.json by default).

"CMSDeleteTemporaryUploadFilesOlderThan": 1,

Configure reCAPTCHA

You need to register your site to use the reCAPTCHA API and obtain a pair of API keys:

1. Go to https://www.google.com/recaptcha/admin and sign in with your Google account.
2. Select the reCAPTCHA type that you wish to use.
   • For reCAPTCHA v2, choose the “I’m not a robot” Checkbox option.
3. Fill in all required details, including the domain where your site is running.
4. Copy your Site key and Secret key.

Next, enter your site’s reCAPTCHA API keys into Xperience:

1. Open the Channel management application in the administration.
2. reCAPTCHA is configured per website channel. Edit the channel you want to configure.
3. Switch to the Channel settings tab.
4. Under reCAPTCHA settings:

   1. Select the reCAPTCHA version.

   2. Paste the API keys into the Site key and Secret key fields.

   3. For reCAPTCHA v3, set the Score threshold (a value between 0 and 1) required for the validation to be successful. Set a higher value if you have issues with spam or bots, and a lower value if you wish to make accessibility easier for users.

      If the validation fails for a user, there are no further challenges and form submission is not possible. In these cases, users can attempt to refresh the page again.

5. Save the settings.

With the API keys entered into the system, the reCAPTCHA form component now works in forms. When composing forms, the Form Builder interface allows users to configure additional properties for specific reCAPTCHA fields.

reCAPTCHA v2

• Label – sets the field label.
• Size – sets the size of the reCAPTCHA element (Normal or Compact).
• Type – sets the type of challenge used if the initial noCAPTCHA validation fails (Image or Audio).

reCAPTCHA v3

• Badge Position – Bottom right and Bottom left display the reCAPTCHA badge in the corresponding position at the bottom of the form. Inline displays the reCAPTCHA badge as a standard field within the form.

reCAPTCHA privacy and personal data handling

The reCAPTCHA API works by collecting hardware and software information, such as device and application data, and sending this data to Google for analysis. However, the reCAPTCHA form component is not integrated with the consent functionality in Xperience by Kentico. If required, you need to display any required privacy information to site visitors and collect consents manually.

For users in the European Union, you must comply with Google’s EU User Consent Policy.

Using multiple reCAPTCHAs on the same page

The system does not support the use of multiple reCAPTCHA fields within the same form. You can have multiple different forms with a reCAPTCHA field on the same page.