Grid Layout

Your form layout structure can be easily manipulated using the Grid Layout feature. After you've added the desired fields in your form, head over to Form Properties > Grid Layout.

The Grid Layout generator provides a faster on-demand swapping possibility, using a drag and drop functionality. This allows a quick field arrangement by constructing rows that can have a configurable number of columns and since each row can have its own separate number of columns, you can make various combinations of separate rows, some that have 1 or 2 fields on the same line along with other rows that can have 3 or 4 fields aligned horizontally.

 
Starting

Accessing the Grid Layout provides the following configurable options:

  • Row:
    • Options: you can change the current row number of columns (1, 2, 3 or 4).
    • Add New Row: this will add a new row where you can choose the number of columns before adding it.
    • Delete Row: row will be deleted. Note that this only works if the row is empty (you can move fields from your row by dragging them into another separate row).
  • Form Elements (same operations can be performed normally while editing your form):
    • Edit: this opens the element in question configurable tab. For example, like editing your textbox element.
    • Delete: this will removes your form element.
 
Utility
Fields

Fields can be moved at any time from one row to another, from one row column to another column or from one column to another entirely different row, basically you can move your fields freely between your Grid Layout scheme positions.

You can also cut & paste fields from one layout position to another. This is done by right clicking on a form element and by selecting Cut (multiple fields can be cut at the same time by repeating this process before pasting). Eventually, right-clicking on another column, even from a different row, will provide a Paste option.

Columns

Columns can be further tweaked independently by adjusting their size/ratio of the current row. If you have more than 1 column on a row, use the "3 vertical dots" (found between your columns - check screenshot) to resize them, offering more or less space.

Resizing columns basic steps:

  • Click and hold above the "3 vertical dots" icon.
  • Move left or right until the desired column width is visually shown.
  • Release to set.
 

Note:

Hidden fields will be sorted as a group at the bottom of the form in their own separate row (there's no need to modify or change their layout position as these aren't actually shown in the frontend area).


13 persons found this article helpful.


Was this article helpful?

Yes No
Sorry about that