Welcome > User interface > Forms > Form elements > Layout

Layout

Columns, rows and cells help in arranging your form content. A form is created with a single column and single cell by default. You can add more columns, rows and cells to a form.

Add a column to a form

Use columns to divide a form vertically into equal parts. For example, if you add one column, the form is divided into two equal parts; if you add two columns, the form is divided into three equal parts.

  1. On the Design tab, click Form elements.
  2. Expand Layout and click Column.
  3. In the properties panel, change the default width as needed.

    The width mode (fixed or percentage) of column depends on the form level setting (see General properties of form). The maximum fixed width of the column cannot be more than 3000px.

    Note To delete a column, select the column and click that appears on top of the column.

Add a row to a form

Add rows to horizontally divide the form into panels.

  1. On the Design tab, click Form elements.
  2. Expand Layout and click Row.
  3. In the properties panel, change the default values as needed.

    Note To delete a row, select the row and click that appears on the top of the row.

Add a cell to a form

Add cells to create sections in a form.

You can add cells to a form or to a column within a form. To add a cell to a form, click the form outside of the column or to add a cell to a column within a form, click within a column.

  1. On the Design tab, click Form elements.
  2. Expand Layout and click Cell.

    A cell is added to the form.

  3. Configure the properties of cell. The properties of a cell are described under the following tabs:

    • General

      Name Name for the cell to make the cell easier to identify during mapping.

      By default, the cell ID appears as the name of the cell.

      Title

      A title for the cell that appears at runtime if the cell is set to collapsible.

      Security token

      Restricts access to the cell contents at runtime by applying a security token to a cell. See Security tokens.

      Note You can use the same security token for multiple cells. Importing or exporting a form includes security tokens associated with a cell.

      Orientation

      Vertical: Displays the cell controls vertically.

      Horizontal: Displays the cell controls horizontally.

      Visible

      Makes the cell visible at runtime.

      Note If the cell is set as hidden, all the controls within the cell are hidden. If you want to hide only some controls in a cell, place those controls in a different cell.

      Collapsible

      If selected, make the cell collapsible (collapse or expand) at runtime.

      You must set the Header style (Theme, Inline or Class) for a collapsible cell.

      Collapsed

      If selected, the cell is collapsed by default at runtime.

      Note This property does not apply to Phone and Tablet forms.

    • Design

      Width mode

      The width of a cell can be Fixed (in pixels) or in Percentage (relative to the browser window).

      Note

      • The default width mode for a cell is Percentage. However, you can switch the width mode from percentage to fixed width and vice versa.

      • The percentage option for the cell is only available if the form width is set to Percentage mode.

      Width

      The width of a cell.

      Min height

      The minimum height of the cell.

      Padding

      The space between the text inside a cell and the cell border. Enter the values for the Left, Top, Right and Bottom padding. (Default: 0,0,0,0)

      Alignment

      The alignment for the controls ( Left, Center or Right) within a cell.

      Note If a cell has many controls with horizontal orientation, and the alignment is left, center or right, some of the controls may get cut off at runtime.

      Margin

      The margins of the cell. (Default: 0,0,0,0)

      Style

      The style of a cell can be a predefined theme, an inline style or a class.

      • Theme: A predefined theme.

        Themes are defined globally (outside of forms and sites) and are then associated with a site. Forms are rendered as part of a site. The theme associated with the site determines the style for the controls.

      • Inline: Set the Border, Border color and Background for the cell. To use a background image for the cell, do the following:

        1. Select Use background image.

        2. To use a custom image, enter the name of the image in the Image path field. Or to use a predefined image, select Load image from store and select the image.

        3. To allow resizing of image to fit the cell, select Resize to fit.

        Note The inline styles override the default theme.

      • Class: A CSS class. This class must be available in the style sheet that is associated with the theme. Otherwise, the cell uses the default style.

    • Associations

      See Associations.

    Note

    • To delete a cell, select the cell and click that appears on top of the cell. You cannot delete a cell if the cell or any of the controls within the cell are in use.

    • When you copy and paste a cell, the cell and its contents are copied and pasted.