Side-by-Side Sections

Side-by-Side Sections display questions and answers in a condensed, two-column layout. This can make it easier and faster for field users to scan, complete, and confirm the answers in a form. This topic describes how a Side-by-Side Section works and when to use it in your form.

Supported on the Enterprise tier only:

Essentials
Advanced
Enterprise

Contents

How Side-by-Side Sections work

Side-by-Side sections display questions in a two-column layout in the ProntoForms Mobile App. With Side-by-Side Sections, you can:

  • Remove extra space in the form to reduce scrolling time.

  • Fit more information on a single screen, which makes it easier for field users to scan for context within and across sections.

  • Vary section formats to make a form easier to navigate.

Note:Customer Feedback forms do not support Side-by-Side sections.

Side-by-Side Sections in the Mobile App

The following example shows a comparison of a Side-by-Side and a Regular Section in the Mobile App. The first example shows a Side-by-Side Section. The second example shows the same questions in a Regular Section. The two-column layout makes the Side-by-Side section shorter than the Regular Section.

Two-column Side-by-Side layout

A Side-by-Side section labelled "Job Details" that is a list of seven questions. The two-column layout makes the section about 40% shorter than if it was a Regular Section.

Over-under Regular layout

A Regular Section labelled "Job Details" that contains seven questions.

Side-by-Side Sections in the Form Builder

When you create a Side-by-Side Section, you choose a question-to-answer ratio.

You can change the layout of a Side-by-Side section based on your section's contents. A Side-by-Side section named "Job Information" shows its layout set to the 40:60 option, since its contents have short, one-word questions but require slightly longer answers.

The ratio determines the width of question text and answer field columns in the ProntoForms Mobile App. By default, the ratio is 50:50, which works well for most questions. Some question types always display at full width. You can also Keep question width to 100% for specific questions within the Side-by-Side section.

Side-by-Side section settings only apply to form pages in the Mobile App. They have no effect on the summary view, document formats, or Web Portal display.

Tip:

  • When you select a question-answer ratio, think about the question types you plan to include in the section. Wider question types, like Button Group, don’t fit well in smaller answer widths, especially on smaller devices.

  • The Side-by-Side display works with views wider than 390 dp. Smaller view screens display the questions full width.

  • Use the Change Section Type setting to easily switch between Regular and Side-by-Side sections. You don’t have to re-create existing sections. Edit the section to change its type.

Side-by-Side Section setup

To add a Side-by-Side Section, fill in the section information, choose a question-to-answer ratio, and save your changes.

The Form Index displays the Side-by-Side icon The Side-by-Side section icon that displays next to the section name in the Form Index. The icon is a two-column table with two rows. next to the Side-by-Side section name. When you add questions to the section, the Form BuilderClosed The Form Builder is the tool that form designers use to create forms. In the Form Builder, accessed from the ProntoForms Web Portal, form designers can add and edit pages, sections, and questions, as well as attach data destinations and configure the form's settings. shows the questions in a two-column layout.

A Side-by-Side section labelled "Sign Off" in the main Form Builder pane view. The Side-by-Side section displays its questions in a two-column layout, and has two questions set to full width.

When to use a Side-by-Side Section

The following table describes each section type and when to use it.

Section type Layout Example Works best for…
Regular Full-width, over-under Regular section titled "Failure Details" with the question text "Photos of problematic inspection items" displayed full-width "over" (above) the answer field, which also displays full-width

  • Long question text or answers

  • Question types that display best as full-width
Side-by-Side Two-column Side-by-Side section titled "Job Details" with question text "Job name" displayed next to a dropdown answer field

  • Short question text

  • Short answer text

  • Short option descriptions
Template-Based Full-width, over-under (same as a Regular Section) Template-based section titled "Health and Safety Checks" with the question text "Floor Number" displayed "over" (above) the answer field, which also displays full-width

  • Reusable groups (blocks) of questions to help the Admin build forms more quickly and consistently, such as audit-based forms
Repeatable Summary Table for quick reference and editing Repeatable section titled "List Materials" with the Summary Table view that shows column 1 "Material type" and column 2 "Quantity", with two rows (entries) completed

  • Sets of questions that users can complete multiple times, to create the number of line items required
When a field user opens a row to add or edit answers, displays as a “form within a form” or “sub-form”. The sub-form layout is configurable as Regular or Side-by-Side. Repeatable section "Materials Used" with an entry (sub-form) open that displays the Side-by-Side two column layout, with question text on the left and answer fields on the right

Info:The topic Building Sections describes in detail how to add and set up a Side-by-Side section.

Full-width question types

To ensure the best user experience, the following question types always display at full width in all sections, including Side-by-Side:

  • Audio Recording

  • Card List

  • Document Editor

  • File Upload

  • Image

  • Information Label

  • Resource Image

  • Signature

  • Sketch Pad