--- title: "Overview" slug: "overview-prelude-d" updated: 2024-10-23T09:19:39Z published: 2024-10-23T09:19:39Z canonical: "help.symphonysummitai.com/overview-prelude-d" --- > ## 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. # Overview The primary purpose of the **Design Form** tab is to visually configure the layout and appearance of the form with modern and intuitive user interface. It is the second stepper of form designing. It allows you to create aesthetically and stunning forms without much technical expertise. Design without limits with our 50+ form controls. The following infographic depicts the Design Form capabilities. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1722841377226.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D) ## Drag and Drop Control The Drag and Drop mechanism offers the complete flexibility to design the form more efficiently. It has a plethora of draggable controls to design a form. These draggable controls are further divided into logical groups such as Form Controls, Survey Controls, Form Actions, Form Elements and so on, as per their usage for better user experience. A sample screenshot is shown below: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683529275477.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D) Figure: Drag and Drop Controls These controls groups are further expandable to select the required control using the expand icon. A sample screenshot is shown below: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683529401328.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D) Figure: Expandable - Survey Controls ## Configure Control Perform the following steps to configure a control. 1. Navigate to **Designer** > **Form Designer** > **Design Form** tab. A sample screenshot is shown below: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683532954505.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D)Figure: Design Form 2. Navigate to the left panel and expand the required group from where you want to drag and drop the control. A sample screenshot is shown below: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683533194688.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D)Figure: Drag and Drop Controls 3. Configure the draggable control on the Form Designer canvas using the gear icon. A sample screenshot is shown below: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683529673803.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D) Figure: Settings Icon 4. Click Settings icon to configure the properties of the respective control. You can configure the properties mentioned under various tabs such as **Properties**, **Appearance** and so on. It may have a few mandatory configurations as well denoted by * symbol. A sample screenshot is shown below: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683529796206.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D) Figure: Configure Properties You can configure the various properties of a control to customize its look and feel. ## Edit Control You can edit the already configured properties of any control. Perform the following steps to edit a control: 1. Navigate to **Designer** > **Form Designer** > **Design Form** tab. Click on the required control which you want to modify and click on the gear (settings) icon. The configure properties pop-up is displayed. A sample screenshot is shown below: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683546041984.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D)Figure: Edit Control 2. Modify the required configurations and click **Save.** The modified parameters are saved. ## Delete Control You have the flexibility to delete a control from the form designer canvas. Perform the following steps to delete a control: 1. Navigate to **Designer** > **Form Designer** > **Design Form** tab. Click on the required control which you want to delete. 2. Click Delete icon. The following validation message is displayed: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683546945942.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D) Figure: Pre-Delete Confirmation Message 3. Click **No** if you do not want to continue with control deletion. It will take you back to the previous screen. Click **Yes, Delete** if you want to continue with control deletion. It will delete the control and displayed a confirmation message after deleting the control. A sample screenshot is shown below: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683547324140.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D)Figure: Post Delete Confirmation Message 4. Click **Save**. The selected control is deleted from the Form Design canvas. ## Preview Form Sneak peek a form design before it available to the consumer. It will help the Application Designer to view the form before it gets finally published. You view the form how it is rendered on different mediums such as Desktop, Laptop or Mobile. The following infographic depicts the Preview Form options: Perform the following steps to preview a form: 1. Navigate to **Designer** > **Form Designer** > Select the required form > **Design Form** tab. The form with available controls is displayed. A sample screenshot is shown below: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683612949737.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D)Figure: Preview Button 2. Click **Preview**. The following page is displayed: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683613075502.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D)Figure: Preview Page You can see the preview of the form in Desktop view, Tablet view or Mobile view. ### Desktop View Click on Desktop icon on Preview page to view the form in Desktop view. By default, the **Preview** page opens in Desktop view. A sample screenshot is shown below: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683613644090.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D)Figure: Desktop View Select the required desktop screen resolution from the **Resolutions** drop down list. Available options are shown in the following screenshot: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683615189300.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D)Figure: Preview - Desktop Resolution ### Tablet View **Click on Tablet icon on** **Preview** **page to view the form in tablet view. You can view it in the following two forms:** - **Portrait** - **Landscape** **By default, the landscape view is displayed. A sample screenshot is shown below:** ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683617061836.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D) Figure: Tablet View - Landscape Click on **Portrait** tab to view the form in Tablet Landscape. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683616780191.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D)Figure: Tablet View - Portrait ### Mobile View **Click on Mobile icon on** **Preview** **page to view the form in mobile view. You can view it in the following two forms:** - **Portrait** - **Landscape** **By default, the portrait view is displayed. A sample screenshot is shown below:** ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683617061836.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D) Figure: Mobile View - Portrait Click on **Landscape** tab to view the form in Mobile Landscape. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683616780191.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D)Figure: Mobile View - Landscape Here are some sample screenshots of a few forms. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/Mobile_View_My_Service_Requests.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D) Figure: My Service Requests Form ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/Mobile_View_My_Service_Requests_List_Page.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D) Figure: My Service Requests List Page ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/Mobile_View_New%20Service%20Request_Form.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D) Figure: New Service Requests Form **Actions** The following table describes the action of the buttons on the Preview page. | Action | Description | | --- | --- | | ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683631844449.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D) | To expand the Preview page in full screen mode. | | ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1683631880979.png?sv=2026-02-06&spr=https&st=2026-11-08T16%3A07%3A50Z&se=2026-11-08T17%3A07%3A50Z&sr=c&sp=r&sig=SqHXCA61bpKJNGbjal9wFgd%2BsL1Zy64T%2BeionQG%2F7%2Bk%3D) | To close the Preview page. | | Reset | To reset the configurations of the Preview page. This option is visible if Preview mode is selected as Desktop. | | Cancel | To cancel the configurations of the Preview page. | | Save | To save the configurations of the Preview page. | ## ### ###