---
title: "Create a custom form element category"
slug: "create-a-custom-form-element-category"
abstract: "Create a custom section for your custom elements."
---
# 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.

![Form elements sections.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/102/sitecore-experience-manager/images/FORMS-elements-pane.PNG)

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](https://doc.sitecore.com/xp/en/developers/102/sitecore-experience-manager/walkthrough--creating-a-custom-form-element.html "Walkthrough: Creating a custom form element"), you might also want to create a custom section.

![Custom form elements section example.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/102/sitecore-experience-manager/images/FORMS-custom-expander.PNG)

To create a custom section in the **Form Elements** pane:

1. In [Sitecore Rocks](https://marketplace.visualstudio.com/items?itemName=JakobChristensen.SitecoreRocks), 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**.

    ![Design.layout](https://doc.sitecore.com/api/markdown-image/xp/en/developers/102/sitecore-experience-manager/images/FORMS-DesignLayout.PNG)

    ![Select Renderings dialog box.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/102/sitecore-experience-manager/images/FORMS-expander.png)

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`.

    ![Properties window of the Expander rendering](https://doc.sitecore.com/api/markdown-image/xp/en/developers/102/sitecore-experience-manager/images/FORMS-custom-expander-styling.png)

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`

    ![Renderings and Placeholders window](https://doc.sitecore.com/api/markdown-image/xp/en/developers/102/sitecore-experience-manager/images/FORMS-custom-expander-renderings.png)

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`.

    ![InfoTabControl structure tree](https://doc.sitecore.com/api/markdown-image/xp/en/developers/102/sitecore-experience-manager/images/FORMS-expander-custom.PNG)

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.

    ![Form elements pane](https://doc.sitecore.com/api/markdown-image/xp/en/developers/102/sitecore-experience-manager/images/FORMS-custom-expander.PNG)