In Umbraco Forms, reCAPTCHA V3 comes out of the box.

reCAPTCHA v3 allows you to verify if an interaction is legitimate without any user interaction.

Enabling reCAPTCHA V3

Follow these steps to enable reCAPTCHA V3 in Umbraco Forms:

1. Go to the Forms section in the backoffice.

2. Find the form that should have ReCAPTCHA v3 enabled.

3. Add a new question and select ReCAPTCHA v3 with Score as its answer type.

4. Make sure the field is set as Mandatory.

5. Configure ReCAPTCHA settings in the appSettings.json file to include public and private keys:

"Umbraco"{
    "Forms": {
      "FieldTypes": {
        "Recaptcha3": {
            "SiteKey": "",
            "PrivateKey": ""
          }
        }
      }
   }

You can create your keys by logging into your reCAPTCHA account.

You can view the System information of the form in the Info tab.

To access the Form Information:

1. Go to the Forms section.

2. Open a Form you wish to customize.

3. Click Info in the top-right corner of the screen.

General

The "General" panel displays system information about the form. The date the form was created and last updated are shown. Also available are the integer and GUID identifiers that are useful when referring to the form in code.

References

Information about which pages a form is hosted on is tracked by Umbraco every time a content item is saved.

The list of pages where the form is hosted is shown in this section.

The File Upload field allows the users to upload a file along with the Form on your website.

In this article, you will find details about the configuration options you have for the File Upload field.

Predefined allowed File Types

You can choose to specify which files you want to allow the user to upload, when accessing the Form.

To allow only specific files:

1. Select the specific File Types the user should be able to upload.

2. Click Submit.

User Defined Allowed File Types

If the list of predefined file types does not include a specific file type, you can add additional ones.

To add new file type:

1. Type a file extension name in the User defined allowed file types field.

2. Click +.

3. Click Submit.

Server-side file validation

The file upload field type will verify the file contents using the registered set of IFileStreamSecurityValidator instances.

To read more about this feature, see Server-side file validation in the CMS documentation.

Umbraco Forms comes with a bunch of default Field Types also known as Answer Types. You can choose from different field types when adding new fields to your Forms.

By default, the following Field Types are available:

• Short Answer: A textbox allows up to 250 characters.
• Long Answer: A bigger text field that allows multiline text and more than 250 characters.
• Date: Displays a picker that allows the user to select a date.
• Checkbox: Displays a single checkbox that can be checked or not.
• File Upload: Allows user to select and upload a local file.
• Password: Allows to type a password. The input is not visible when typing.
• Multiple Choice: Displays a list of items with a checkbox for each item where the user can select multiple options.
• Data Consent: A field for the purpose of asking for data consent. By default, this field is added to all new Forms.
• Dropdown: Displays a list of items in a drop down box where the user can select a single option.
• Single Choice: Displays a list of items with a radio button for each item where the user can select a single option.
• Title and Description: Displays a read-only title and description for a set of form fields.
• Rich Text: Displays read-only formatted text that can be used to provide additional information and links within a form.
• Hidden: A hidden field allows developers to include data that cannot be seen or modified by users when a Form is submitted.
• Recaptcha V2: The field displays a single checkbox for the user to select in order to validate the Form.
• Recaptcha V3 with Score: This field returns a score for each request without user interaction. The score is based on user interactions with the site and enables you to take an appropriate action for your site based on the score.

In this article, we'll take a look at the basic steps of creating a Form and adding the Form to your Umbraco site.

Accessing the Forms Section

You can manage the Forms in the Forms section of the Umbraco backoffice. You need to have access to the section in order to see it.

If you do not see the Forms section, you might need to request access from the site Administrator. An Administrator can give permission to view the Forms section. This is done from the Users section of the backoffice.

Creating a Form

To create a Form, follow these steps:

1. Navigate to the Forms section.

2. Click ... next to the Forms folder.
3. Select Create > New Form.
4. The Form Designer opens in the editor.
5. By default, there is a page, a fieldset, and a container available. The rest of the Form has to be added using the interface.

6. Enter a Name for the Form. Let's call it Our first form.
7. [Optional] Enter the Page Name. We'll call it The first page. Click Add new page at the bottom of the Forms designer to add more pages.
8. [Optional] Enter the Group Name. Click Add new group to add another group.
9. Click the Add Question button to add a new field.
10. The Choose field type dialog opens.
11. Select Short Answer. Enter the following details in the Edit field window:
12. In the Sensitive data field, choose if the field stores sensitive data. Once selected, the data from this field will be prevented from being downloaded and viewed by users who do not have permission to do so. Only members of the sensitive data user group will see this option of downloading.

13. Enter a Default Value for the field.

14. Add a Placeholder to make it easier for the user to fill in the Form.

15. Select if the field is Mandatory and customize the message.

16. Add a Validation to the field. There are some predefined validations available but it is possible to add your own custom validation as well.

17. Some form fields allow you to show or hide the label that's associated with the field when it is rendered within the form on the website. The default is always to show the field, but if you prefer to hide it, untick the Show label option.

18. Set Conditions for the field. For more information on Conditions, see the Setting-up conditional logic on fields article.

    Some of the additional settings are dependent on which answer type was chosen. For example, since we selected Short Answer as our answer type we got two additional settings (Default Value and Placeholder).

19. Once the configuration is completed, click Submit. You will see that the field has been added to the Form designer.

To edit a field, click the cog icon next to the field to open the dialog. To copy the field and its properties, click the copy icon. To delete a field or a group, click the Recycle Bin icon.

Structuring the Form

Ordering Fields

Once you've added a few fields to your Form, you might want to change the order of questions. To do so, click Reorder in the top-right corner of the Form designer.

When reordering your Form, you can drag and drop the fields to make it look the way you want. Click I am done reordering to get back to the Form designer.

Form Pages

Forms can be grouped into pages. When rendered, each page will be presented one at a time to the user. They will need to complete the first page before moving onto the second and can navigate back and forth between pages.

To add a new page at the start or end of the form, use the buttons in the top right corner of the editing view.

You can also add a new page directly to the bottom of the form via the Add new page button. This will appear below other pages when at least one exists.

Form Groups

With a page, form fields can be arranged into groups. These will display all together on a single page but can be styled so the fields are appropriately grouped in fieldsets.

New groups are added via the Add new group button.

Form Columns

The last level of structure are columns that can be created within a group. To set the number of columns, click the cog icon next to the Group Name. You can now add or move fields to the new columns created.

Saving the Form

Once have created the Form, save the design by clicking the Save button.

Importing a Form

Import Form Definition allows you to import a form into your Umbraco site using a predefined JSON file. This file contains the form’s structure, fields, validations, workflows, and settings.

When you import a form definition, Umbraco uses the JSON structure to recreate the form as it was defined, enabling you to:

• Reuse existing forms across multiple projects or environments.

• Migrate forms between development, testing, and production environments.

• Restore forms from backups or previously exported definitions.

Using the Import Form Definition option, you can manage your forms without having to recreate them.

Organizing Forms in Folders

If the product installation is set up to store form definitions in the database, you will be able to store forms within folders. This can help with organization and makes it easier to locate the forms for modification, especially if you plan to create many Forms.

To create a folder:

1. Go to the Forms section.

2. Click ... next to Forms folder.

3. Select Create.

4. Select New Folder.
5. Enter a Folder Name.

6. Click Create Folder.

You can create folders within folders, rename, move, import folders, or delete them.

To move or copy forms into folders, click the ... next to the Form and select Move.

Adding the Form to the Umbraco Site

To add the Form, follow these steps:

1. Navigate to the Content section of the Umbraco Backoffice.

2. Select the content page where you want to insert the Form. The page you choose should have a form picker which you can add in the Settings section under Document Types.
3. Click Choose and select the Form you want to insert. You will be able to select from the full list of forms. If available on your installation, you will also be able to select using a folder based view, which can be quicker to navigate when many forms have been prepared.
4. Click Choose.

5. The Form is inserted on your page. Click Save and publish.

Sometimes you might have a field in your Form, that you want to show only if the user has entered a specific value in another field.

You can achieve this setting by using conditional logic on Fields.

Example

Take a look at the following:

In this case, it makes sense to only show the email or phone field when the corresponding option is selected in the How should we contact you? field.

To enable conditions for the Email and Phone fields, do the following:

1. Click the cog wheel next to the Email and Phone field. The Edit question dialog opens.

2. Enable Conditions. The condition field displays more options:
3. Set the appropriate conditions and click Submit.

Action and Logic Types

There are two Action Types:

• Show: the field will be displayed if the rules match

• Hide: the field will be hidden if the rules match

Next up, you'll need to specify the Logic Type. This setting is only important if you have multiple rules.

• All: All of the rules must match

• Any: Any of the rules may match

Adding a new condition

When adding a new condition, you'll need to select the field where you want to evaluate the value and can select an operator.

In this example, we only want to show the Phone field if the value of the How should we contact you field is Phone.

Similarly, you can display the Email field, if the value of the How should we contact you field is Email. You can see the conditions added to each field in the Forms designer:

Result

When both the conditions have been set as shown above, this is how it will look on the frontend:

In this example, we have only selected Phone but it is possible to choose both Phone* and Email and display both the fields.

Conditions for Pages and Fieldsets

As well as showing or hiding a field based on conditions, you can also apply conditions to groups of fields (known as fieldsets) or to pages. The process is the same as described above.

When applying a condition to a page, effectively you are controlling the display of the submit button (for a single-page form) or the next/previous buttons (available on multi-page forms). In this way you can ensure that the entry so far is complete before accepting it or allowing the user to move onto the next page.

Conditions for Dates

You can apply conditions to dates as well as strings. When you use the date picker field, you can set a condition if a submitted date is greater/less than a specific date.

The date picker uses a front-end library called Pikaday to display a UI to pick dates.

Pikaday date picker can be localized based on the page the Form is rendered on.

The date picker displays the picked date in the required locale. Using JavaScript, a hidden field is updated with a standard date format to send to the server for storing record submissions. This avoids the locale mixing up the dates.

To achieve localized date, a Razor partial view is included at /Views/Partials/Forms/Themes/default/DatePicker.cshtml.

The DatePicker.cshtml includes the moment-with-locales.min.js library to help with the date locale formatting and the appropriate changes to Pikaday to support the locales. If you wish to use a different DatePicker component, edit the DatePicker.cshtml file as per your needs.

Configure the date picker

The Date picker has configuration settings to control the number of years shown in the picker and the date format.

In Umbraco Forms, reCAPTCHA V2 comes out of the box to help you to protect your site from spam, malicious people, and so on.

Enabling reCAPTCHA V2

Follow these steps to enable reCAPTCHA V2 in Umbraco Forms:

1. Go to the Forms section in the backoffice.

2. Find the form that should have ReCAPTCHA v2 enabled.

3. Add a new question and select ReCAPTCHA v2 as its answer type.

4. Make sure the field is set as Mandatory.

5. Configure ReCAPTCHA settings in the appSettings.json file to include public and private keys:

In this article, you will find information about accessing the Form Settings and the validations available to customize your Form.

To access the Form Settings:

1. Go to the Forms section.

2. Open a Form you wish to customize.

3. Click Settings in the top-right corner of the screen.

Settings Options

The following options are available in Forms Settings:

Store Records

By default, all submitted records are saved in the database. This option allows you to view and export the saved records from the queries overview. If you do not want to store data (due to policies in your organization), you can uncheck the box.

Disabling this option will prevent database records from being stored, but any file uploads made as part of the form submission will still be retained. If you do not want the files to be stored, ensure that any process or method used to process, move, or copy them to a different location also removes the file.

Captions

Customize the labels of the Submit, Next, and Previous buttons used in your Form.

Styling

Set a stylesheet to give your Form custom styling. You have an option to disable the default styling. Enabling the Disable default stylesheet option will prevent a default stylesheet to be added to the pages where the Form is placed.

Validation

Define a message that is displayed when a field is mandatory, when a value is not supplied, or when the value is invalid.

The following Validations are available:

Autocomplete

The autocomplete setting for the overall form can be changed from the default of "None" to "On" or "Off". Setting this explicitly will control how the browser offers automatic prompts to the user when completing the form.

Multi-page forms

The settings available in this section allow you to customize how multi-page forms are presented to site visitors.

Moderation

Enabling this feature allows the moderator to manage the approval status of a form. This can be used in a number of scenarios. For example, if the form submission will be publicly shown, you can control which are published.

Fields Displayed

By default, a constant set of fields are displayed when form entries are shown in a list. You will see the first three fields in the form, plus some system information like the record state and the date it was created.

To customize this, turn off the "Display default fields" option and select the ones you wish to display.

Data Retentions

To help protect site visitor privacy, rules can be configured in this section for the automatic deletion of submissions. You can set how long to retain records for each state (submitted, approved or rejected).