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.
Page updated
Report abuse