Dropdown Field

The Dropdown Field is a list-based input where users select one option from predefined choices. Use it for countries, categories, product types, and other structured selections.

This guide walks you through adding and customizing the Dropdown field in Fluent Forms.

Adding Dropdown Field

Go to Forms from the Fluent Forms navbar, select the form you want to edit, and click Edit to open the form editor.

NOTE

If you do not have any existing forms, see How to Create a Form with Fluent Forms or Create a Form using Templates.

On the Editor page, click the Plus icon and open General Fields. You can also find General Fields in the right sidebar under Input Fields.

Click or drag the Dropdown field into the editor.

Customizing the Dropdown Field

Hover over the field and click the Pencil icon to open Input Customization:

• Dropdown Field Options
• Advanced Options

Dropdown Field Options

A. Element Label: The field title users see on the form.

B. Label Placement: Set label position to Top, Left, Right, or Default.

C. Admin Field Label: A label shown only to admins when viewing submissions.

D. Placeholder: Hint text shown when no option is selected.

E. Options: Manage dropdown choices:

• Add items users can choose from
• Set a default selection
• Show values for admin reference
• Drag to reorder options
• Use the Plus icon to add options

F. Show & Calc Value: Display values and use them in numeric calculations.

G. Bulk Edit / Predefined Data Sets: Import predefined datasets (for example, countries or states) instead of adding each option manually.

H. Shuffle the available options: Randomize the option order for each visitor.

I. Enable Searchable Smart Options: Add a search box for long dropdown lists.

J. Required: Require a selection before submission.

Option Grouping

Option Grouping organizes related choices under bold heading labels rendered as native HTML optgroup blocks on the frontend.

Under Options, turn on Enable Option Grouping. The flat options list becomes a grouped layout.

Configure Groups and Options

• Create New Option Group: Add a new option category
• Group Label: Enter the non-selectable heading text (for example, Group 1, Group 2)
• Manage Choices Inside Groups: Use + to add entries, edit labels and values, or − to remove rows
• Reorder & Remove: Drag to reorder groups or individual options. Use the trash icon to delete a group and all nested choices

NOTE

Turning Enable Option Grouping off flattens your structure. Grouped choices merge into a single list and group header labels are dropped.

Advanced Options

A. Dynamic Default Value: Pre-fill the field using shortcodes. See Dynamic Default Value in Fluent Forms.

B. Container Class: Custom CSS classes for the field wrapper.

C. Element Class: Custom CSS classes for the input field.

D. Help Message: Guidance text shown below the field.

E. Name Attribute: The HTML name attribute. You usually do not need to change this.

F. Conditional Logic: Show or hide the field based on other values. See Set up Forms with Conditional Logic in Fluent Forms.

Embed the Form into Frontend

Click Save Form, then Preview & Design to preview your changes.

Copy the form Shortcode and paste it into a Page or Post.

Preview of Added Dropdown Field

Here is a preview of the form with the Dropdown field.