Umbraco Forms 12+, Custom Field Type

This is an addition to my previous post about Umbraco Forms.

This time let's create a custom field!

Sometimes we need fields that are not visually rendered in the FE, but the FE still needs to pass those values on a form submission. I'm sure you can instantly think of a few use cases for this.

In my case, I needed to have a text string field for the address, and then FE was responsible for having a postcode look up and sending back 5 different fields to the BE and then to a custom workflow.

Let's dive right into how with steps;

1-Install Umbraco Forms for your Umbraco 12+ project
dotnet add package Umbraco.Forms

You'll need to buy your license for your domain when you go live!

2-Create a custom field type;

public class AddressLookupField : FieldType
{
    public AddressLookupField()
    {
        Id = new Guid("2e26a579-2859-44fa-8778-fcdab81675d2");

        Alias = "addressLookup";

        Name = "Address Lookup";

        Description = "Address Lookup";

        Icon = "icon-terminal";

        DataType = FieldDataType.String;

        FieldTypeViewName = "FieldType.AddressLookupField.cshtml";

        SortOrder = 10;

        SupportsRegex = true;
    }

    public override IEnumerable<string> ValidateField(Form form, Field field, IEnumerable<object> postedValues, HttpContext context, IPlaceholderParsingService placeholderParsingService, IFieldTypeStorage fieldTypeStorage)
    {
        var returnStrings = new List<string>();

        return base.ValidateField(form, field, postedValues, context, placeholderParsingService, fieldTypeStorage, returnStrings);
    }
}

This class is for backoffice to understand there's a new field type to be added to the forms field types.
Here you can see it's now available as an answer type

3-We also need a .html file to display this field in the back office;
Add the following code to the path;
App_Plugins/UmbracoForms/backoffice/Common/FieldTypes/addresslookupfield.html

<input type="text" tabindex="-1"
       class="input-block-level"
       style="max-width: 300px" />

Now we can see the field too

4-Create a .cshtml file to
Views/Partials/Forms/themes/customProjectThemeFolder/FieldTypes/FieldType.AddressLookupField.cshtml

Here's the .cshtml will look like;

@model Umbraco.Forms.Web.Models.FieldViewModel
@using Umbraco.Forms.Web

<input type="text" name="addressLookup" id="addressLookup" class="text" value="@Model.ValueAsHtmlString" maxlength="500" />

<input type="hidden" name="addressLine1" id="addressLine1" class="text" value="@Model.ValueAsHtmlString" maxlength="500" />

<input type="hidden" name="addressLine2" id="addressLine2" class="text" value="@Model.ValueAsHtmlString" maxlength="500" />

<input type="hidden" name="city" id="city" class="text" value="@Model.ValueAsHtmlString" maxlength="500" />

<input type="hidden" name="postcode" id="postcode" class="text" value="@Model.ValueAsHtmlString" maxlength="500" />

<input type="hidden" name="country" id="country" class="text" value="@Model.ValueAsHtmlString" maxlength="500" />

As you can see, we only display the actual addressLookup field and there are 5 more additional fields that are hidden.

This is how you create a custom field!

Let's use this on a workflow;

When a form is submitted and you get your record fields by;
records.GetRecordFieldByAlias("addressLookup")?.Values; you get an array of the fields you had hidden!

Here's what my payload looks like

And Umbraco forms are smart enough to pick it up in the submissions!

Hope this helps someone!
B