Form Builder Tool Overview – Tyler Oregon

Information

The Oregon.gov form building tool is offered as a free option to collect NON-Personally Identifiable Information (PII) from web site visitors for any number of agency, board or commission purposes. It is important to realize that ALL form builder field submissions are transmitted via plain text in emails and have non encrypted attachments containing the submitted information as well.

NO SENSITIVE PII SHOULD EVER BE COLLECTED IN A FORM BUILDER FORM

Here are some articles about Personally Identifiable Information

Reviewing these resources will provide a good idea of what PII is and how to protect it.

If a need arises for the collection of PII, please contact the Oregon E-Government Service Desk to begin the discussion of potential solutions.

Overview Video

Form Management

The form management feature is reached from the site settings page. "Gear Cog" -> "Site Settings" -> "Manage forms".

On the form management page will be an icon for each form that is available to the site collection. From this page, the forms may be edited, duplicated or deleted. New forms may also be created. Submitted form data may also be viewed or downloaded. Click here to learn more about Form Management

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

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.
Click here to see a list of all of the available form fields and elements.

Form Field Settings

Clicking on a field in your form will bring up a settings pane on the right side of your screen. The settings allow you to customize your fields and include such things as the name of the form to custom messaging to viewers that have successfully filled out the form. For a list of all available form field settings, click here.

Internal Submission E-mail

While you can access the form submission data from the form builder page, an email will also be sent. You have the ability to add additional recipients as well as customizing a subject line and setting a from address using a user's submitted data.

Email Recipient: (Required) This is the email that the form results are sent to upon submission.
From Field: You can select a field from the form to show as the sender of the submitted email. Note that some agencies can deny delivery of the email or label these messages as SPAM If no fields are selected, a generic "no-reply" email address is used.
Email CC: Adds additional recipients to the form submission to the CC field
Email BCC: Adds additional recipients to the form submission to the BCC field
Email Subject: Creates a custom subject line for the form submission email. Similar to the custom confirmation email and message, field values can be accessed by referencing the field's ID, like so:
```
${firstName}
```
Attach Submission as Spreadsheet: If Yes is selected, all submitted content will be attached as a .CSV spreadsheet and appear in the body of the email.

Known Issues:

Settings: 'From' field

Using this field can cause submissions to fail. The problem is that the setting attempts to make the email look like it comes from the email address the submitter entered in the chosen field. This 'spoofs' the email address and causes the submission to get caught in SPAM and other security filters. This was not such a common occurrence when the field was first introduced, so it was not as big of a concern. The current best practice is to not use the 'From' field in form settings to ensure smooth delivery of form submissions.

Custom Confirmation Message

The Form Builder tool allows you to create a custom confirmation message that will show on a successful form submission.

To create a custom submission message, click the "Form Settings" button in the upper right corner.

Scroll down to the "Submission Success" header and click the "Use Custom Success Message" checkbox.

An input box will appear where you can create a custom HTML message. You can also access the form values that the user submits, allowing you a more personalized message. To access a form field value, press "Ctrl (or Cmd) + space" and you will see a popup with all of the fields available. The names in this popup reference the "ID" setting of each form field. Click on the name you want and you will see the field id surrounded by the following code. "${}". Once your message is finalized, your HTML will replace the form any time a submission is successful.

custom submit template.png

Custom Confirmation Email

You can opt to send your users a custom email when a form successfully submits. To do so requires a Single-line text field with the E-mail Address validation selected.

submission response.png

Similar to the Confirmation Message, click the "Form Settings" button in the upper right corner.

Scroll down to "User Confirmation E-mail" and select the email field from your form in the dropdown.

You will see an input box that behaves exactly like the confirmation message example where you can create a custom HTML message. You can also access the form values that the user submits, allowing you a more personalized message. To access a form field value, press "Ctrl (or Cmd) + space" and you will see a popup with all of the fields available. The names in this popup reference the "ID" setting of each form field. Click on the name you want and you will see the field id surrounded by the following code. "${}".

By default, the response email includes a table with all of the user's submission data. To hide this information, check the "Hide Table in Confirmation Email" button.

Form Viewer Web Part

The Form Viewer is the vehicle through which forms in a site are presented to visitors on a web page. A form viewer web part has access to any form in the site collection.

To add a formbuilder web part, select "Web Part" from the "Insert" ribbon, then select the "Oregon" category.
Click on "Form Builder" in the parts list and click "Add"
Edit the webpart settings and select the form you with to display

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.

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.