Position Controls on Forms

You have many options for positioning controls in your form.

Rows and Columns

You can drop and position controls onto a form in rows and columns. Rows and columns are defined based on where you want to drop your control.

  • Each row has a drop target on the top and bottom.

  • Each column has a drop target on the left and right.

Each time you drop a control onto the canvas, the control is placed in a new row. If you drop a control beside another control, then that control is added to the same row but in a new column. The column size is based on the number of controls in a row.

The row is based on a 12-column grid system. For example, if the row has four controls, then each uses three columns. When more than 12 controls are added to a row, the remaining controls are displayed below the table.

Panels, Sections, and Tabs

You can group different controls inside a single control by using panels, sections, and tabs.

A Panel control allows you to group multiple controls inside it. Drag and drop controls inside a panel and position them as you would in the canvas.

A Section control is similar to a panel, but is collapsible. You can use the section control to create groups of controls that users can expand and collapse. To show the section expanded when the form loads, select Expand in the General tab. To show the section collapsed when the form loads, deselect Expand. You can drag and drop any other controls inside a section control, including panels and other section controls.

A Tab control allows you to group controls in different tabs, to create a tabbed view in your web form. By default, when you drag a tab control onto your web form, one tab is created. To add another tab, click Add tab. The new tab is added to the right of the existing one. To rearrange the tab order, drag a tab to the right or left of another tab. In small devices, such as mobile phones, tabs are shown as accordions to accommodate the content in the space. You can drag and drop other controls, such as panels, sections, and tables, into an individual tab. When you select a tab, only the controls in the currently selected tab can be seen.


If you delete a panel, a section, or a tab, all the controls grouped inside the panel, section, or tab also get deleted.

See Place Controls in Panels, Sections, or Tabs

Tables and Repeatable Sections

Use Table controls to conserve space in a form. The table control allows you to arrange the form controls in a grid pattern. You can add columns into the table and add one control per column. When you delete a column in the table, all the controls in the column get deleted.

If auto binding is selected when you drop a table onto the canvas, then a new entry in the data definition is generated. That attribute is an array of type object. Every time a control is dropped into a column, an attribute inside that list is added.

If auto binding isn't selected, you can select an attribute from the data definition. The controls inside a table can be bound to any attribute in the form data definition. When rendering the form, the data is fetched and shown for that control. However, modifying the value in one row doesn't update every row. Also, when submitting the form, the last control bound to that attribute is the one updating the payload.

Use Repeatable Section controls to display multiple copies of a set of controls in a form. Repeatable sections are useful when you want to allow users to enter the same type of input information multiple times in the form; for example, a phone number.

Unlike a table, which is structured, a repeatable section is a free-form container. You can add new controls above, below, or between existing controls. You can surround an individual control with a repeatable section control, or it can include an entire section control. The section control included in the repeatable section must contain all of the form controls that must be repeated.

Tables and repeatable sections provide a way to add information and content dynamically to forms. With these controls, you can run action and if triggers in the form to display dynamically changing information.

See Configure Tables and Configure Repeatable Sections.