Dropdown fields allow users to select an option from a list of options. The options will only be visible when the user clicks the dropdown arrow, so you can add as many options as needed and it won't take up unnecessary space in your form.
Standard field options
A Dropdown field has the following standard options:
Field-specific options
In addition to the standard field options, Dropdown fields have several field-specific options. Browse the sections below to learn more about the options specific to Dropdown fields.
Add Option
Click this button to add a new option to your field.
Reorder individual checkbox, radio, or dropdown select options by moving the drag and drop icon
When a duplicate option value is added to the list of options, a popup message is displayed to avoid issues with duplicate option values getting added to a field.
Bulk Edit Options
Checkboxes, dropdowns, and radio buttons have a Bulk Edit option which allows you to add, edit, or remove a lot of options quickly.
You can use this to easily add a large number of choices to your field by typing them into the box that appears when you select Bulk Edit Options. You can also use this option to populate your field choices with a ready-made list of Countries, U.S. States, U.S. State abbreviations, age ranges, levels of satisfaction, importance, or agreement.
To bulk edit options with separate values, put the label, followed by a |, followed by the value. For example:
Excellent|10
Very Good|8
Fine|5
Not so great|3
Poor|1
Add Other
Allow users to enter free text with an 'Other' option. Click the 'Add Other' box to add this option.
Use separate values
Check this box if you would like to store an entry as a value distinct from the selected value. For example, if your user selects black t-shirt, you can store the value as black t-shirt $25.00. Read more about separate values.
Multiselect
Check Multiselect to allow users to select multiple options from a dropdown. The user needs to hold down command or control to select more than one option.
Autocomplete
Select Autocomplete if you want to provide suggestions to users as they type in a search query. This feature uses the Slim Select dropdown library, enabling autocomplete on mobile devices.
When Multiselect and Autocomplete are both selected, the user can easily choose multiple options without the need to hold down command or control keys.
Default values and field icons
You may set a dynamic default value in your Dropdown field. If you would like to retrieve a value from an entry see the Get a Value From an Entry page. If you would like to set a default value with one of our dynamic shortcodes, see the Default Values page.
The default value icons can be used to specify whether an option selected in a Dropdown field on the form builder page should be a default value or a placeholder. Learn how to set a default value and how to set a placeholder in a Dropdown field.
Field action icons allows you to duplicate, delete, and/or move a field on the form builder page. See field action icons for more information.
Display Dropdown fields
Display the value submitted in a Dropdown field in a form's confirmation message, email, or View.
- Display submitted option(s): Display the option(s) selected in a Dropdown field.
[x]
Replace x with the ID or key of the Dropdown field.
- Display saved value: If using separate values and you would like to display the 'Saved Value' use:
[x show="value"]
Replace x with the ID or key of the Dropdown field.
- Separator: If 'enable multiselect' is checked, you may use a different separator for Dropdown field values. By default, this will be a comma.
[x sep=", "]
Replace x with the ID or key of the Dropdown field.
Related developer hooks
- Populate a Dropdown field with WordPress posts with the frm_setup_new_fields_vars hook.
- Remove used options with the frm_setup_new_fields_vars hook.
- Add a user list to a Dropdown field with the frm_setup_new_fields_vars hook.
- Create a new set of preset Bulk Edit options with the frm_bulk_field_choices hook.
- Revert to using Chosen JS as the autocomplete dropdown library with the frm_use_chosen_js hook.