Learn how to add a custom <select> (dropdown) field to any USP Form.

Step 1

Use the following code for your Custom Field definition:

field#select|options#null:Option 1:Option 2:Option 3|option_default#Please Select..|option_select#null|label#Options
Step 2

Add the custom-field shortcode to your form, for example:

[usp_custom_field form="123" id="1"]

After adding to your form and saving changes, something like this will be displayed on the front-end:

USP Pro - Select Field

Another view, here is how the select field looks when the user clicks on it:

USP Pro - Select Field

Once you understand how it works in general, you can customize attributes like the label, options, and so forth. We look closer at the available attributes in the next section.

Note: To see a live example of a custom select field, check out the “Starter” form demo, included in USP Pro version 2.3 and better (visit USP Forms ▸ “Starter Form Demo”).

Attributes

Here are the attributes available for custom select fields:

  • field — specifies the type of custom field
  • options — list of options for the select field (include null for an empty option)
  • option_default — text to use for the null/empty field (default: “Please select…”)
  • option_select — specify the selected option
  • multiple — use multiple#true to make it a multiple select field*

* Multiple refers to whether or not the user is allowed to select multiple options. Here is a screenshot
Here is a screenshot of the “multiple” select field:

USP Pro - Select Field (Multiple)

View more custom-field attributes »

Note: USP Pro version 3.6 and better displays “fancy” category select fields by default. Here is a tutorial that explains how it works, and how to enable or disable the fancy fields.

Related