--- title: "Form Elements" slug: "form-elements" updated: 2024-06-18T16:11:12Z published: 2024-06-18T16:11:13Z canonical: "help.symphonysummitai.com/form-elements" --- > ## Documentation Index > Fetch the complete documentation index at: https://help.symphonysummitai.com/llms.txt > Use this file to discover all available pages before exploring further. # Form Elements Form Elements provides a quick outline about the form. Form Elements will be displayed to the end-user at the configured placeholders on the form. **User Persona**: Application Designer The following infographic depicts the different form elements: ![Form_Elements](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/Form_Elements.gif?sv=2026-02-06&spr=https&st=2026-11-05T10%3A07%3A03Z&se=2026-11-05T11%3A07%3A03Z&sr=c&sp=r&sig=SMdS0iQtEm4TaS%2FIohTZYt2lqH6NHCNBBQBOc%2BRvlbU%3D) Figure: Form Elements Tip!Keep the Form Elements on the top of the form for a quick form introduction. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/Final_Example_Doc360_v2.JPG?sv=2026-02-06&spr=https&st=2026-11-05T10%3A07%3A03Z&se=2026-11-05T11%3A07%3A03Z&sr=c&sp=r&sig=SMdS0iQtEm4TaS%2FIohTZYt2lqH6NHCNBBQBOc%2BRvlbU%3D) Let's explore the following use-case. | **Use Case** **User Persona: Application Designer** | **Solution** | | --- | --- | | To Application Designer Sam wants to create an interface for one of his forms named Priority Details where the basic form details such as name of the form, description, form path, current date and current time should get displayed on the form. Additionally, he wants to provide an image to form. These details should appear on the topmost section of the form and he should be able to modify the positioning of the above elements as needed. | To achieve this, Fredrick can drag and drop the form objects under **Controls** > **Form Elements**. Drag the form elements such as **Form Name**, **Form Description**, **Form Path**, **Form Image**, **Current Date** and **Current Time** on the top of the form. These options will be displayed on the **Priority** **Details** form for the end-user to help them in understanding the form overview. To add a form image, he has to browse and upload the required image. All other options are displayed with already pre-configured values. | ### Configure Form Elements Let's configure the form elements! To configure the form elements, perform the following steps: 1. Navigate to **General** tab of Form Designer. Enter all mandatory details required for the Form. 2. In **Design Form** tab, from the left pane select **Controls** > **Form Elements**. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1673266643838.png?sv=2026-02-06&spr=https&st=2026-11-05T10%3A07%3A03Z&se=2026-11-05T11%3A07%3A03Z&sr=c&sp=r&sig=SMdS0iQtEm4TaS%2FIohTZYt2lqH6NHCNBBQBOc%2BRvlbU%3D)Figure: Form Elements Drag and drop the required form element to get the desired results. There are following 6 types of form elements: 1. Form Name 2. Form Description 3. Form Image 4. Form Path 5. Current Date 6. Current Time #### Form Name Drag and drop it to use the already defined Form Name, while Form Creation. It can be placed anywhere on the form as per the requirement. The **Form** **Name** field value is derived from the pre-configured **Name** field on **General** tab. #### Form Description Drag and drop it to use the already defined Form Image, while Form Creation. It can be placed anywhere on the form as per the requirement. The **Form** **Description** field value is derived from the pre-configured **Description** field on **General** tab. #### Form Path Drag and drop it to display the form path, which is already defined, while Form Creation. It can be placed anywhere on the form as per the requirement. The **Form** **Description** field value is derived from the pre-configured **Form Type** field on **General** tab. #### Form Image Drag and drop it to insert an image for the form. Click on the Form Image icon and browse the location of the desired image. The selected image gets reflected for the end-user on the form. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1673271521941.png?sv=2026-02-06&spr=https&st=2026-11-05T10%3A07%3A03Z&se=2026-11-05T11%3A07%3A03Z&sr=c&sp=r&sig=SMdS0iQtEm4TaS%2FIohTZYt2lqH6NHCNBBQBOc%2BRvlbU%3D)Figure: Form Image #### Current Date Drag and drop it to display the system current date. #### Current Time Drag and drop it to display the system current time. You can view the following tabs for form element: #### Properties This section contains the list of properties using which the Application Designer can configure the respective form name. To know more about the fields that are available under the **Properties** section, see Field Description given below. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1686207139272.png?sv=2026-02-06&spr=https&st=2026-11-05T10%3A07%3A03Z&se=2026-11-05T11%3A07%3A03Z&sr=c&sp=r&sig=SMdS0iQtEm4TaS%2FIohTZYt2lqH6NHCNBBQBOc%2BRvlbU%3D)Figure: Form Name **Field Description** The following table contains a brief description on **Form Name** fields. | Field Name | Description | | --- | --- | | **General** | | | Title | Specify the title of the form name. This name identifies the form name on the form. | | Include Label | If enabled, then the configured label gets displayed on the form. If not enabled, then the configured label gets displayed on the form. | #### Apppearance This section contains the list of validation setups using which the Application Designer can configure the respective control as mandatory, based on condition etc. To know more about the fields that are available under the **Appearance** section, see Field Description given below. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1686208537591.png?sv=2026-02-06&spr=https&st=2026-11-05T10%3A07%3A03Z&se=2026-11-05T11%3A07%3A03Z&sr=c&sp=r&sig=SMdS0iQtEm4TaS%2FIohTZYt2lqH6NHCNBBQBOc%2BRvlbU%3D) Figure: Appearance **Field Description** The following table contains a brief description on **Form Name** fields. | Field Name | Description | | --- | --- | | **Form Label** | | | Font Type | Select the type of the font from the drop-down list of available options of font type. | | Font Color | Select the type of the font color from the color widget from the provided set of color options. Click ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1678444957448.png?sv=2026-02-06&spr=https&st=2026-11-05T10%3A07%3A03Z&se=2026-11-05T11%3A07%3A03Z&sr=c&sp=r&sig=SMdS0iQtEm4TaS%2FIohTZYt2lqH6NHCNBBQBOc%2BRvlbU%3D) option to select the required color from the displayed color widget. A sample screenshot is shown below: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1678445276112.png?sv=2026-02-06&spr=https&st=2026-11-05T10%3A07%3A03Z&se=2026-11-05T11%3A07%3A03Z&sr=c&sp=r&sig=SMdS0iQtEm4TaS%2FIohTZYt2lqH6NHCNBBQBOc%2BRvlbU%3D)Figure: Color Widget | | Font Size | Select the size of the font from the drop-down list of available options of font type using upwards or downwards arrows. A sample screenshot is shown below: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1679378615473.png?sv=2026-02-06&spr=https&st=2026-11-05T10%3A07%3A03Z&se=2026-11-05T11%3A07%3A03Z&sr=c&sp=r&sig=SMdS0iQtEm4TaS%2FIohTZYt2lqH6NHCNBBQBOc%2BRvlbU%3D)Figure: Font Size Slider | | Font Style | Select the required font style. Available options are as follows: - B - Select it to make the heading bold. - I - Select it to make the heading italics. - U - Select it to make the heading underlined. | ### Edit Form Elements Rearrange or reshuffle the form objects as per the requirement. To edit the form elements, perform the following steps: 1. Navigate to the required from using **Design** **Studio** > **Form Designer**. 2. Select the required form. Open the form in edit mode. 3. In **Design Form** tab, from the left pane select **Controls** > **Form Elements**. The modified locations get reflected in the form for the end-user.