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 to control the number of years shown in the picker and the date format.

Umbraco contains the Forms section, by default. You will see a similar interface, when you click on the Forms section in the Umbraco Backoffice.

Video Tutorial

To install the Umbraco Forms package (Umbraco.Forms), follow these steps:

This article provides specific upgrade documentation for migrating to Umbraco Forms version 17.

Version Specific Upgrade Notes History

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.

In this section, you can find a set of different tutorials to use when creating and working with Umbraco Forms.

Tutorials

Learn how to create a Contact Form and add it to your website.

When working with the Block List editor, the editor experience is enhanced by defining a label for the appearance of the Block.

These labels can use Umbraco Flavored Markdown (UFM).

An option is available to display a form's name - umbFormName.

It should be rendered as follows, with a reference to the property alias on the block element that uses a form picker.

{umbFormName: <property-alias>}

If you add a reference to a property containing a form to the block's label, it will render with the form's Id.

For example, assuming a property containing a picked form with an alias of contactForm:

{=contactForm}

By using the markdown as follows, the form's name will be displayed instead.

{umbFormName: contactForm}

Umbraco Forms comes with some built-in fields however it is possible to exclude/remove them if necessary. There might some use cases where you have no use for file upload and don't want editors using them. Or perhaps you want to remove a field to replace it with one with enhanced functionality that you build yourself.

Example

The following class shows how to exclude built-in field types using a custom composer. The Password, Recaptcha2 and RichText field types (or "answers") will no longer be available for selection when creating a form in the backoffice.

using Umbraco.Cms.Core.Composing;
using Umbraco.Forms.Core.Providers.Extensions;
using Umbraco.Forms.Core.Providers.FieldTypes;

namespace MyNamespace
{
    public class MyFormFieldsComposer : IComposer
    {
        public void Compose(IUmbracoBuilder builder)
        {
            builder.FormsFields()
              .Exclude<Password>()
              .Exclude<Recaptcha2>()
              .Exclude<RichText>();
        }
    }
}

Umbraco Forms is a tool that lets you build forms of all shapes and sizes and put them on your Umbraco websites. Build forms using a long list of elements like multiple choice, dropdowns, text areas and checkboxes. Choose between a series of different workflows and control what happens once a form has been submitted.

Purchase Umbraco Forms or sign up for an Umbraco Cloud project where Umbraco Forms is part of the package.

Quick Links

This article shows how to manually upgrade Umbraco Forms to run the latest version.

When upgrading Umbraco Forms, be sure to also consult the version specific upgrade notes to learn about potential breaking changes and common pitfalls.

Get the latest version of Umbraco Forms

To get the latest version of Umbraco Forms, you can upgrade using:

NuGet

• NuGet installs the latest version of the package when you use the dotnet add package Umbraco.Forms command unless you specify a package version: dotnet add package Umbraco.Forms --version <VERSION>

• After you have added a package reference to your project by executing the dotnet add package Umbraco.Forms command in the directory that contains your project file, run dotnet restore to install the package.

Visual Studio

1. Go to Tools -> NuGet Package Manager -> Manage NuGet Packages for Solution... in Visual Studio, to upgrade your Forms:

2. Select Umbraco.Forms.

3. Select the latest version from the Version drop-down and click Install.

1. When the command completes, open the .csproj file to make sure the package reference is updated:

When forms are created, editors will want to add them to pages in Umbraco. To do this they need a Document Type with a property that uses a Data Type based on a Form Picker property editor.

Umbraco Forms provides three variations of a form picker.

Most commonly used is Form Picker (single). This will allow the editor to select a single form for display on page.

Rarely but feasibly, you will have a requirement to present multiple forms on a page. Should this be appropriate, you can use Form Picker (multiple).

Finally you can provide further flexibility for the editor to select not only a form but also the theme and redirect as well. For this you will use the Form Details Picker.

Configuring the Data Type

Each property editor allows you to restrict the forms that can be chosen with the Data Type. You do this by setting either or both of the list of "Allowed folders" or "Allowed forms".

The "Form Details Picker" also allows you to select whether a theme or redirect selection is available.

Property Value Conversion

The type of a property based on the Form Picker presented in a Razor class library is as follows:

Content Delivery API Expansion

Each reference to a form supports expansion via the Umbraco Content Delivery API, as described .

Umbraco Forms will register events for workflow operations that you can use with Umbraco webhooks.

Workflows are operations that you can associate with form submission, approval, or rejection actions. You can use these where you need to notify external systems of the success or failure of a workflow.

On the Umbraco Settings > Advanced > Webhooks dashboard, you can configure webhooks to respond to workflows.

You can amend the registration of workflow events in code.

To remove the webhooks that are added by default you can use a composer as follows:

using Umbraco.Cms.Core.Composing;
using Umbraco.Forms.Core.Extensions;

internal sealed class TestComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
        => builder.WebhookEvents().AddForms(formsBuilder => formsBuilder.RemoveDefault());
}

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:

You can create your keys by logging into your .

There are some default prevalue source types that can be used. In this article, we will give a quick overview of them:

Get values from textfile

Upload a textfile that contains the prevalues. Each prevalue should have its own line in the file. Once the file has been uploaded, you can find it in ~/wwwroot/App_Data/UmbracoForms/Data/PreValueTextFiles/{GUID} where the {GUID}is replaced with the pre-value ID.

Umbraco Documents

Allows you to use content nodes from a specific source as prevalues. Configure the following options in the Details section:

• Define the root node by either:

  • Selecting the type of item the picker should target such as Content, Media, or Members, or

  • Specifying a dynamic root.

• Enable Use current page as root

SQL Database

Connect to a OleDB compatible database table and construct a prevalue source from it. Once selected, it will be editable from the Forms interface.

Configure the following options in the Details section:

• Connection string (either choose one from your web.config or add another from a textfield).

• Connection String from configuration

• Table Name

• Key Column

Umbraco Data Type Prevalues

Choose an Umbraco Data Type to use its configured prevalue collection.

In the example below, the prevalue collection from a Data Type called Home - Font - Radio button is used:

In this section, we have summarized the changes to Umbraco Forms released in each version. Each version is presented with a link to the Forms issue tracker showing a list of issues resolved in the release. We also link to the individual issues themselves from the detail.

If there are any breaking changes or other issues to be aware of when upgrading they are also noted here.

Release history

This section contains the release notes for Umbraco Forms 17 including all changes for this version.

(December 17th 2025)

• Fix bug with NPM package exports not resolving correctly

(December 11th 2025)

• Refactored UX for sorting on form designer

• Render uploaded files as semantically correct HTML

• Filter out fields from email workflows when 'Include Sensitive Data' is set to false

• Normalise the JavaScript form parameter to always be the native DOM element

17.0.1 (November 27th 2025)

• Fix issues with the 17.0.0 release where migrations would sometimes not complete successfully

(November 27th 2025)

• Update Forms dependencies to 17.0.0

• All items detailed under release candidates for 17.0.0.

• JavaScript now correctly finds the form config element when it is not adjacent

17.0.0-rc4 (November 25th 2025)

• Stop "Save and preview" modal from displaying an interstitial state

• Adds additional exports to @umbraco-forms/backoffice NPM package

• Razor email templates now format URLs as UrlMode.Absolute

17.0.0-rc3 (November 20th 2025)

• Update dependencies to 17.0.0-rc3

• Fix issue where "Save and preview" modal would flash with no content

• Fix bug that showed "Empty due to Umbraco Forms in trial mode" for entries even with a valid license

17.0.0-rc2 (November 13th 2025)

• Update dependencies to 17.0.0-rc2

17.0.0-rc1 (October 30th 2025)

• Update dependencies to 17.0.0-rc1

Legacy release notes

You can find the release notes for versions out of support in the and .

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:

You can create your keys by logging into your .

This documentation platform covers only major versions of Umbraco Forms. If you are using an older version of Umbraco Forms, you will need to go elsewhere.

The labels, descriptions, and buttons that make up the backoffice screens for Umbraco Forms can be translated into different languages.

When an editor chooses a language for their account, Umbraco CMS will render appropriate translations. The translations will contain a file for that language and a key for the label in question. If either of these can't be found, the label will be displayed in English (US).

Language Files

Umbraco Forms ships with translations for the following languages:

• Czech (cs-cz.js)

• Danish (da-dk.js)

• Dutch (nl-nl.js)

• French (fr-fr.js)

• Italian (it-it.js)

• Polish (pl-pl.js)

• Spanish (es-es.js)

• UK English (en-gb.js)

• US English (en.js)

If the language you require does not exist, it's possible to create your own by duplicating the default en.js file. You can then save it with the appropriate culture code for the language you need and replace the English text with the translated version.

As of Forms 10, the file no longer exists on disk and is shipped as part of the Umbraco.Forms.StaticAssets NuGet package. You can open this package, either locally using , or by clicking the "Open in NuGet Package Explorer" link. You'll find the file at staticwebassets/en.js.

Once translated, the new file should be saved somewhere in the App_Plugins folder for example App_Plugins/UmbracoFormsLocalization/. The final step is to register the localization file. This can be done by creating a umbraco-package.json like so:

Umbraco Forms comes with a number of Field Types to allow you to request certain data in the forms that you design & build. This documentation is to guide specific details about field types that we ship that require some detail in how they work.

Date Picker

The date picker uses a front-end library called PikaDay.js to display a UI to pick dates from. We have added the support for the Pikaday date picker to be localized based on the page the form is rendered on. This displays the picked date in the correct locale. In JavaScript, we update a hidden field with a standard date format. This is done to send the date to the server, ensuring the record submission is stored in a standard format. This is to avoid locale mixing up dates.

To achieve this a new Razor partial view is included /Views/Partials/Forms/DatePicker.cshtml. Once on a page with a form that includes a Date Picker, it also includes the MomentJS library to assist with date locale formatting. Additionally, there are appropriate changes to Pikaday.js to support the locales. If you wish to use a different DatePicker component this is the file that you would customize to your needs.

Date Picker configuration of the year range

The DatePicker has one configuration setting to control the number of year shown. The default is 10 years which makes the picker unusable for picking birth dates.

Go to your appsettings.json and add:

You can then change the DatePickerYearRange to a higher number (for example 100).

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 in the CMS documentation.

When creating a text field in Umbraco Forms, a validation pattern in the form of a regular expression can be applied. Default patterns can be removed or re-ordered, and custom ones created and added.

Provided patterns

Umbraco Forms ships with three patterns: number, email, and URL. The class names are Number, Email, and Url respectively, and all are found in the Umbraco.Forms.Core.Providers.ValidationPatterns namespace.

Creating a custom validation pattern

To create a custom format function, create a class that implements IValidationPattern. You will need to initialize five properties:

• Alias - an alias that should be unique across the patterns and is typically camel-cased with no spaces.

• Name - the name of the pattern that will be visible in the backoffice.

• LabelKey - as an alternative to providing a name, a translation key can be provided. This will be used to look-up the name in the correct language for the backoffice user.

The following example shows the implementation of a pattern for a United Kingdom postcode (credit for the to at StackOverflow).

Registering the validation pattern

As with other provider types, the validation pattern needs to be registered. There are options to add, remove, and re-order patterns.

An example registration using the IUmbracoBuilder is shown below:

Using the pattern

With the pattern registered it will be available for selection by editors in the backoffice when they create validation for fields supporting this feature.

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.

To view the Entries for each Form, go to the Form and click on the Entries tab.

Video overview

There are two options available for rendering a form.

Rendering Using a View Component

To display a form in your view, you can make a call to a view component. You can use a forms GUID directly or add a form dynamically by referencing a form selected via a Forms Picker.

When selecting a theme, it can be added directly as a string or dynamically by referencing a theme picked via a Theme Picker.

In Umbraco Forms, it is only possible to store Form data in the database.

If you are upgrading to Umbraco 9 or later and using Forms, you should first migrate the Forms to the database using Forms 8. As of Umbraco Forms version 8.5.0 it is possible to persist all Forms data in the Umbraco database. This includes definitions for each Form and their fields, as well as workflow definitions and prevalues.

Forms output some JavaScript which is by default rendered right below the markup.

In many cases, you might prefer rendering your scripts at the bottom of the page. For example, before the closing </body> tag. This generally improves site performance.

In order to render your scripts where you want, you need to add a snippet to your template. Make sure you add it below your scripts, right before the closing </body> tag.

By default, Forms uses TempData for tracking the forms rendered on a page. The stored values are used when rendering the form scripts and associated data.

The following snippet should be used.

If you have changed the configuration value TrackRenderedFormsStorageMethod to use HttpContext.Items, the snippet is:

For Umbraco Forms to work correctly, you need to include some client dependencies.

Client-Side Validation

Umbraco Forms ships with client-side form validation features provided by the .

You can use the following Razor helper to output script tags containing the dependencies. To access this method you will need a reference to Umbraco.Forms.Web:

Url is a parameter passed into the method. It’s defined as a property on the base view model for an Umbraco template, so it will be automatically available in your Razor views.

This builds on the "" chapter

Umbraco Forms can be used to replace placeholders within form elements with values from different sources. Sources include the HTTP request or the Umbraco page where the form is hosted.

These values can be formatted using .

Filter functions for common operations such as truncating a string or formatting a date or number are provided. It's also possible to create custom ones in code.

Creating a custom format function

To create a custom format function, create a class that implements

Umbraco Forms contains a built-in Get value from textfile that stores the uploaded text file into the physical file system (by default in umbraco\Data\UmbracoForms\PreValueTextFiles).

You can replace the default implementation by writing your own IPreValueTextFileStorage and registering that using e.g. builder.Services.AddUnique<IPreValueTextFileStorage, CustomPreValueTextFileStorage>() (in Program.cs or a composer).

You can also use/inherit from PreValueTextFileSystemStorage to change the underlying IFileSystem that's used to store the prevalue text files.

/*
 Applies recommended primary keys, foreign keys and indexes to Umbraco Forms tables relating to "forms in the database" (i.e.
 when configuration key StoreUmbracoFormsInDb = true).
 This replicates for SQL Server the migration AddFormKeysAndIndexes.
 */

-- Adds unique constraint to UFForms.
ALTER TABLE dbo.UFForms
ADD CONSTRAINT UK_UFForms_Key UNIQUE NONCLUSTERED 
(
	[Key] ASC
) WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ONLINE = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
GO

-- Adds unique constraint to UFDataSource.
ALTER TABLE dbo.UFDataSource
ADD CONSTRAINT UK_UFDataSource_Key UNIQUE NONCLUSTERED 
(
	[Key] ASC
) WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ONLINE = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
GO

-- Adds unique constraint to UFPrevalueSource.
ALTER TABLE dbo.UFPrevalueSource
ADD CONSTRAINT UK_UFPrevalueSource_Key UNIQUE NONCLUSTERED 
(
	[Key] ASC
) WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ONLINE = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
GO

-- Adds unique constraint to UFWorkflows.
ALTER TABLE dbo.UFWorkflows
ADD CONSTRAINT UK_UFWorkflows_Key UNIQUE NONCLUSTERED 
(
	[Key] ASC
) WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ONLINE = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
GO

-- Adds index on join field in UFWorkflows.
CREATE NONCLUSTERED INDEX IX_UFWorkflows_FormId ON dbo.UFWorkflows
(
	FormId ASC
) WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, SORT_IN_TEMPDB = OFF, DROP_EXISTING = OFF, ONLINE = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
GO

Reverting the application of keys and indexes

Prevalue sources are a way to pre-define and/or retrieve a list of items from a certain source. They can be added in any field types that include some kind of list like Dropdown and Multiple/Single Choice lists.

Setting up a Prevalue Source

Prevalue sources can be managed in the Prevalue sources folder available in the Forms section.

To set a prevalue source:

1. Go to the Forms section.

2. Click ... next to the Prevalue Sources folder.

3. Click Create.

4. The Choose prevalue source type pane opens in the right-side of the editor.

5. Select the type of prevalue source. For more information on the different default types, see the article.

Configuring the Prevalue Source

Depending on the prevalue source type you choose, you'll need to provide some additional settings. For this article, we will select Get values from textfile.

1. Select Get values from textfile from the Choose prevalue source type pane.

2. Enter a Name for the prevalue source type. Let's call it My Prevalue Source.

3. Now, create a file containing the list to use as prevalues. For example: a .txt file containing the following values:

If you would like to have different values presented to your users from the value stored, you can provide two values per line, separated with a vertical bar (|), e.g.:

In this case the user would pick from a list showing the captions, but the single integer values would be stored with the record.

This can be useful if the recorded entries are used in any subsequent workflows or business processes, where particular values, that aren't appropriate for the user to select from, are required.

Defining Cache Options for the Prevalue Source

Sometimes retrieving the list of options for a prevalue source can be an expensive operation. If the source depends on data from external systems, it could be that the list changes regularly or rarely.

Given the variation here, we allow you to select an appropriate level of caching for the list of options.

You can choose between:

• No Caching - no caching will be applied and the list of options will be retrieved from source on every request. You will likely only want to choose this option if the information changes frequently and it's important that the latest is presented to website visitors.

• Cache For Specified Time - the list will be cached for the period of time provided.

• Cache With No Expiry - the list will be cached on first request and not retrieved again until either the prevalue source is edited or the website is restarted. This ismost appropriate to use for information held within the prevalue source data itself (such as when uploading a text file).

Attaching a Prevalue Source to a Field

Once a prevalue source has been created, it can be used while building Forms in the Forms designer.

Example: Let's add a Multiple Choice field type in our Form.

If there is at least one prevalue source defined in the project, the Prevalues source will contain a dropdown from where you can choose the predefined value.

Once you have selected the prevalue source, the values are rendered in the Forms designer from the attached source.

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.

Umbraco Forms is a commercial product. You can run Umbraco Forms unrestricted locally without the need for a license. Running Umbraco Forms in the public domain will require a valid license.

Version 16 supports both the one-off purchase and (in 16.1+) subscription license.

How does it work?

Licenses are sold per domain and will also work on all subdomains. With every license, you will be able to configure two development/testing domains.

This builds on the "" chapter

Add a new class to your project and have it inherit from Umbraco.Forms.Core.WorkflowType, and implement the class. For this sample, we will focus on the execute method. This method processes the current record (the data submitted by the form) and have the ability to change data and state.

Information available to the workflow

With Umbraco Forms, it is possible to customize the output markup of a Form, which means you have complete control over what Forms will display.

Umbraco Forms includes some helper methods that return records of a given Form, which can be used to output records in your templates using razor.

Available Methods

The methods can be found by injecting the Umbraco.Forms.Core.Services.IRecordReaderService interface. For performance reasons, all these methods are paged.

In this article, you will find information about accessing the Forms Advanced Options and the features available to customize your Form.

To access the Form Advanced Options:

1. Navigate to the Forms section.

2. Open a Form you wish to customize.

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

Validation Rules

When creating forms you can add validation to individual fields, making them mandatory or applying a regular expression pattern. You can provide validation rules for the entire form via the advanced options. This allows you to validate expressions based on multiple fields. For example, "these two email fields should be the same", or "this date should be after this other one".

To add new rules, you need to provide the rule definition, an error message and select a field to which the message will be associated. Once created you can click to edit or delete them from the list.

Crafting the rule definition itself requires use of along with placeholders for the field or fields that are being validated.

Examples

One example use case would be ensuring that two fields match each other, perhaps when asking for a user's email address. Given two fields on the form, one with the alias of email and the other compareEmail, the rule would be:

A slightly more complex example could be with two dates, where, if provided, you want to ensure the second date is later than the first. So given fields with aliases of startDate and endDate a rule would look like this:

Rules can be nested too. In this final illustrative example, we have two fields. One with the alias choose is a drop-down list with two values: A and B. The second field with alias test we want to be completed only if the user selects B. So we create a rule that is valid only if A is selected OR B is selected AND test is completed.

Overall, you can create rules of varying complexity, using comparisons between fields and static values.

When the form is rendered, these validation rules will be applied on both the client and server-side. In this way, you can ensure the submission is only accepted if it meets the requirements.

In this article, you will find information about Umbraco Forms-related health checks that can be run from the Umbraco backoffice to ensure that your installation is running seamlessly.

Read the Health Check article to learn more about the feature in general.

Database Integrity Health Check

Running this health check will verify whether the database tables for the Umbraco Forms installation are all set up correctly with the proper data integrity checks.

In this section, you can learn more about the background for adding this check, as well as how to use and understand the results.

Background

A health check was introduced to confirm the Umbraco Forms database tables are all set up with the expected data integrity checks - i.e. primary keys, foreign keys and unique constraints.

In most cases, you can expect them all to be in place without any developer intervention. For new installs, the database schema is initialized with all the necessary integrity constraints. And for upgrades, any new schema changes are automatically applied.

There remains the possibility though that not all will be in place for a particular installation. For example, this could happen if a constraint is added in a new version. It can't be added via an automated migration due to existing data integrity issues.

In particular, prior to version 8.7, there were a number of tables that weren't defined as strictly as they should be in this area. So we've added some primary key, foreign key and unique constraints with this version. If you've been running a version prior to this and are upgrading, these schema updates will be applied automatically unless there is existing data in the tables that prevent them from being added.

There shouldn't be - but without these constraints in place it's always possible for an application bug to exist that allows for example the creation of duplicate records, or the orphaning of records, that aren't correct. This is the reason for the constraints to exist, and why we want to ensure they are in place.

Running The Health Check

To run the health check:

1. Navigate to the Health Check dashboard in the Settings section in the Umbraco backoffice.
2. Click on the Forms button and select Perform checks. You'll see a result that looks something like this:

If you have a full set of green ticks, then you're all good - and no need to read on!

If you have one or more red crosses though, that means a particular constraint wasn't able to be applied via the automatic schema migrations when you installed a new version of Umbraco Forms, due to existing data issues.

It isn't essential that they are resolved - the package can and does function correctly without them - but for reasons of ensuring data integrity and performance, it is recommended that they are.

Resolving Reported Problems

When Umbraco Forms installs an upgrade, it will attempt to apply any schema changes. If though, the update isn't essential, and it can't proceed due to existing data integrity issues, the failed update will be logged and then the rest of the migration will continue.

As well as in the log files, such issues will be visible via the health check and will need to be resolved by applying scripts directly to the database.

To support this, we provide the following SQL scripts:

• Apply database integrity schema changes for 8.7.0+ -

• Apply database integrity schema changes for 8.7.0+ (Forms in database tables) -

The first of these provides the SQL statements required to apply the schema updates for 8.7.0+ to the common Umbraco Forms tables. The second applies to those tables used for when Forms are stored in the database, and hence only need to be applied if that option is configured.

To take an example, let's say that via the health check results you can see that the "Unique constraint on table 'UFForms', column 'Key' is missing."

If you look in the SQL script you'll see that in order to apply this directly to the database, you would need to run the following SQL statement:

If you run it though, you'll see the reason why the migration that ran when Umbraco Forms was upgraded couldn't apply the change:

The constraint can't be applied if there are existing duplicate values, so first they need to be found and removed.

To find duplicate values in the 'Key' field in this table you can run the following SQL statement:

Running the statement above will list out the 'Key' fields that are duplicated in the table.

To see the full details of the duplicate records, you can use this query:

From the Id field you can identify the Form records that are duplicated and should be removed, and delete the records. To check you have found them all, run one of the above queries again, and confirm you find no records returned.

Finally you can run the ALTER TABLE... statement shown above to apply the constraint, and confirm via the health check that it's now in place.

By repeating similar steps as required, you'll be able to ensure that all recommended keys, constraints and indexes are in place.

If for any reason you wish to revert the changes - perhaps when testing these updates in a non-production environment - reversion scripts for all the 8.7 updates are also provided:

To support this, we provide the following SQL scripts:

• Revert database integrity schema changes for 8.7.0+ -

• Revert database integrity schema changes for 8.7.0+ (Forms in database tables) -

In this article, you will find information about accessing the Form Settings and the options 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).

A background service that carries out the actual removal of records needs to be . If that is not running, a notification will be displayed.

Umbraco Forms functionality can be extended in different ways.

For front-end extensions, specifically via theming, see the Themes section.

Extending the Backoffice

Umbraco Forms publishes an NPM package called @umbraco-forms/backoffice that holds typings and other niceties to build extensions.

You can install this package by running the command:

This will add a package to your devDependencies containing the TypeScript definitions for Umbraco Forms.

TSConfig

Make sure to configure your TypeScript compiler so it includes the Global Types from the package. This enables you to utilize the declared Extension Types. If your project uses other Packages that provide their Extension Types, list those as well.

In your tsconfig.json file, add the array types inside compilerOptions, with the entry of @umbraco-forms/backoffice:

Take extra care when using Vite

It is important that this namespace is ignored in your bundler. If you are using Vite, you can add the following to your vite.config.ts file:

This ensures that the Umbraco Backoffice packages are not bundled with your package.

Read more about using Vite with Umbraco in the article.

Developing Custom Providers

Although the Forms package comes with many fields, workflows and other built-in types, you can still create and develop your own if needed.

Many features of Forms use a provider model, which makes it quicker to add new parts to the application.

The model uses the notion that everything must have a type to exist. The type defines the capabilities of the item. For instance a Textfield on a form has a FieldType, this particular field type enables it to render an input field and save text strings. The same goes for workflows, which have a workflow type, datasources which have a datasource type and so on. Using the model you can seamlessly add new types and thereby extend the application.

It is possible to add new Field types, Data Source Types, Prevalue Source Types, Export Types, and Workflow Types.

A field type handles rendering of the UI for a field in a form. It renders a standard ASP.NET Razor partial view and is able to return a list of values when the form is saved.

The concept of provider settings, common to the field and other types, is also discussed in this section.

Data Source Types

A data source type enables Umbraco Forms to connect to a custom source of data. A data source consists of any kind of storage if it is possible to return a list of fields Umbraco Forms can map values to. For example: a Database data source can return a list of columns Forms can send data to. This enables Umbraco Forms to map a form to a data source. A data source type is responsible for connecting Forms to external storage.

A prevalue source type connects to 3rd party storage to retrieve values. These values are used on fields supporting prevalues. The source fetches the collection of values.

A workflow can be executed each time a form changes state (when it is submitted for instance). A workflow is responsible for executing logic which can modify the record or notify 3rd party systems.

Export types are responsible for turning form records into any other data format, which is then returned as a file.

Custom magic string format functions to add to the can be created in code.

When creating a text field in Umbraco Forms, a validation pattern in the form of a regular expression can be applied. Default patterns can be removed or re-ordered, and custom ones created and added.

Handling Forms Events

Another option for extension via custom code is to hook into one of the many events available.

Form events are raised during the submission life cycle and can be handled for executing custom logic.

When a new form is created, the default behavior is to add a single workflow. This workflow will send a copy of the form to the current backoffice user's email address.

A single "data consent" field will also be added unless it has been disabled via configuration.

It's possible to amend this behavior and change it to fit your needs.

Responding to State Values

In the course of submitting a form, Umbraco Forms will set values in TempData and/or HttpContext.Items, that you can use to customize the website functionality.

Customizing Post-Submission Behavior

Whether displaying a message or redirecting, a developer can customize the page viewed after the form is submitted based on the presence of TempData variables.

One variable with a key of UmbracoFormSubmitted has a value containing the Guid identifier for the submitted form.

A second variable contains the Guid identifier of the record created from the form submission. You can find this using the Forms_Current_Record_id key.

In order to redirect to an external URL rather than a selected page on the Umbraco website, you will need to use a . Within this workflow you can set the required redirect URL on the HttpContext.Items dictionary using the key FormsRedirectAfterFormSubmitUrl (defined in the constant Umbraco.Forms.Core.Constants.ItemKeys.RedirectAfterFormSubmitUrl).

For example, using an injected instance of IHttpContextAccessor:

In this article, you can learn how to add extra functionality to your Form by attaching workflows.

Workflows are a way of defining actions after your Form is submitted like sending an email or creating a content node.

Default Workflow

By default, when a Form is submitted the record data is stored in the database. This can be configured in the Store records of the Forms settings.

The behavior to display a message to the user who submitted the form can be configured by clicking on the built-in first workflow step. This step is labelled Submit message/Go to page, and it can also configure the redirection to another page.

If a value is selected for Go to page, it will be used to redirect to that page once the form has been submitted.

If no value is selected, the message in Message on submit is displayed to the user on the same page, instead of the form fields. This is implemented via a redirect to the current page, ensuring that the form can't be accidentally resubmitted.

By default, the message is created and rendered in plain text. If you need to add formatting to the message, toggle the Format message in rich text button.

Video Tutorial

Adding a Workflow

At the bottom of your Form, a default workflow is already attached to the Form, as well as an option to configure the workflows.

Clicking Configure workflow will give you the option to configure existing workflows, as well as setup new ones.

Choose a Workflow

A new workflow can be of different types and Umbraco Forms ships with a few default ones. You can find an overview of the types in the article.

Update Type-specific Settings

Once the Workflow Type has been selected, you will need to configure the workflow. There are different settings depending on the type that has been selected.

To use data from the submitted Form in your workflow, head over to the article and learn more about how that's done.

Configuring Condition on a Workflow

You can apply conditions to a workflow that trigger it only under specific circumstances. After adding the desired workflow type (for example, sending an email), you can add a condition to the workflow.

Select Enable conditions to open the condition editor. In the condition editor, you will see options to create logic that determines when the workflow should run. The condition is generally based on the values of the form fields.

For example: You have a form with a dropdown field labeled Preferred Contact Method with options such as Email and Phone. You can set up a workflow that sends an email notification only when the user selects Email.

Now, this email notification will only be sent when the user selects Email as their preferred contact method.

Fill in the rest of the settings and click Submit. The workflow is added to your Form and displayed at the bottom of the page.

Workflow Processing

When a form is submitted, any workflows associated with the "submit" stage of the form will run sequentially in the configured order. The record is stored after these workflows are completed, and as such they can make changes to the information recorded.

Similarly, approval of a form entry, whether automatic or manual, will trigger the execution of the workflows associated with the "approve" stage.

Rejection of an entry will trigger the execution of the workflows associated with the "reject" stage.

If a workflow encounters an unexpected error, it will silently fail from the perspective of the user submitting the form. The exception along with the other details of the failed operation is recorded to the log.

From Umbraco Forms versions 8.13.0 and 10.1, an audit trail has been made available. In the list of entries for a form, a summary is presented that shows how many workflows were executed, and how many were successful:

For each entry, in the backoffice a table can be viewed that shows each of the workflows and the success, or otherwise, of the operation.

For any workflows that did not complete successfully, a "Retry" link is available to trigger the workflow again. This is useful for example if there was a temporary infrastructure issue that perhaps prevented an email going out. You would be able to retrigger the workflow once the issue is resolved.

Umbraco Forms has a backoffice security model integrated with Umbraco users. Details are managed in the Forms section of the backoffice, within a tree named Security.

User-based permissions

Within the Forms > Security tree, each user with a backoffice account is listed. Clicking on a user allows each functional permission to be set:

• Manage Forms - user can create and edit form definitions

• View Entries - user can view the submitted entries

• Edit Entries - user can edit the submitted entries

• Delete entries - user can delete the submitted entries

• Manage Workflows - user can create and edit workflow items

• Manage Datasources - user can create and edit datasource definitions

• Manage Prevalue Sources - user can create and edit prevalue source definitions

For further control, each form is listed and the user can be granted or denied access to each as appropriate.

As new forms are created, users will automatically be granted access to them, unless the configuration setting DefaultUserAccessToNewForms has been set to a value of Deny.

Start Folders

When form definitions are configured for storage in the database, it allows for the creation of folders to group forms within. It's also possible to define one or more start folders for a user. This is done in order to limit their access to a subset of the forms available.

If no start folders are selected, the user will be able to access all forms in the backoffice according to their permissions.

If a single start folder is selected, that will act as the root of the tree view of forms. The user will have access to all folders and forms below that selected folder.

If more than one start folder is selected, they will appear underneath the root of the tree view of forms. The user will have access to only those folders and their descendant folders and forms.

User group based permissions

A new model was introduced allowing for the management of permissions at the level of user groups. Particularly for installations with a large number of users, we expect this to be a more useful setup and require less ongoing administration.

When user groups are involved in permissions, access to a particular resource or feature is determined by the following:

• If the user has a specific user permission set, it is used in preference to anything set on the user groups they are a part of.

• If the user doesn't have a specific user permission set, they are granted access if at least one of the user groups they are part of has access.

To enable the feature, it's necessary to update the ManageSecurityWithUserGroups configuration setting to true.

With that in place the Form Security tree divides into three sub-trees:

• Under Group Permissions, each user group is listed and the same settings as described above for individual users can be set here.

• Under User Permissions, each user that has a specific user permission record is listed and can be managed. Records for users can be created or deleted via the tree's action menu.

As new forms are created, user groups with aliases listed in the GrantAccessToNewFormsForUserGroups configuration setting will be automatically given access. For example, with a value of admin, editor, the built-in Administrators and Editors groups would have access.

Start folders for user groups

Start folders are enabled for User Groups. They work in a similar way as the group based permissions described above:

• If the user has a specific user permission set, it is used in preference to anything set on the user groups they are a part of.

  • This means if the user has no start folders defined and the groups they are part of do, they will have access to the root of the Forms tree and be able to access all folders and Forms.

• If the user doesn't have a specific user permission set, they are granted access to all the unique folders the groups they are part of have access to.

Migrating to user group-based permissions

In introducing the user group based permissions, we've taken care to ensure a migration path. This is available for those existing installations running on older versions of Umbraco Forms. In that situation, we'd recommend the following approach.

• Upgrade to Umbraco 9.3.

• At this stage nothing will have changed in terms of the permissions model in use.

• Set the ManageSecurityWithUserGroups configuration value to true and the GrantAccessToNewFormsForUserGroups as appropriate for your setup.

Handling Sensitive Data in Umbraco Forms

Marking fields and properties as sensitive will hide the data in those fields for backoffice users that are not privy to the data. Built-in features are available to help you secure sensitive information. For more information, see the article.

The following sections covers how to grant or deny access to sensitive data for specific users and how to mark form questions as sensitive.

Assigning Users to the Sensitive Data Group

To allow users to view and handle sensitive data in Umbraco Forms, you must assign them to the Sensitive Data user group:

1. Navigate to the Users section in the Umbraco Backoffice.

2. Select the user you want to grant access to.

3. Click Choose in the Groups field under the Assign access section.

4. Select Sensitive Data from the list of User Groups.

Marking Questions in Forms as Sensitive

Once the users are set up with the appropriate permissions, the next step is to identify which form fields should be marked as sensitive.

Marking a field as sensitive ensures that only authorized users in the Sensitive Data user group can access data from these fields.

To mark questions as sensitive, follow these steps:

1. Navigate to the Forms section in the Umbraco Backoffice.

2. Open the form you wish to configure (for example: Contact Form).

3. Click on the cogwheel icon next to the form field you want to secure.

4. Enable the Sensitive data setting for the field.

1. Click Submit.

2. Click Save.

Form validation notification

Add a new class to your project as a handler for the FormValidateNotification notification:

The handler will check the ModelState and Form field values provided in the notification. If validation fails, we add a ModelError.

Revert application of keys and indexes

/*
 Reverts application of recommended primary keys, foreign keys and indexes to core Umbraco Forms tables.
 This reverts for SQL Server the migration AddRecordKeysAndIndexes and can be used for rolling that back in testing.
 */

-- Reverts addition of relationship between UFRecords and UFRecordFields.
ALTER TABLE dbo.UFRecordFields
DROP CONSTRAINT IF EXISTS FK_UFRecordFields_UFRecords_Record
GO

-- Reverts addition of primary keys to UFRecordData* tables.
ALTER TABLE dbo.UFRecordDataBit
DROP CONSTRAINT IF EXISTS PK_UFRecordDataBit
GO

ALTER TABLE dbo.UFRecordDataDateTime
DROP CONSTRAINT IF EXISTS PK_UFRecordDataDateTime
GO

ALTER TABLE dbo.UFRecordDataInteger
DROP CONSTRAINT IF EXISTS PK_UFRecordDataInteger
GO

ALTER TABLE dbo.UFRecordDataLongString
DROP CONSTRAINT IF EXISTS PK_UFRecordDataLongString
GO

-- Reverts addition of relationship between UFRecordFields and UFREcordData* tables.
ALTER TABLE dbo.UFRecordDataBit
DROP CONSTRAINT IF EXISTS FK_UFRecordDataBit_UFRecordFields_Key
GO

ALTER TABLE dbo.UFRecordDataDateTime
DROP CONSTRAINT IF EXISTS FK_UFRecordDataDateTime_UFRecordFields_Key
GO

ALTER TABLE dbo.UFRecordDataInteger
DROP CONSTRAINT IF EXISTS FK_UFRecordDataInteger_UFRecordFields_Key
GO

ALTER TABLE dbo.UFRecordDataLongString
DROP CONSTRAINT IF EXISTS FK_UFRecordDataLongString_UFRecordFields_Key
GO

-- Reverts addition of index on foreign key fields in UFREcordData* tables.
DROP INDEX IF EXISTS IX_UFRecordDataBit_Key ON dbo.UFRecordDataBit
GO

DROP INDEX IF EXISTS IX_UFRecordDataDateTime_Key ON dbo.UFRecordDataDateTime
GO

DROP INDEX IF EXISTS IX_UFRecordDataInteger_Key ON dbo.UFRecordDataInteger
GO

DROP INDEX IF EXISTS IX_UFRecordDataLongString_Key ON dbo.UFRecordDataLongString
GO

-- Reverts addition of primary key to UFUserSecurity
ALTER TABLE dbo.UFUserSecurity
DROP CONSTRAINT IF EXISTS PK_UFUserSecurity
GO

-- Reverts addition of primary key to UFUserFormSecurity
ALTER TABLE dbo.UFUserFormSecurity
DROP CONSTRAINT IF EXISTS PK_UFUserFormSecurity
GO

-- Reverts addition of unique constraint to UFUserFormSecurity across user/form fields.
ALTER TABLE dbo.UFUserFormSecurity
DROP CONSTRAINT IF EXISTS UK_UFUserFormSecurity_User_Form
GO

To add a new type, no matter if it's a workflow, field, data source, etc, there is a number of tasks to perform to connect to the Forms provider model. This chapter walks through each step and describes how each part works. This chapter will reference the creation of a workflow type. It is, however, the same process for all types.

Preparations

Create a new class library project in Visual Studio add references to the Umbraco.Forms.Core.dll (available via referencing the NuGet package). You might also need to reference Umbraco.Forms.Core.Providers.

Adding the type to Forms

The Forms API contains a collection of classes that can be registered at startup or in an Umbraco component. So to add a new type to Forms you inherit from the right class. In the sample below we use the class for the workflow type.

When you implement this class you get two methods added. One of them is Execute which performs the execution of the workflow and the other is a method which validates the workflow settings, we will get back to these settings later on.

Any dependencies required that are registered with the dependency injection container can be provided via the constructor.

Even though we have the class inheritance in place, we still need to add a bit of default information.

Setting up basic type information

Even though we have the class inheritance in place, we still need to add a bit of default information. This information is added in the class's constructor like this:

All three are mandatory and the ID must be unique, otherwise the type might conflict with an existing one.

Adding settings to a type

Now that we have a basic class setup, we would like to pass setting items to the type. So we can reuse the type on multiple items but with different settings. To add a setting to a type, we add a property to the class, and give it a specific attribute like this:

The Umbraco.Forms.Core.Attributes.Setting registers the property in Umbraco Forms and there will automatically be UI and storage generated for it. In the attribute, a name, description and the view to be rendered is defined.

With the attribute in place, the property value is set every time the class is instantiated by Umbraco Forms. This means you can use the property in your code like this:

For all types that use the provider model, settings work this way. By adding the Setting attribute Forms automatically registers the property in the UI and sets the value when the class is instantiated.

Each setting value is stored as a string with the user interface for generating the value defined via the View property.

Umbraco Forms ships with .

Validate type settings with ValidateSettings()

The ValidateSettings() method which can be found on all types supporting dynamic settings, is used for making sure the data entered by the user is valid and works with the type.

Registering the class with Umbraco and Forms

To register the type, ensure your web application project has a reference to the class library, either via a project or NuGet reference. Then add the following code into the startup pipeline. In this example, the registration is implemented as an extension method to IUmbracoBuilder and should be called from Program.cs:

An alternative approach is to use a composer, as per this example:

There are further convenience methods you can use for registering custom types. These are found in the namespace Umbraco.Forms.Core.Providers.Extensions.

For example, instead of the following:

Your workflow can be registered using:

Or:

Existing items that are not required in a particular installation can be removed with:

Also look in the reference chapter for complete class implementations of workflows, fields and export types.

Overriding default providers in Umbraco Forms

It is possible to override and inherit the original provider, be it a Field Type or Workflow etc. The only requirement when inheriting a fieldtype that you wish to override is to ensure you do not override/change the Id set for the provider, and make sure your class is public.

Here is an example of overriding the Textarea field aka Long Answer.

As discussed in the previous section, you must also register the extended field type within a composer. You also need to create the the backoffice field type view.

Composer:

Backoffice View:

Add a new HTML file as per the name of the field class (e.g. textareawithcount.html) to \wwwroot\App_Plugins\umbracoforms\Backoffice\Common\FieldTypes\ within your project. For this example, we can copy the original textarea.html file used by the standard 'Long Answer' field.

The AngularJS client-side files are shipped with Umbraco Forms as part of a Razor Class Library. So you won't find these files on disk when you install the package.

However if you do want to reference them you can view and extract them from the .

Umbraco Forms supports Themes, allowing forms to be customized in a much simpler manner.

Creating a Theme

To create a theme, you need to create a folder at /Views/Partials/Forms/Themes/. The name of the folder is the name of theme that will be visible in the backoffice when choosing it.

Copy the explicit files you wish to override in your theme, it may be a single file or all files from the default theme folder. Make the necessary changes you desire to CSS class names, markup etc.

Obtaining the Default Theme Files

For Umbraco 9 and previous, it's straightforward to copy the files you need from the default theme folder. We highly recommend that you never customize any files found in the default themes folder. There is a risk that any customizations to these files will be lost with any future upgrades you do to Umbraco Forms. Umbraco 10+ distributes these files as part of a Razor Class Library, so you won't find them on disk. Instead you should download the appropriate zip file for your Forms version and extract the ones you need.

You can obtain the latest version of the Forms default theme from the following links:

You should use the theme available for the highest version that's less or equal to the version of Forms you have installed.

Amending Theme Files

If adding or amending client-side scripts, you need to copy the Script.cshtml file from the default themes folder. In your copy, amend the .js references to reference your own script files.

Shipping Themes in a Razor Class Library

Umbraco Forms provides it's built-in themes as part of a Razor Class Library for ease of distribution. This can be useful for custom themes, particularly those used in multiple solutions or released as an Umbraco package.

It is also possible to do this for custom themes.

1. Create a new Razor Class Library project to hold the theme.

2. Create the necessary Partial Views for your theme within Views\Partials\Forms\Themes\<my-custom-theme>.

3. Provide the names of the files in your theme via an implementation of ITheme.

• For example, if only overriding a single file, your class would look like the code snippet below:

1. Register the themes you want to use via a composer:

Your theme will now be available in the Theme Picker and the partial view files will be used when rendering forms.

Email Templates

Email templates provided for the send email workflow can be provided in a Razor Class Library similar to the Theme files.

The partial view will be created in Views\Partials\Forms\Emails.

It's made available via an implementation of IEmailTemplate:

And registered with:

Removing the Default Email Template

If providing custom email templates, you may want to remove the one provided with Forms. You can do that via the same EmailTemplates collection.

Using a Theme

When rendering a form in a view file, you can specify which theme to use with the form.

Learn more about how to render a form with a theme in the article.

Theme Fallbacks

When using a theme, Umbraco Forms will try to use a view from the theme folder, but then fallback to the same view in the default theme folder if it can't be found. This allows you to create a theme by only modifying the files necessary to make your customizations.

Files which can be overridden:

• Render.cshtml (overrides the entire form - usually not needed)

• Form.cshtml (overrides the generation of the fields on the current page)

• Script.cshtml (overrides the way files are included with the form)

• /Fieldtypes/FieldType.*.cshtml (overrides a specific view for a field)

Helper Methods

SetFormThemeCssFile

Sets the primary form theme stylesheet path. This overrides an already assigned stylesheet and will be rendered out when inserting the form into the page

AddFormThemeScriptFile

Add a JavaScript file path to include on form render

SetFormFieldClass

Adds a class to the form field HTML element of a given type. If no type is given, it will add the class to all fields

GetFormFieldClass

Retrieves all classes for a given field type, used when rendering form fieldtype partial views

SetFormFieldWrapperClass

Adds a class to the div element wrapping around form fields of a given type. If no type is given, it will add the class to all fields

GetFormFieldWrapperClass

Retrieves all wrapper classes for a given field type, used when rendering form fields. This class wraps both label, help-text and the field itself in the default view

Umbraco Forms field, prevalue source and workflow types are defined in C# and include one or more setting values.

These settings are completed by the editor when using the type on their form.

Each setting type can have it's own user interface. So a string can use a text box but a more complicated JSON structure can use a more appropriate user interface.

From Forms 14, each interface is defined as an Umbraco property editor UI.

The user interface used for a particular setting is defined by the View property:

If not specified, the default Umb.PropertyEditorUi.TextBox is used.

Built-in setting types

The following setting types are available and are used for the field, prevalue source and workflow types that ship with the package.

Some are defined with the Umbraco CMS and some ship with the Forms package.

Most of the above setting types are used in one or more field, prevalue source and workflow types available with Umbraco Forms. For the less common ones, a usage has been indicated in the table.

Additional setting types

Some types we don't use within the package, but we make available for developers to use when creating their own types.

For example Forms.PropertyEditorUi.TextWithFieldPicker. This offers the option of text field entry or the selection of a field from the form. This can be useful in workflows where you need to reference the value of a specific field.

Creating a setting type

It's also possible to define your own setting type using a combination of server and client-side code.

Read how do this in the article on .

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.

Umbraco Forms has some magic strings that enable you to render values from various sources, such as session, cookies and Umbraco page fields.

Where can I use magic strings?

Magic strings can be used in form fields as a label, description or default value. As an example they can be used in default values in hidden fields - normally in the form of referral codes from a session, cookie or request item.

These values can also be used for properties and settings in workflows. This means you can use name and email fields from a form to create a personal 'Thank you' email.

This builds on the "" article

Add a new class to your project - inherit it from Umbraco.Forms.Core.FieldPreValueSourceType and implement the class.

The following example shows an illustrative custom prevalue source type that returns a hard-coded list of values. It can be extended for your needs via injection of services via the constructor. (See additional example at the bottom.)

Dynamic settings can be applied and validated as shown in the article.

You will then need to register this new prevalue source type as a dependency.

There are multiple built-in Workflow Types that can be used to extend the functionality of your form. Do you want to post the submitted form as XML, send the data as an email, or send a notification through another messaging system? These are a few of the options you can choose when working with Umbraco Forms.

Video Tutorial