Skip to main content
Version: Next

Layout (Arrangement)

Introduction​

To achieve a structured and user-friendly form, it is recommended to first define the Layout before adding fields. Using containers (Tables, Sections) allows you to create a solid positioning grid.

[!TIP] Do not place your fields directly on the page background ("randomly"). Always start by drawing the structure (Tables) to house your fields.

Containers​

These elements are available in the Elements tab of the ribbon.

Elements Tab

Tables​

The table is the basic element for structure.

  1. Insert a table into your form.
  2. Define the number of columns (e.g., 2 or 4 for a balanced form).
  3. Then drag your labels and fields into the cells.

Table Toolbar: As soon as a table or cell is selected, a contextual toolbar appears:

Table toolbar

It allows you to:

  • Insert rows/columns.
  • Merge/Split cells.
  • Define borders and background colors.

Sections​

Sections allow you to create collapsible blocks (accordions).

  • Useful for hiding secondary information by default.
  • Can contain tables and fields.

IFrame and Embedded Views​

To display external content or a list of documents (View) directly in the form.

Tab Management​

For dense forms, tabbed display is recommended. Tab management is done during form Publication (or via a specific "TabContainer" component).

During publication:

  1. Click the Tab button Tab Icon.
  2. Define the beginning of a tab and its title.
  3. Insert the components (.ascx pages) that should appear in this tab.
  4. Repeat for the following tabs.
  5. End with "End of tabs".

Publication with tabs

Design Best Practices​

[!TIP]

  • Alignment: Use tables to properly align labels and input fields.
  • Consistency: Keep an identical structure across all your forms (e.g., common header, common footer).
  • Spacing: Don't hesitate to insert blank lines or spacing to improve readability.