Form Builder Specifications Overview

Overview

The Form Builder web part provides a flexible, accessible, responsive solution to create complex, multi-page web forms, collect and store responses and file attachments, and receive emails containing submission details and links to retrieve file attachments. An accompanying Form Manager is located at the root site, accessed through Site Settings.

This article discusses some of the technical and practical aspects of the Form Builder. There are articles with accompanying videos for the following Form Builder subjects:

• Form Builder tool overview
• Form Settings
• Form Fields
• Form Management
• Form Pages, Rows and Columns - coming soon

Requirements

• Oregon Starter Template v4x
• JavaScript must be enabled
• Browser must meet the statewide minimum requirements.

Accessibility

Forms will pass both WCAG 2.0 and Section 508 website standards. Form elements have proper Label-to-Field-to-Help Text relationships, proper ARIA/Role attributes, and tabbing and keyboard controls are fully supported. Form alert panels have a Role of alert.

ReCAPTCHA Accessibility

Mechanisms designed to thwart spam and abuse by introducing a human-only solvable task/puzzle creates strain on all visitors; however, the strain is felt most by those who rely on screen reader software and keyboard controls. While the reCAPTCHA 2.0 mechanism used in this form builder is specifically designed to meet accessibility standards (From Google: "ReCAPTCHA works with major screen readers such as ChromeVox, JAWS, NVDA and VoiceOver. ReCAPTCHA will alert screen readers of status changes, such as when the reCAPTCHA verification challenge is complete. The status can also be found by looking for the heading titled 'recaptcha status' in the 'recaptcha widget' section of the page."), you may consider the necessity of enabling the feature. The best course of action may be to resort to enabling the feature only if there is documented abuse by bots. This feature will not prevent abuse by humans.

Features & Functionality

Form Manager Menu

• Select/Create Forms

Form Editor Interface

• Drag & Drop Interface
• Preview Mode
  
• Multiple Row Support
  • Add/Delete/Move
• Multiple Column Support
  • Add/Delete/Move
  • 4 column maximum
• Multiple Page Support
  • Add/Delete/Move
  • Page Name
• Multiple Field / Element Types
  • Paragraph /Heading / Alert
    • Display-Only
    • Available Heading Levels
      • H3-H6 (H2 reserved for Form Page Title)
    • Available Alert Types
      • Info (Blue)
      • Note: The alert role is not applied
  • Text Input
    • Custom Options
      • Default Value
      • Help Text
      • Label
      • Available Field Validation
        • Required
        • Email
        • Phone Number
          • Accepted Patterns
            • 123-456-7890
            • [phone]
            • 1234567890
        • Number
          • Whole
          • Decimal
          • Scientific
          • Negative
          • Positive
          • Empty
          • Space(s) translated to Empty
  • Textarea (Multiple Lines of Text)
    • Custom Options
      • Row(s)
      • Help Text
      • Label
      • Available Field Validation
        • Required
  • Radio Buttons
    • Label
    • Help Text
    • Custom Options
      • Add/Delete/Reorder
      • Default option
  • Checkbox
    • Label
    • Help Text
  • Select (Drop-Down)
    • Label
    • Help Text
    • States & Territories Pre-Made List Options
    • Custom Options
      • Add/Delete/Reorder
    • Default Option
• Conditional Field Visibility
  • Available for all Field Types
  • Field Types Available in Evaluation
    • Select (Drop-Down)
    • Radio Buttons
• Form Settings
  • Form Title
  • Form Title Heading Level
    • H2 - H6
  • Multiple File Upload (optional)
    • Enable/Disable
  • Google ReCAPTCHA 2.0 (optional)
    • Enable/Disable
  • Email Response
    • Multiple Recipient (To:) Support
      • Comma-Delimited List
    • Multiple CC: Support
      • Comma-Delimited List
    • Multiple BCC: Support
      • Comma-Delimited List
  • Simple Conditional Field Support
    • Radio Buttons
    • Select (Drop-Down)
  • Confirmation Email
    • Select an Input which uses email validation

Email Notifications

• Head
  • Recipient/CC/BCC
• Subject
  • Title of Form
• Body
  • Table
    • Field Name
    • Value
  • File Link(s)
• Attachments
  • Comma-Separated-Value CSV File
    • Field Name
    • Value

User Permissions

In order to create/edit a form, the author must have View Items, Add Items, Edit Items permission levels at the root of the site. In most cases, being a member of the Contributor or Owner group(s) is sufficient, although more

File Submission Storage and Retrieval

Each submitted file attachment is validated, scanned for viruses, encrypted, and securely stored in an off-site location. Files are then retrieved via URLs located in the body of the submission email and/or the attached .csv file. Anyone who needs to access a submitted file must have at least view rights and be authenticated. File attachments are not available to anonymous visitors.

Tutorials

Create a New Form

1. While signed in to author your site, from the root site, select Site Actions > Site Settings. Under the heading Form Builder, select Form Manager. If you do not see this option, first ensure you are at the root site. If not, please visit https://servicedesk.oregon.gov and open a new ticket
2. Select Create New Form

Locate/Edit an Existing Form

1. While signed in to author your site, from the root site, select Site Actions > Site Settings. Under the heading Form Builder, select Form Manager. If you do not see this option, first ensure you are at the root site. If not, please visit https://servicedesk.oregon.gov and open a new ticket
2. Locate and select a form by touching/clicking it's icon

Edit Form Settings for Your Form

To locate the Form Settings menu, while editing a form, touch/click the Form Settings Button in the far upper-right corner

• To edit the Form Name, update the content of the Form Name input box and select OK
• To edit the email recipients (e.g. To, CC, BCC), update the content of the appropriate fields and select OK. These fields allow for comma-delimited lists of email addresses
• To enable File Attachments for your form, check its checkbox and select OK
• To enable ReCAPTCHA 2.0 for your form, check its checkbox and select OK
• Once you are satisfied with your updates, Save your form and the changes will be reflected in all instances of the form

 

Delete a Form

To delete a form, open the Form Settings menu and touch/click the Delete Form button. Deleted forms are available in the site's Recycling Bin and will remain there in accordance to system rules. If you need assistance restoring a form, please visit https://servicedesk.oregon.gov and open a new ticket.

Add Rows and Columns to Your Form

• Before you can add columns, you must first create a Row. To add a new Row while editing a form, touch/click the Add Row button and a new row will appear below that location
• Once you have added a Row to your form you can create up to four Columns inside it. To add a new Column, touch/click the + button to the left of a Row and a new Column will appear
• Pro Tip: It is important note that on a mobile device, all columns in a row will stack on top of each other starting with left-most Column. This is the inherent nature of responsive design. Also, if a visitor interacts with the form using a screen reader or keyboard, the form will read through all the Fields in each Column, one-by-one, in a Row before continuing to the contents of the next Row.

Add Fields and Elements to Your Form

• Once at least one Row with one Column has been added to a form, you can add Fields (e.g. Text Input or Number) and/or Elements (e.g. Heading or Paragraph).
• To add a new Field or Element, touch/click the Add Field button and select a field Type. The Field or Element will take its place in the row.  The Field or Element can then be moved in the row by the drag and drop method.

Edit Field Settings

Heading / Paragraph (text) / Alert

• Paragraph Style
  • Paragraph - normal text is entered and displayed in the element on the form
  • Alert - places a light blue background to the element and adds an 'i' (information icon)
  • Heading - Values H3 through H6
• Text - accepts plain text to be displayed on the page in the style chosen in the Paragraph Style setting
• Visible - this element can be displayed conditionally

Multi-line Text

• ID - sets the HTML ID for the field
• Label Text - enter text to be displayed as the label for the field.  Displayed text will be emboldened above the field
• help Text - enter text to be displayed below the field as brief instructions to the form submitter
• Rows - sets the number of entry rows to be displayed on the form.  This is not a limit on the number of rows of text accepted by the field
• Default Value - a value to be displayed in the field when the form is rendered on the page.  The value can be removed or edited by the submitter
• Required - checking this box prohibits form submission unless this field has an entry
• Visible - this element can be displayed conditionally

Radio Button List

• ID - sets the HTML ID for the field
• Label Text - enter text to be displayed as the label for the field.  Displayed text will be emboldened above the field
• help Text - enter text to be displayed below the field as brief instructions to the form submitter
• List Items - Add, edit, move, and delete items to be included as choices in the radio button list
• Default Value - causes one choice to be pre-selected when the form is rendered on the page
• Visible - this element can be displayed conditionally

Checkbox

• ID - sets the HTML ID for the field
• Label Text - enter text to be displayed as the label for the field.  Displayed text will be emboldened above the field
• help Text - enter text to be displayed below the field as brief instructions to the form submitter
• Checked by Default - causes the check box to be checked upon page render.  This box can be unchecked by the submitter
• Visible - this element can be displayed conditionally

Drop Down List

• ID - sets the HTML ID for the field
• Label Text - enter text to be displayed as the label for the field.  Displayed text will be emboldened above the field
• help Text - enter text to be displayed below the field as brief instructions to the form submitter
• List Items - Add, edit, move, and delete items to be included as choices in the drop down list
• Default Value - causes one choice to be pre-chosen when the form is rendered on the page
• Visible - this element can be displayed conditionally

Preview a Form While Editing

1. While editing a form, at the top of the page, select Preview Form. Previewing will not save your form
2. Once done previewing a form, at the top of the page select Exit Preview

Add an Existing Form to a Web Page

1. While signed in to author your site, and while editing a page, place the cursor where you wish to add the web part. Add the Form Builder web part with the Ribbon via Insert > Web Part > FormBuilder
2. With the FormBuilder web part added to the page, touch/click the drop down arrow in the upper right of the web part, and from the context Menu select Web Part Properties
3. In the Web Part Properties, select your form from the drop down menu and choose OK. Your form will appear on the page
4. Save or Check In or Publish your page, accordingly

Known Limitations

• Form Editor Interface
  • Desktop-Only
  • Planned for Future Release
    • Mobile Device Support
• Web Part Support
  • One Form Builder web part supported per page
  • Planned for Future Release
    • Multiple web parts per page
• Field/Element Support
  • Date/Time
    • Planned for Future Release
      • Date
      • Date/Time
  • Number
    • Does not support infinity
    • Planned For Future Release
      • Number Min & Max
      • Step
      • Decimal Place Preference
  • Planned for Future Release
    • Field Masking
    • Currency Input
    • File Attachment(s) as a Field
    • Value Assignment for Select Options and Radio Buttons
• Regular Expression Validation Support
  • Planned for Future Release
    • Custom Regular Expression
    • Additional Pre-Made Regular Expressions
• File Attachment Support
  • Size & Count Limitations
    • File Size Limit: 20MB per file
    • File Count Limit: 20 files per element
    • Total Upload Size Limit: 400MB
  • Whitelisted File Types
    • .doc, .docx, .pdf, .txt, .rtf, .xls, .xlsx, .jpg, .jpeg, .png, .gif, .csv
  • Planned for Future Release
    • Single File Upload
    • File Type Whitelist
    • File Attachment as Field
    • Multiple Element Support
    • Drag/Drop Upload Interface
• Form Settings
  • Email Body Template Builder
  • Email Subject Template Builder
  • Email Recipient/CC/BCC Template Builder
  • Enable/Disable Email
• Form Reporting Interface
  • Search/Query Submissions
  • Merge Multiple Records

Frameworks/Libraries Dependencies

• jQuery
• DataTables.js
• Bootstrap 3.x
• Knockout.js

Feedback

If you would like to suggest features, enhancements, or report a bug, please visit https://servicedesk.oregon.gov and open a new ticket.

Screenshots

Fig.1 Form Management Screen

Fig. 2 Form Field Selection

Fig 3. Form Preview

Back to Article Index

To the Service Desk