Add More than Two Columns to a Standard Section

Note: This code is provided as a starting point for you to adjust your own styling. You may need to make adjustments to the CSS in order to match your requirements.

When building a form section in template builder, out of the box you are able to select either a single or double column layout to display your questions and content. Using CSS, a section can have a specified number of columns that your questions span across which can greatly reduce the vertical length of a form and condense form content into a more compact view. Adding columns to a section can be useful when a form or section occupies a lot of vertical space, causing users to have to spend time scrolling to find specific form content.

The image below is an example of a standard form section that contains many questions which causes the section to increase in length vertically:

By using CSS, you can change a section to have a specified number of columns. The following example is the section above when split into a 3 column table using CSS:

Steps to apply CSS table columns to your form sections:

1. Start with the CSS snippet located here.
2. Determine how many columns the CSS should apply to your form sections.
3. Set/Adjust the column count and column spacing as needed on the Table CSS snippet. In our example, we set the column count to 3 which will divide our sections into three columns of questions/content :
   
4. Set column gap (line 61 above) and the column heights (line 19 below) to adjust spacing as needed. Both values can be used together to help position questions in a uniform way.
   
5. Following the instructions here, paste the snippet inside the CSS CompleteForm input box in the Edit Template Properties window for the form template you want to apply the Table CSS to.

Considerations

• Currently, the following question types are not supported for the table layout: Long text answers,
  Geolocation, Attachment/photo and e-signatures.
• Works best with larger mobile displays (Ipad, Tablet, Desktop)
• Landscape view for table CSS is unsupported in the new mobile app