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.

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.

1. Navigate to Designer > Form Designer > Design Form tab. A sample screenshot is shown below:
   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:
   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:
   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:
   
   

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:
   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:
   
   
   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:
   
   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:
   Figure: Preview Button
   
   
2. 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.