Dropdown

Use this widget to ask the user a question and give the user the opportunity to select only one of many predefined answers. Use this widget, if the list of answers is long. A dropdown list is a dropdown box with a predefined list of entries and the label of the box is the question that you want to ask.

After you have added the Dropdown form widget in your form and opened its settings, the Dropdown window appears, displaying the following sections:

In this section, perform the following:

1. In Label input field enter the label of the dropdown list.
   The label of a dropdown box is a question, which possible answers are given in a predefined dropdown list of entries.
   For example, Which country are you from? or Country
2. Optionally, in Instructional text, enter instructions or explanatory text for the Dropdown widget.
   The text is displayed bellow the label.
3. In Choices fields, enter the possible answers to the question you have defined.
   By default, there are three input fields. If you need more or less choices, add and remove input fields by clicking  (Add) and  (Remove) of the respective field.

   RECOMMENDATION: We recommend that you have at least two choices, otherwise, use a Checkbox widget.

4. In the LABEL column, in each input field, enter an answer (choice).

   NOTE: You can also use the Add many button, to add a longer list at bulk. You can also use a set of predefined list that you can find useful, such as Timezones or Countries.

5. Optionally, in the VALUE, assign a value to each answer.
   For example, if your question is How many pets do you have? and your answers are Zero, One, Two, More, you can also assign numerical values to these answer that you can later sum faster.
6. Optionally, in DEFAULT column, you can select a choice that will be selected by default when the form is displayed to the user.

   NOTE: You can create a blank choice and leave it selected by default, so that the user can start without having anything preselected.

7. In Sort choices, you can choose to sort the choices alphabetically or leave the sorting in the order that you have created the choices.
8. If you want to make the dropdown mandatory, select the Required field checkbox
   A textbox appears, where you enter the error message that is displayed, if the user does not select anything.
9. If you want this field to be visible in the form only when certain conditions are met, select Hide field initially checkbox.
   You can then use form ruled to display the field. For more information, see Form rules.

In this section, perform the following:

1. In Template dropdown, you can select a template other than the default one that will be used to display the Dropdown on the website.
   You must first have created a custom template.
   For more information, see Next.js pages and templates.
2. In Field size, you can choose the size of the dropdown box.
   Choose from the predefined values of none, small, medium, or large.
3. Save your changes.

To open the advanced settings, in the upper-right corner of the Dropdown widget page, click  (Advanced settings).

Apply custom CSS

In CSS class input field, you can choose a class name for the dropdown, if later you want to set a CSS style for this particular widget.

Developer name

You can change the automatically generated name for developers of this dropdown box by and entering the new name in the input field that appears.
This is the name of the field that is used by developers to refer to this dropdown box in the code.

Save your changes.