Create a custom form element category

Sitecore Forms come with default form elements that you can use when you create your form. To make it easier to find the elements that you want to use, all the elements are organized in categories, such as Basic, Lists, Structure, and Security.

You can collapse or expand these element categories, so that you do not have to scroll through a lengthy list of all the available elements. If you create a custom form element, you might also want to create a custom section.

To create a custom section in the Form Elements pane:

1. In Sitecore Rocks, expand the core database, go to /sitecore/client/Applications/FormsBuilder/Pages/FormDesigner/PageSettings/InfoTabControl/, right-click Design, click Task, and then click Design Layout.

2. In the Design Layout window, click Add Rendering, and in the Select Renderings dialog box, find the Expander rendering and click Add.

   
   

3. Open the properties window of the Expander rendering to change the ID. For example, change its ID to ExpanderCustomSection.

4. To give your custom section the same styling as the other sections, in the Appearance section, set the VisualStyle to ContextPane.

   

5. In the Design Layout window, click Add rendering, and in the Select Renderings dialog box, find the DraggableElementList rendering and click Add.

6. Open the properties window of the DraggableElementList rendering to change its ID. For example, change its ID to DraggableCustom and update the Placeholder to ExpanderCustomSection.Body

   

7. Create a custom item from the DraggableElementList-Parameters template. Navigate to /sitecore/client/Applications/FormsBuilder/Pages/FormDesigner/PageSettings/InfoTabControl/Design/, right-click PageSettings and add an item based on the DraggableElementList-Parameters template.

   The name of the item must be same as the ID of the DraggableElementList rendering. In this example: DraggableCustom.

8. Edit the DraggableElementList parameter. Set its Database field value to master and set StaticData to the ID of your custom folder located under the /sitecore/system/Settings/Forms/Field Types item in the master database. Update DisplayFieldName to $displayName.

   Note

   If you do not have any custom fields yet, you can use any existing folder under the Field Types node for testing purpose, for example the Basic folder ({B5350D9A-CEEE-4D15-B9FF-797CEACCCDC7}).

9. Create a custom item from the Expander Parameter template. Right-click Page Settings and add an item based on the Expander Parameter template. Make sure the name of the item is the same as the Expander rendering, in this example, ExpanderCustomSection.

   

10. Edit the Expander Parameter. To name your custom section, fill in the HeaderText field and select the IsVisible check box.

    After performing these steps, the custom section is visible in the Form elements pane.