Building Multi-Column Form (Formstack)

Issue/Question

How do I build multi-column forms in Formstack to organize form fields into multiple columns?

Environment

• Formstack Suite platform (currently focusing on Forms module)

Resolution

Changing The Column Count On Your Entire Form:

1. Open your form in Formstack form builder.
2. Enable multi-column support:
   1. Click Form Extras in top right corner of form builder.
   2. Find Columns setting and change it from None to number of columns you want (e.g., 2 or 3).
   3. It will automatically save your column settings.
   4. Click  icon in top right to close Form Extras panel.
3. Locate form fields you want to arrange into columns.
4. Edit Field Properties:
   1. Scroll down to Field-Specific properties
   2. Change Column Span value to number of columns you want field to span. Keep in mind how many columns you have enabled for the form. If you have two columns enabled for the form, and set the Field-Specific Column Span value to 2, it will span the entire width of the page. If you change the Field-Specific Column Span value to 1, it will span 1/2 of the page.
   3. The field will auto-save when you make the changes.

Changing The Column Count On A Section Of Your Form:

1. Create a Section Break field in your form to act as a container for columns:
   1. Drag and drop Section field, at bottom of Fields list, where you want columns to start. 
2. Enable multi-column layout on the Section Break:
   1. Click Section field to open settings.
   2. Set Columns option to desired number of columns (e.g., 2 or 3).
   3. The settings will auto-save when you make the changes.
3. Drag and drop other form fields into Section Break container. These fields will automatically be distributed to configured columns.
4. Adjust order of fields within Section Break to control placement in columns.
5. Locate form fields you want to arrange into columns.
6. Edit the Field Properties:
   1. Scroll down to Field-Specific properties.
   2. Change Column Span value to number of columns you want that field to span. Keep in mind how many columns you have enabled for the form. If you have two columns enabled for the section, and set the Field-Specific Column Span value to 2, it will span the entire width of the page. If you change the Field-Specific Column Span value to 1, it will span 1/2 of the page.
      Note: Sometimes the form doesn't look like the fields are set up correctly. If you refresh the page, the form typically looks correct.
   3. The field will auto-save when you make the changes.

If you need assistance, please contact the ITS Service Desk or submit a service request by clicking the Request Service button.