Add Structure with Column Sets

The following steps outline the process of using Column Sets and Columns to create a layout structure for a Responsive Form:

1. Click Edit in the Responsive Form Designer toolbar.

2. From the Structure list in the Element Pane, drag and drop the required Column Sets.

   

   

   There are 3 Column Sets preconfigured with a number of Columns:

   • 2 Column Set: Adds a Column Set containing 2 Columns.

   

   

   • 3 Column Set: Adds a Column Set containing 3 Columns.

   

   

   • 4 Column Set: Adds a Column Set containing 4 Columns.

   

   

3. To add more Columns to an existing Column Set in the designer, drag & drop a Column from the Element pane to a Column Set in the Canvas.

Once the required Column Sets are added, it should appear as follows:

4. Select a Column Set in the Canvas to view and edit the following properties in the Detail Pane:

   • Name: Name to display when the element is selected in the Responsive Form Designer Canvas
   • Label: Label to display to the user in the Responsive Form Designer Canvas and the rendered Form

   • Wrap Columns on Small Display: True by default. Enabling this setting allows columns to stack vertically (or “wrap”) instead of aligning horizontally when viewed on devices with limited horizontal space. This ensures content remains legible and user-friendly regardless of the screen size.

     • If the “Wrap Columns on Small Display” option is selected, the column should appear as follows:

       

       

     • On wider screen, column sets appear as follows:

       

       

     • On smaller screen, column sets appear as follows:
     • If set to false, the columns may shrink down to their minimum width when the Form shrinks, but they will not stack/wrap. If the width of the Form becomes smaller than the combined minimum width of the columns, a horizontal scroll bar will appear to allow the user to access all content.

• Show Border: False by default. Enabling this field displays a solid border around the Column Set.