Form Builder Available Fields

This article is one of a series of articles around the FormBuilder tool for Oregon.gov V4.x websites.

Other articles in this series:

• General Overview
• Technical Overview
• Form Management

Form Builder has an number of fields available for you to be able to customize forms to your specifications. This article will list out those fields as well as the customization options available for each.

Field Types Available

Single-line Text

This field is to allow for visitors to add a single line of text. The character count is limited so this is best if you know the users submission will be relatively short. Example uses include: First Name, Address, etc.

The customizable options for this field include: ID, Label Text, Help Text, Default Value, Validation, Visible, and Required. Please click on each option for more information.

Multi-line Text

This field is to allow for visitors to add a longer line of text. Use this field if you want to present the user with an option to craft a longer reply or enter a few paragraphs.

The customizable options for this field include: ID, Label Text, Help Text, Default Value, Visible, Rows, and Required. Please click on each option for more information.

Dropdown List

This field is to allows for you to prompt visitors to make a choice out of a dropdown menu. You can customize the options in the dropdown to answer the question you would like to ask.

The customizable options for this field include: ID, Label Text, Help Text, Default Value, Visible, and Manage Options. Please click on each option for more information.

Radio Button List

This field is to allows for you to list out options for the user to select under one category or as answers for one question. This field limits the user to making a single choice out of the options available.

The customizable options for this field include: ID, Label Text, Help Text, Default Value, Visible, List Items, and Required. Please click on each option for more information.

Checkbox

This field is to allows to add a Yes/No question to your form. You can customize if you want the box check to mean Yes, or if you want it to mean No depending on your question.

The customizable options for this field include: ID, Label Text, Help Text, Default Value, Required, Checked by Default, Checked Value, Unchecked Value, and Visible. Please click on each option for more information.

Paragraph

This option doesn’t work as a field to collect information from your visitors, but it works to display information to them at a helpful point in the Form. It can be placed anywhere with the form and the setup works the same as the other fields.

The customizable options for this field include: Help Text, Paragraph Style, Text, and Visible. Please click on each option for more information.

Custom HTML

This section does not work as a field, but a place to add custom HTML to the Form. This allows for more styling options as well as the addition of any HTML element you wish to add. Here is a resource to help with available HTML elements. To add the HTML, add the field, select the field and then on the right click the Open HTML Editor button. A modal will open with a placeholder HTML span element. Remove that, add your HTML and click Ok when you are finished.

The customizable option for this field is Visible. Please click on the option for more information.

List of U.S. States

This dropdown menu is auto populated with a list of US State abbreviations.

The customizable options for this field include: ID, Label Text, Help Text, Default Value, and Visible. Please click on each option for more information.

Time Picker

This field restricts submissions to fit the template of a time. Visitors can type directly into the field and it will help them meet this template __:__ __. An example of an allowed submission would be 02:34 AM:

The field also includes a small clock on the right. If this clock is clicked on, a modal opens to allow them to click and choose the time instead of typing it:

The customizable options for this field include: ID, Label Text, Help Text, Required, Default Time, Min Time, Max Time, and Visible. Please click on each option for more information.

Date Picker

This field restricts submissions to fit the template of a date. Visitors can type directly into the field and it will help them meet this template mm/dd/yyyy. An example of an allowed submission would be 07/12/2025. The field also includes a small calendar icon on the right. If this clock is clicked on, a modal opens to allow them to click and choose the time instead of typing it:

The customizable options for this field include: ID, Label Text, Help Text, Required, Default Date, Min Date, Max Date, and Visible. Please click on each option for more information.

Datetime Picker

This field restricts submissions to fit the template of a date (mm/dd/yy) followed by a time (__:__ __). Visitors can type directly into the field and it will help them meet that template. Or they can use the calendar icon to the right of the field to choose both a date and time:

The customizable options for this field include: ID, Label Text, Help Text, Required, Default Datetime, Min Datetime, Max Datetime, and Visible. Please click on each option for more information.

Number Field

This field restricts the submissions to only integers and not any other characters. Visitors can type directly into the field or use the Arrows at the right of the field to increase or decrease the number:

The customizable options for this field include: ID, Label Text, Help Text, Default Value, Required, Max, Min, Step Value, and Visible. Please click on each option for more information.

Checkbox List

This field is to allows for you to list out options for the user to select under one category or as answers for one question. This field allow for multiple options to be selected.

The customizable options for this field include: ID, Label Text, Help Text, Required, List Items, and Visible. Please click on each option for more information.

Field Customization Options

ID

This sets the HTML ID for the field, no visitor will see this information, feel free to create an ID that makes sense to you. ID’s do have some accessibility restrictions:

• ID is case sensitive
• Must contain at least 1 character
• Cannot start with a number
• Must not contain any whitespaces (spaces, tabs, etc.)

If you wish to use this as an anchor link (link that takes the user further down the page to this ID location) these formatting restrictions are very important.

Label Text

This field allows you to control which label shows for the field when a visitor accesses the form. See this screenshot for an example:

Help Text

This text displays above the field and is useful to give help or a hint to the visitor of what they should enter:

Default Value

This text displays in the field and is useful to give an example of what you would like entered. This text can be removed or edited by the submitter. A good example would be “[phone]” if that is the format you would like a number to be entered:

Validation

This section has a dropdown that consists of None, Number, Email Address, & Phone Number (see immediately below for more detailed information on each of these). Selecting one of these adds a constraint to the field that checks that the submission meets a certain set of standards. This option doesn’t display to the user but is a setting behind the scenes.

This section also includes a ‘Required’ checkbox. Enabling this ensures that this field is required before the user is allowed to submit. The phrase (required)* will appear in red next to the fields label text:

The forms submit will be grayed out until each required field is filled out. If a required field is emptied the text “Error: This field is required.” Appears in red below the field. This is meant to bring attention to the issue blocking the form submission:

None

This is the default setting and means that the visitor can enter anything into this field.

Number

This limits the visitor to entering an integer into the field. It will not allow any non-integer characters. Accepted submission to a validated number field include:

• Whole number
• Decimal
• Scientific
• Negative
• Positive
• Empty
• Space(s) translated to Empty

Email Address

This checks that the submission enters is in the correct format for an email address.

Phone Number

This field checks the formatting of the number entered matches that of a phone number.

Accepted submission formats to a validated phone number field include:

• 123-456-7890
• [phone]
• 1234567890

Required

This selection doesn't allow for form submission until this field is populated.

Visible

This section allows you to add conditional display to a field. It includes a dropdown with two options:

• Always
• Only when condition is met

‘Always’ is default and means the field will always appear to the visitor. ‘Only when condition is met’ opens two more dropdowns. The first new dropdown is ‘Show When Field’ and it will list all other fields in this form. The second is ‘Equals’ and its options will change depending on which field you choose in the first dropdown.

Show When Field

Here you will want to select a field in the form, that if the visitors enters something that matches the condition, the field you are editing will appear to them.

Equals

Here you will set the condition that will need to be met for the field to display.

A good example of usage would be if you want to poll users which city or town they reside in, and if they choose Portland, a field will then prompt them to choose the Portland neighborhood they live in. Example steps to do this:

1. To start you would add a Dropdown List. Here you will fill out a list of cities and towns as selectable options (see how to add options to a dropdown here).
2. Then you would add a second Dropdown List. Here you would add all Portland neighborhoods as options to select (see how to add options to a dropdown here).
3. In the Settings of this neighborhood dropdown you will want to change ‘Visible’ to ‘Only when condition is met’
4. Then under ‘Show When Field’ choose the Cities and Towns dropdown.
5. Then under ‘Equals’ choose Portland out of the list of Cities and Towns available.

Now when someone chooses Portland they are then prompted to choose a neighborhood.

Rows

This allows you to set the number of entry rows to be displayed within the form. This is not a limit on the length of the text accepted in the field, just the size of the text field display on the page.

Manage Options

This section allows you to customize options that appear in a dropdown menu. It will open in a new modal and look like:

List Items

Using the List Items section you can customize the dropdowns options:

You can add a new option label, which is what appears to the visitor, or you can add a new option value. An option value is a good option if you want to have that field return information to be used internally by you or your agency. An Example would be a list of Oregon counties and the label will list out that county name to the visitor, but internally you want the records to just list those counties by ID.

You can also use the arrows on the left to reorder how you would like the options listed, as well as delete any that you want removed.

Here you can add new options using the field next to the blue add button: 

Use

This dropdown field contains 3 options. It is to set what you would like saved from this dropdown field on submission. The options are:

• ‘Save Value’, which would only save the internal value not seen by the visitor.
• ‘Save Label’, which saves the label viewed by the visitor
• ‘Save Both’, which saves both the label and value

Required

This makes this dropdowns selection necessary for form submission.

List Items

This section you to add numerous options to be selected. You can customize the text you want to display as Options on the left, use the arrows to control the order of the options, delete the options on the left, or add options using the field with the blue button:

Checked by Default

This checkbox allows you to control if the form loads with the checkbox checked or unchecked.

Checked value

This field allows you to choose what you would like the internal value of a checked checkbox to mean. Default of this is ‘Yes’ but since this is a value not seen by visitors, you can title this what makes sense to you or you agency. Example would be if you want to find out if people drive or walk to work. The checkbox label could be ‘Do you drive to work?’, but you could have this checked value be ‘drive’, and the unchecked value (see immediately below for this value) be ‘walk’.

Unchecked value

This field allows works inverse of Checked Value. It allows you to choose what you would like the internal value of an unchecked checkbox to mean. Default of this is ‘No’ but since this is a value not seen by visitors, you can title this what makes sense to you or you agency. Example would be if you want to find out if people drive or walk to work. The checkbox label could be ‘Do you drive to work?’, but you could have this unchecked value be ‘walk, and the checked value be ‘drive.

Paragraph Style

This dropdown allows you to select which HTML element or ‘style’ you would like the paragraph to display as. This can help with accessibility and easy perusal of the form. Options are (please click links for more information about these HTML elements:

• Paragraph
• Alert (not an HTML element but styled to direct attention to it)
• Heading 3
• Heading 4
• Heading 5
• Heading 6

Text

Here you add the text you would like to display in the paragraph.

Default Time

This allows you to set a placeholder time that displays in the field on default. Visitors can leave that time as is or edit it to their own specifications.

Min Time

This setting must be used in conjunction with Max Time. It places a line of text next to the field label that displays ‘(must be between <Min Time> and <Max Time>)’ to indicate to users an acceptable time to submit.

Max Time

This setting must be used in conjunction with Min Time. It places a line of text next to the field label that displays ‘(must be between <Min Time> and <Max Time>)’ to indicate to users an acceptable time to submit:

Default Date

This allows you to set a placeholder date that displays in the field on default. Visitors can leave that date as is or edit it to their own specifications.

Min Date

This setting allows you to set a starting date for the acceptable dates to be submitted in this field. The Calendar icons dropdown will limit the options to any date following the Min Date set.

Max Date

This setting allows you to set an ending date for the acceptable dates to be submitted in this field. The Calendar icons dropdown will limit the options to any date prior the Max Date set.

Default Datetime

This allows you to set a placeholder date & time that displays in the field on default. Visitors can leave that date as is or edit it to their own specifications.

Min Datetime

This setting allows you to set a starting date & time for the acceptable submissions for this field. The Calendar icons dropdown will limit the options to any date & time following the Min Datetime set.

Max Datetime

This setting allows you to set an ending date & time for the acceptable submissions for this field. The Calendar icons dropdown will limit the options to any date & time prior the Max Datetime set.

Max

This setting allows you to set a limit on the number the visitor can enter. The numbers will not be allowed to surpass the max set.

Min

This setting allows you to set a limit on the number the visitor can enter. The submission must be over the min set.

Step Value

This setting allows you to set ‘steps’ or factors for the numbers that are acceptable submission. An example would be if you want people to choose a multiple of 10 between 1 & 100. You could see the min to be 1, the max to be 100, and the step value to be 10.  This would limit the allowed submissions to: 10, 20, 30, 40, 50, 60, 70, 80, 90, or 100.