- 05 Aug 2024
- 4 Minutes to read
- Print
- PDF
Overview
- Updated on 05 Aug 2024
- 4 Minutes to read
- Print
- PDF
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.
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:
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:
Figure: Expandable - Survey Controls
Configure Control
Perform the following steps to configure a control.
- Navigate to Designer > Form Designer > Design Form tab. A sample screenshot is shown below:
Figure: Design Form - 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:
Figure: Drag and Drop Controls - Configure the draggable control on the Form Designer canvas using the gear icon. A sample screenshot is shown below:
Figure: Settings Icon - 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:
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:
- 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:
Figure: Edit Control - 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:
- Navigate to Designer > Form Designer > Design Form tab. Click on the required control which you want to delete.
- Click Delete icon. The following validation message is displayed:
Figure: Pre-Delete Confirmation Message - 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:
Figure: Post Delete Confirmation Message - 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:
- 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:
Figure: Preview Button - Click Preview. The following page is displayed:
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:
Figure: Desktop View
Select the required desktop screen resolution from the Resolutions drop down list. Available options are shown in the following screenshot:
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:
Figure: Tablet View - Landscape
Click on Portrait tab to view the form in Tablet Landscape.
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:
Figure: Mobile View - Portrait
Click on Landscape tab to view the form in Mobile Landscape.
Figure: Mobile View - Landscape
Here are some sample screenshots of a few forms.
Figure: My Service Requests Form
Figure: My Service Requests List Page
Figure: New Service Requests Form
Actions
The following table describes the action of the buttons on the Preview page.
Action | Description |
To expand the Preview page in full screen mode. | |
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. |