Form Building Basics

Building a custom form is easy and intuitive with the Form Builder. This article describes how to create a form.

Contents

Video demo

This video provides a brief demo of how to create a form in the Form Builder.

What are Pages?

Pages are the main way to structure a form; they are equivalent to a "screen" in the Mobile App. They form the main navigation of a form, dividing a form into a sequence of clear steps.

Tip:When mobile users need to scroll a lot, they are more likely to miss a question or get lost on a page—especially on smaller devices like mobile phones. To minimize scrolling, make sure no more than 40 questions will be shown on a page at once (and break them up into multiple sections). If you have more than that - time for a new page!

Pages in the Form Builder

  • Pages in a form are listed in the left navigation panel of the Form Builder.
  • The contents of the currently selected page are listed on the right.

The Form Builder main page

What are Sections?

Sections are containers for questions within a page. They are shown in the right panel of the Form Builder. There are a few types of sections.

Regular Sections

Regular Sections are blocks of questions within a single page. They divide questions into logical groups, visually breaking them up and making it easier for mobile users to navigate a page. These sections make up most of your form.

Tip:When mobile users are faced with a lot of questions with no visual separation, the form is harder to use and they are more likely to miss a question. A Regular Section should have no more than 10 questions shown at once. If you have more than that, it's time to create a new section! You can use Side-by-Side Sections to display questions in a space-saving, two-column layout.

Regular Sections group your questions under headers in the right panel of the Form Builder.

The Form Builder Section Headings

Info:The topic Regular Sections describes in detail how to use a Regular Section.

Side-by-Side Sections

In a Side-by-Side Section, questions and answers appear next to each other in a two-column layout. This layout removes unnecessary space, which helps the field user efficiently scan and answer questions.

Tip:
  • 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.

  • 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 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 Builder 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.

Info:The topic Side-by-Side Sections describes in detail how to configure a Side-by-Side Section.

Repeatable Sections

Repeatable Sections are typically used whenever you would see a table on a paper form, to collect a variable amount of line items, such as parts with associated quantities and prices. They display as a table in the mobile app and allow users to collect multiple answers for the same set of questions.

Tip:Whenever you would show a table in a paper form, or you aren't sure how many times a user will need to answer a set of questions, use a Repeatable Section!

Repeatable Sections look like a table in the right panel of the Form Builder. This is not a preview of how the form appears in the Mobile App.

The Form Builder Repeatable Section Headings

Info:The topic Overview: Repeatable Sections describes in detail how to use a Repeatable Section.

Template-Based Sections

Template-Based Sections allow you to quickly and easily create and edit groups of questions that follow a repeated pattern. These kinds of repeated sets of questions are often seen in inspection, audit, or checklist-based forms.

Template-Based Sections appear in the Form Builder as blocks of questions that reference a specific template.

An example of a Template-Based Section in the Form Builder. The example shows a set of four questions for a bedroom inspection, based on a Template titled "Room Inspection".

Info:The topic Building Template-Based Sections describes in detail how to use a Template-Based Section.

What are Questions?

Questions are what mobile users interact with in the mobile form; users can type with a keyboard, select from a list of options, or attach files in order to provide answers for them.

There are many kinds of questions that can be added to a form.

  • Question Type determines how users should interact with the question and what it looks like (i.e., manually typing in a response vs. selecting it from a list.)
  • Data Type determines and what kind of information the question should collect (i.e., a number, a date, a signature, etc.).
  • Please read: Question and Data Types in the Form Builder
Tip:When a lot of questions in a row are of the same type, the mobile form can get very monotonous, and mobile users are more likely to miss a question. Vary your question types, especially using types like button group questions, which highlight in a particular color once an answer is chosen. Your forms will be more usable, and your mobile users will appreciate it.

Questions in the Form Builder

Questions are found inside of sections and are shown in the right panel of the Form Builder.

The Form Builder main page

Creating Your Form

  1. From Manage Forms in the Web Portal, select Create New Form.

  2. Select Build a Mobile Form from the window that appears.

  3. Once the Form Builder has loaded, you'll be on the General Information screen. Give your form a Form Name and Form Description. You'll be able to edit this later if you desire.

Building Pages

Add a Page

  1. In the left navigation pane of the Form Builder, select Add a Page.

    "Add a Page" on the Form Builder sidebar

  2. Name your page.

    • Mobile users will see this name in the mobile form in the left navigation, and at the top of the screen.

  3. (Optional) Customize the page's Unique Identifier.

    • This identifier is referenced in Conditional Logic, analytics, and other parts of the Form Builder.

  4. (Optional) Select where the page should go in your form.

    • By default, new pages are inserted at the end of the current page listing.

  5. Select Save at the bottom of the page.

Edit, Delete, or Copy a Page

These actions can all be accessed from the menu icon beside the page name in the right panel of the Form Builder.

Edit a Form Builder page

  • Edit: This will bring up the Page Information screen, where you can modify the page name and Unique Identifier.

  • Copy Page: The page will be copied. If copying a page with self-contained Conditional Logic (i.e., all rules and effects are contained within the page), then the Conditional Logic rules will also be copied.

  • Delete Page: This will permanently remove the page from the form. This may impact and cause errors in other parts of your form or Conditional Logic.

Move a Page

In the left navigation, select and hold the dotted icon while dragging the page to the desired location. Or edit the page and select the desired location under Page Placement.

Building Sections

Add a Section

  1. Make sure you are on the desired page.

  2. Select Add a Section at the bottom of the right panel.

    Add a Section to a Form Builder page

  3. Choose your section type.

    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
  4. Name your section.

    • Mobile users will see this name in the header above each section in the mobile form.

    • If you don't name your section, the header won't show up, and there will be no visual separation between sections. This is usually done for the first section on a page.

  5. (Optional) Customize the section's Unique Identifier.

    • This identifier is referenced in Conditional Logic and other parts of the Form Builder.

  6. Choose whether to Show Section Header on Mobile Device.

    Select to show the Section Header on mobile.

    • If OFF, the header will not show in the mobile form, but it WILL show in documents.

    • If ON, there are two additional options:

      • Allow mobile user to collapse and expand this section: Using the  and  icons, your mobile users can make the questions in the section shown or hidden. This is useful for space saving on larger forms.

        • Start section in collapsed state: Users will have to manually tap the  button to expand the section.

  7. (Side-by-Side Sections only) Select a question-answer ratio for the section layout.

    • The question-answer ratio affects how the Side-by-Side Section appears on form pages in the Mobile App. It has no effect on the summary view, document formats, or Web Portal display.

  8. Select Save to add the section to your form.

Edit, Delete, Move or Copy a Section

These actions can all be accessed from the menu icon beside the Section name in the right panel of the Form Builder.

Edit a Form Builder section

  • Edit: This will bring up the Section Information page. You can change between Regular and Side-by-Side sections from this page.

  • Copy Section: The section will be copied. If copying a section with self-contained Conditional Logic (i.e., all rules and effects are contained within the section), then the Conditional Logic rules will also be copied.

  • Move Section: This will open a list of sections in the form. You can choose to move this section to after any of the listed sections.

  • Delete Section: This will permanently remove the section from the form. This may impact and cause errors in other parts of your form or Conditional Logic.

Building Questions

Add a Question

  1. Navigate to the desired section.

  2. Select the Add a Question button.

    Add a question to a Form Builder section

  3. Choose a Question Type.
  4. Provide Question Text.
    • This is the "Question" you are asking users to respond to, or instructions on what kind of information to enter. You can format the question text to make it easier for your users to read.
  5. (Optional) Customize the Unique Identifier. This identifier is referenced in Conditional Logic and other parts of the Form Builder.

    TextFieldSettings.png

  6. Choose a Data typeClosed Data types describe the format in which a user answers a question. For example, a user might enter a name (Text) in one question, and a dollar amount (Currency) in another. A data type also supports validation (making sure that mobile users enter a valid email address format, for example).. The list of available data types will differ depending on what question type you chose. For more information on Data Types, please read: Question and Data Types in the Form Builder

    Select a Data Type for your form question

  7. Select any necessary Restrictions:

    • Required

    • Read-Only

    • Hidden on Device

    • Hidden on Reports

    • Keep question width to 100% (Side-by-Side Sections only)

  8. The remaining configuration options (In the Options and Properties tabs, if present) will differ based on your question and data type. For more information please read: Question and Data Types in the Form Builder.

  9. (Optional) Add Help Properties. Read more here.

Edit a Question

To edit a question, simply select the question. Its properties will open again.

Delete, Move or Copy a Question

These actions can all be accessed from the menu icon beside the Question in the right panel of the Form Builder.

Edit a form question

  • Copy Question: The question will be copied.

  • Move Question: This will open a list of sections in the form. You can choose to move this question into any of the listed sections. You can also drag and drop the question within the same page or onto different pages.

  • Delete Question: This will permanently remove the question from the form. This may impact and cause errors in other parts of your form or Conditional Logic.