Customizing the Dropdown Field

Would you like to change how your forms’ Dropdown fields look or function? There are many ways to customize this type of field to suit your needs.

This tutorial will show you all the ways you can customize the Dropdown field in WPForms.

---

Before you get started, make sure WPForms is installed and activated on your WordPress site. Then you can create a new form or edit an existing one to open the form builder.

If you haven’t already, add a Dropdown field to your form by clicking on Dropdown in the Standard Fields section of the builder, or dragging and dropping this field into the form preview area.

Editing the Field Label and Description

First, you may choose to edit the label and description for your Dropdown field. Click on the Dropdown field you wish to customize in the form preview area to open its field options.

Changing the Field Label

By default, the field label will be “Dropdown.” In the Field Options panel, you can enter your own custom label to make this text whatever you want it to be.

Adding a Description

Field descriptions can provide users with more details and instructions for filling out your form. You can add one to your Dropdown field in the Description field in the Field Options panel.

Editing, Adding, and Removing Choices

Dropdown fields enable users to select from multiple options. You can customize these choices in the Field Options panel.

Editing Dropdown Choices

To customize the text for each of your Dropdown choices, type your desired label into the field provided.

To reorder your Dropdown choices, simply drag and drop them into the order in which you want them to appear.

You can preselect a choice by clicking on the radio button to the left of its label.

Adding or Removing Dropdown Choices

To add a new choice to your Dropdown field, click on one of the blue plus (+) buttons next to an existing choice in the field options.

The new choice will appear immediately after the one whose plus (+) button you clicked.

If you would like to add multiple choices all at the same time, click on Bulk Add.

Then enter each of your new choices on its own line. Once you’ve entered all of the options you want to include, click on Add New Choices.

Your new choices will be added after the last existing choice.

To remove a choice from your Dropdown field, click on the red minus (-) button next to it.

Requiring the Field

By making your Dropdown field required, you can ensure users make a selection before they submit your form.

To require your Dropdown field, toggle on the Required setting at the bottom of the field options.

If a user tries to submit your form without making a selection from this Dropdown field, they will see a message that reads, “This field is required.”

Enabling Multiple Options Selection

Typically, users can only choose one option from a Dropdown field. However, you can allow them to choose multiple options by configuring some settings in the advanced field options.

To enable multiple options selection for your Dropdown field, click on the Advanced tab in the Field Options panel.

Then toggle on the Multiple Options Selection setting.

Choosing a Dropdown Field Style

There are two styles available for the Dropdown field: Modern and Classic.

Modern Dropdown Style

The Modern style appears with a small, filled-in arrow that users can click on to expand the field’s choices.

No choice is preselected by default in a Modern Dropdown field.

If you enable multiple options selection, users will see the typical Dropdown field. When they click on the arrow to expand the available choices, they will be able to click on as many as they like to add their selections to the field.

Each selected choice will have an X button users can click to remove it.

Classic Dropdown Style

The Classic style Dropdown field appears with an open arrow that users can click to expand the available choices.

By default, the first choice listed in the General tab of the Field Options panel will be selected unless you preselect a different option or add placeholder text to the field.

If multiple options selection is enabled, users will see this field as a list of choices. They can click on a single option to select it, or press the Shift key on their keyboard and select multiple items.

Selected choices will appear shaded.

Changing the Field Size

You can adjust the width of your Dropdown field in your published form by selecting Small, Medium, or Large from the Field Size dropdown.

This option is especially helpful when creating a multi-column layout.

Adding Placeholder Text

You can add placeholder text to your Dropdown field to give users additional instructions about how to make their choices. This option also prevents a Classic Dropdown from preselecting the first choice.

To add placeholder text to your Dropdown field, enter your custom text in the Placeholder Text field in the advanced field options.

Using Dropdown Dynamic Choices

Dropdown fields can pull data from your site such as taxonomies and content titles to use as choices. These options will automatically update in your forms as you change them elsewhere on your WordPress site.

To enable dynamic choices, open the advanced field options. Then select Post Type or Taxonomy from the Dynamic Choices dropdown.

Hiding the Field Label

Finally, you may toggle on the Hide Label setting to hide your Dropdown field’s label in your embedded form.

That’s it! You can now customize your forms’ Dropdown fields so they look and work the way you want them to.

Next, want to add conditional logic to your Dropdown fields? Check out our tutorial on using smart conditional logic in WPForms.