Adding a Custom Form Element with Rich Text Field to Sitecore Forms

When I started working on Sitecore Forms, the very first thing that surprised me is that Sitecore doesn’t provide an Rich Text (HTML Raw) field OOTB. It do provides a Text field which can help us in providing the context about the forms.

But…In certain situations, we might need some Rich Texts to be included in the form like an Anchor Tag or some other HTML Elements that is not just texts.

These scenarios can however be handled in several ways, like adding a separate rendering that can in turn call the System->MVC Form using it’s ID and then passing on the data source to it and then adding the required Rich Text Contents Statically in the Rendering.

But this can’t help at all times and it doesn’t make the form customizable down the lane. It allows you only to add the html elements by the beginning/end of the forms.

However, just like every other components in Sitecore, Even in Sitecore Forms you can add custom fields. In fact they have provided a decent documentation on how this can be done here. The article provides a better view on the steps to be followed for creating Custom Form Elements. It is for creating a Video Element.

Making use of it, creating a Custom Form Element – Rich Text Field thought I could share some of my experience here.

Step 1: Create a Rich Text Template with a field of Rich Text type. Remember to create the Custom Field in the path /sitecore/templates/System/Forms/Fields/Custom Fields/Rich Text based on the /sitecore/templates/System/Forms/Fields/Field template or create one using System template and inherit Field, Label Settings

• Now, we have to create the standard template. The Standard Value will be referred when loading the custom element to the form (Dragging/Dropping) hence it is important to add them. Else, we will be facing issues while loading the elements to the form.

Step 2: Create a Model/View for the Custom Form Element.

• Model to be inherited from Sitecore.ExperienceForms.Mvc.Models.Fields.FieldViewModel so that we can override InitItemProperties and UpdateItemFields, where we will set and update the field value when we create and update Field in Form Editor or Under Sitecore/Forms in Content Editor.

• Now we will create a View that renders this Custom Field Value in the Form while rendering it the browser. Key point to note is, Sitecore has the Form Field’s Views under Views/FormBuilder/FieldTemplates/. It is best to keep the Custom Form Elements View here as well. Create a similar folder structure in the Visual Studio Solution and add the view there.

Since, we have nothing much to add to the Rich Text like tracking or styling or validating we can leave it here as it is.

Step 3: Creating Form Section Elements in Core Database.

These steps are just to show the way to add the sections and other styling/validation details in the Form Editor. It can be extended based on the custom field’s requirement.

• Create a item for Rich Text based on the template “/sitecore/client/Business Component Library/version 2/Layouts/Renderings/Forms/Form/Form Parameters ” under “/sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings/” name it “Rich Text”

• One key point to be noted here is we won’t be able to insert the item via Insert-> Insert from Template. As the Insert Options for the parent item – Property Editor Settings is configured in such a way 😦 So, you can either copy the other items like Text and alter as per our requirement or you can use Sitecore Rocks and do the changes.
• Under Rich Text create a item based on the template /sitecore/client/Applications/FormsBuilder/Common/Templates/FormSection and name it Details. Or you can copy the details item from Text (/sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings/Text)
• Under Details add an item Rich Text based on the template /sitecore/client/Business Component Library/version 2/Layouts/Renderings/Forms/Form/Templates/FormTextBox Parameters. (Although this is not required for now, just add the FormLabel element and update the RenderingitemId with the below values.

• Now, add the created Rich Text in the Details item – ControlDefintions and  update the Configurationsitem.

Step 4: Now the final act, piecing things together,

• Create an item of type, /sitecore/templates/System/Forms/Field Type under /sitecore/system/Settings/Forms/Field Types/Basic so that this field type is displayed under Basic Section of the Field types in the Form Editor.

• Fill in the fields with the values, provide the View Path (Path of our .cshtml file created for rendering the field) , the Model Type – the Rich Text Model Namespace and Assembly.
• In the Property Editor select the one which we created.

• Finally, update the Template – Rich Text which we created first in the Field Template field.

All Set now and when we open the Form Editor include the Rich Text to the Form,

Finally, when rendered,

Ignore the poor choice of use case for the custom field.

NOTE:

1. We wouldn’t be able to show the Rich Text Field in the Form Editor section as of now. This is because, if we have to do so, we have to create a FormRichTextBox Parameter template/item and include corresponding rendering and relevant items. Which will allow us to add/edit the rich text content in the Data Section of the Field in the Form Editor Screen.
2. I would have written in a way to add the Data Section here and the binding details for rich text which don’t use. I added them so that it will be considered while developing custom fields that actually requires such sections.
3. Now, to the point, we can edit this Rich Text Field via Content Editor. Access the forms under Sitecore/Forms/

Update:

• You can fix the issue (Not being able to update the field value in form designer screen) by updating the custom field model property in core DB- Property Editor Setting – Binding Configuration to camelCase as below