The form builder in QBO allows you to create a WYSIWYG form without the need for a developer.  Given the above example we can correlate the two screens together.  The first screenshot shows the form as a user would see it.  It is a two column form as evidenced (on the second screenshot) by the Import Form Element “PrimaryPanelDouble” named “Foreclosure Referral”.  If this field had been designated as PrimaryPanelSingle it would be a single column form.  If you do not specify a PrimaryPanel it will automatically be created for you as PrimaryPanelSingle.

Next we see the Import Form Element “SectionHeader”.  These fields relate to the header of each column and provide a logical title for the section.  The two examples given are Property Information (column 1, sequence 1) and Foreclosure Information (column 2, sequence 1).  These elements are fairly straightforward as they are type “Section Header” with some basic layout settings.

Now we move into the more complex Form Elements, inputs.

The primary focus of this section is to outline the different types of form input elements and how they are used.  Now we will go through the different types of inputs for the form questions.  We will start by adding a question to an existing form.

 

Click OPTIONS – ADD A QUESTION

 You are provided a form to create a question.  Clicking the white down-arrow in the top-left portion of the screen expands all possible options for this input question.

Input Fields

Name:  This field relates to the database table and field name you are prompting the user to enter data into.  Click the icon to browse the database for this information.

Label:  This is the label you wish to designate for this input field.

Mapped Value:  This field will be auto-populated with the table and field name chosen in the first step.

Default Value:  If you wish to assign a default value to this field, enter this value here.

Form Element:  This sets the field type for the input.  The input types are as follows:

• Input: Text input field
• Dropdown: Allows for a set of predefined options for dropdown box
• Textarea: Similar to Input but with larger text box area, allows multiple lines of data.  Very useful for addresses.
• Read-Only: Used to display read-only text.  Do not use & or |
• Checkbox: Inserts predefined value into field if checked
• Radio Buttons: Allows user to select only one of many predefined options, does not allow multiple selections.
• Document Upload: Allow user to upload document attachments to this form.
• Hidden: Inserts hidden field into form to pass data without end-user knowing.  Useful for passing default values for certain fields.
• Section Header: Creates a header label, centers text and applies Bold typeface.
• Primary Panel (1 or 2 Column): This is the primary panel for your form questions.  This is where you will create the input fields for the user to us.
• Panel (1 or 2 Column): A panel is used to display information relating to this loan.  The panel is not used for user input of data.
• Panel Collection: This is for advanced users who wish to create a panel with multiple tabs.  It allows the panel to have tabs that correlate to different input forms on the same page.
• Referral Page Buttons:

 

Formatting: This sets the type of input data allowed in field.  This list changes with selection of previous Form Element type.  Only Input and Dropdown use this field.

Form Element Type: Input Options

• Text: All type of input accepted
• Date: Calendar prompt for date entry
• Date without Popup: Allows only date integers and formats accordingly
• Integer: Allows only whole numbers to be entered, no decimals
• Money: Also allows only numbers and formats as currency
• Numeric: Allows only numbers to be entered, will allow decimals
• Percent: Allows only numbers and formats as 99.99%
• Phone: Allows only numbers and formats as (999) 999-9999
• Phone Extension: Same as Phone but allows additional numbers at the end to designate extension.  (999) 999-9999 999
• SSN: Allows only numbers and formats as 999-99-9999
• ZIP Code: Allows only numerical values and formats as either 5 digit zip or 5+4 zip code.

 

Form Element Type: Dropdown

• State: Pre-populates the 2-digit code for each US state; plus DC, US Virgin Islands, Guam and Puerto Rico.
• Status: Pre-populates values queried from Statuses tab in (DESIGN – CONFIGURATION – MODULES)
• Type: Pre-populates values queried from Types tab in (DESIGN – CONFIGURATION – MODULES)
• Enumerated: Populates dropdown with values entered in Enumeration box, values separated by carriage return.
• Advanced: For advanced users only, do not attempt without parent supervision.

 

Required: Select to force user to enter value.

Remove invalid characters: Select to remove any formatting transferred via copy/paste from another application, such as MS Word.

Status:

Type:

Validation Fields

This field allows you to validate the input data against a set of predefined criteria

• Equals: Evaluates input data and requires it to equal the predetermined value.
• Greater Than: Evaluates input data and requires it to be greater than the predetermined value.
• Less Than: Evaluates input data and requires it to be less than the predetermined value.
• Matches: Evaluates input data and requires it to equal the Form Question selected in the next field.
• Range (Percent): Evaluates input data and requires it to be between the predetermined percent.
• Range (Quantity): Evaluates input data and requires it to be between the predetermined quantity.
• Regular Expression: This is for advanced users only and will not be covered here.
• Exists: This is for advanced users only and will not be covered here.
• Does Not Exist: This is for advanced users only and will not be covered here.

Layout Fields

Panel: This specifies which panel contains the data element you’re defining.

Width: This designates the width of the field.  Leave this as default.

Sequence: This designates the order in which the fields are displayed.  All fields are numerically ordered then displayed, so you can leave numerical gaps for future expansion without creating extra space or errors.

Display: Select Column 1 or Column 2 (if previously designated 2-column panel)

 

Dependency Fields

This form allows certain fields to be enabled given a specific set of dependencies.  Such as a radio button toggling a co-borrower for a loan.  Radio button set to YES allows the user to enter data into a co-borrower set of fields, while the radio button set to NO disables all fields and grays them out.

Form Element ID(s): Enter the “Name” of the dependent of previously generated Input Fields that trigger the dependency.

Example:

In the above example, we must first set a radio button to toggle YES or NO.  For this example, let’s name it: CoBorrowerQuestion.  See example below:

 

 

If the condition is YES then we need to enable the Input Field we are creating, named CoBorrowerFirstName (as an example).  So the value in Form Element ID(s) would be: CoBorrowerQuestion_YES

See example below of the Dependency Fields. 

Condition: If we need multiple dependency criteria we just enter all the Field Names in the Form Element ID(s) field, separated by commas.  If the dependency requires all criteria met, select AND.  If the criteria only needs one criteria met, choose OR.