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.