Dropdown List Component

Form dropdown (can select multiple items).

On this page:

Last reviewed: December 1, 2022

Want to start your form with preloaded values? See Use Parameters.

Note: all form field names must be unique

For example, if you build your form by copying a component (e.g. to add a second Text Field), be sure to change the ID.

Using This Component

Add the component to the page between the Start of Form and End of Form sections of the Form Container component. It has four tabs: Title and Text, Initial Values, Constraints and Size.

Technical Restrictions

  1. This component must be placed between the Start of Form and End of Form sections of the Form Container component.
  2. We discourage building forms in shared content -- this practice may interfere with normal functionality, such as validation.

Configure - Main Settings

Title and Text Tab

Element Name: Specify the ID to be associated with this field when the data is stored or emailed. Required.

  • The ID must start with a letter, and can include only letters, numbers, underscores and hyphens.
  • The ID is not visible to the public.

Title: This is the descriptive label your visitor will see on the page.

Hint: Provide assistance for people completing the form. Appears in paler italics below the associated field.

Multi Selectable: Select if you would like visitors to be able to select multiple items in the dropdown.

Items:

  • Use the plus (+) button to build your checkbox options. Provide each selection as value=text, where value is the word that the UBCMS will collect in the form, and text is the descriptive label your visitor will see.
  • For example, entering the text UNDER=Undergraduate will create a checkbox with the text 'Undergraduate' beside it and collect a value of “UNDER” when the form is submitted.

Items Load Path: Indicate where customized content can be reused to populate this component; e.g. a list of all US states. (Developers only.)

Initial Values Tab

Default value: Stipulate a default value that will be displayed on the form and used unless the visitor makes a different selection.

Use parameters: Select if desired. Developers only!

  • Allows authors to preload this form value from the URL that loaded the form. 
  • e.g. If the field name is 'myfield' and the page URL is '…/form.html?myfield=123' then the default value of the field when the form is first loaded would be "123."
  • This can be useful to solve a variety of things, such as a contact form that is preloaded with a different 'To' address depending on which link was first clicked. While the initial destination would be pre-selected, the visitor could see that choice and adjust as necessary.

Constraints Tab

This tab controls whether completion of this field is required and what constraints are being enforced (for example, must be a phone number). May also be used to customize form error messages.

Required: Completion of this field is mandatory before submission of the form is permitted.

Required Message: Insert a custom message to be displayed if the submitter neglects to complete this if it is a required field.

Size Tab

Width: Set a maximum display size in pixels.

  • If left blank, this is set automatically based on the length of the field values. We suggest you leave this blank unless you need to fine tune the appearance.

See an Example

Below is a working example:

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)
(Required)