Form Layout
Introduction
Feature(s)
When designing the form layout, you can arrange form fields, set title styles, adjust input box width, and so on. This will make your form layout more reasonable and appealing, thus enhancing the efficiency of data filling.
Application Scenario(s)
- When collecting employee or customer information, you may want to collect a lot of data. Then you can make the form display multiple columns, therefore the form will not be too lengthy.
- You can also design the form layout on PC and mobile respectively. Therefore, users on both ends can fill out the form efficiently.
Preview
For example, in the Employee Information form, fields are displayed in multiple columns.
Setting Procedure
Where to Set
Click Design > Form Properties > Form Layout.
Setting the Number of Columns
Form layout supports four types of arrangement: Single Column, Two Columns, Three Columns, and Four Columns. When you design a form with multiple fields, you can set it to three or four columns. Members can avoid frequently sliding the form page, which is convenient for them to fill in data.
Note:
The multi-column form layout is only available on PC. The mobile version only supports a single-column layout.
More Settings
Click 
1. Switch to set form layout on PC/mobile.
On the Form Layout page, you can make settings for the layout on the PC and mobile ends respectively. You can also preview the layout you have arranged. For both the PC and mobile ends, you can customize the settings for Field Name Position, Field Name Style, Field Description Style, and Input Box Width (this can only be configured on PC).
2. Field Name Position
Field Name Position can be set to Up and Down and Left and Right layout. Different layout methods will display different effects:
- Up and Down
- Left and Right
3. Field Name Style
When Field Title Position is set to Left and Right, you can set Width and Align in Field Name Style:
- Width: You can customize a value ranging from 50 to 500 px.
- Align: The alignment of the field name is set to left-aligned and right-aligned.
4. Field Description Style
When Field Title Position is set to Left and Right, Field Description Information can be set to Display or Hide.
If you tick Display, the description information will be displayed directly below the input box. If you tick Hide, the description information will be displayed as a small hint, and the corresponding description information will pop up when you click the hint symbol.
Note:
1. When Field Title Position is set to Up and Down, the field description is displayed below the field title by default.
2. The field description information of the Divider is always displayed.
5. Input Box Width
Input Box Width can be set to Standard or Auto.
- Standard: The input box is displayed with a fixed width regardless of changes in the form page.
- Auto: When the form page becomes wider, the input box fills 100% of the screen column width.
Note:
Only when you set the form to display in multiple columns can you set Input Box Width.
Example:
