How to create your own custom fields in Umbraco Forms
Charles Afford
Director
Thursday, 07 March 2024
Less than a minutes read
1. Create a class inheriting a field type from, for example, FieldTypes.DropDownList
I had to use the dedication:
using FieldTypes = Umbraco.Forms.Core.Providers.FieldTypes;
public class Example : FieldTypes.DropDownList
{
}
For fields in Umbraco you wish to use on your new field type you can use the following. I looked inside FieldTypes.DropDownList and FieldTypes.Textbox for the values
[Setting("example field name", Description = "example description name", View = "the view type (TextField for example)")]
2. You need to declare a public constructor and add properties. I looked inside FieldTypes.DropDownList and FieldTypes.Textbox for these values
public Example()
{
The most important two are ID and FieldTypeViewName
FieldTypeViewName will be the name of the .cshtml file you have added in your Fieldtypes folder within your custom theme folder.You can copy the default FieldType cshtml file (Use Google and get the ones for the default theme) and modify that
/Views/Partials/ThemeName/Fieldtypes/FieldTypeViewName.cshtml
ID must be a unique GUID without the -
Id = new Guid("42F550238C484C13A326DC3C47F4503B");
FieldTypeViewName = "FieldType.CustomInlineDropdownlist.cshtml";
Add other values here I looked inside FieldTypes.DropDownList and FieldTypes.Textbox for these values
}
The most important public property is the below, its overidden from the interface. This tells Umbraco how to render this field in Umbraco.
I just copied from the existing html files (I did a google to find them)
public override string GetDesignView() =>
"/App_Plugins/UmbracoForms/Backoffice/Common/FieldTypes/CustomInlineText.html";
