How can I add a dropdown selector to a contact form in Webflow while replacing the text fields?

To add a dropdown selector to a Webflow contact form and replace a text field, you’ll need to modify your form structure using the Webflow Designer.

​

1. Delete the Existing Text Field

​

• Select the form on your Webflow page.
• Click the text field you want to replace.
• Press Delete or right-click and choose Delete to remove it.

​

2. Add a Dropdown Element

​

• In the Designer, go to the Add panel (press A).
• Under Forms, drag the Dropdown element into the spot where the text field was.
• The dropdown will contain a default label ("Select...") and a list of options.

​

3. Configure Dropdown Options

​

• Click the dropdown to open its settings in the right-hand panel.
• Click the Dropdown List to reveal the default options.
• Select each Dropdown Link and change its text and link settings as needed.
• To add more options: Duplicate an existing Dropdown Link or drag in new ones.

​

Note: The default “Dropdown” element is a navigation trigger, not a form input. For a functional form input, you should instead use a Select field, not a Dropdown.

​

4. Use the Correct Form Element: “Select” Field

​

• Go to the Add panel.
• Under Forms, drag a Select element (not Dropdown) into the form.
• Click the Select Field, then click on it again to access properties in the right-hand settings panel.
• Add or remove options in the Select field’s settings.
• Set the field's Label, Name, and any Default Option as needed.

​

5. Adjust Style and Behavior

​

• Style the Select field to match your form’s design.
• Optionally, make it required by checking the Required checkbox in the Element settings panel.
• Test the form in Preview mode to ensure it works as expected.

​

Summary

​

Replace the text field with a Select form element (not a Dropdown component) to properly add a dropdown selector to your Webflow contact form. Configure the options, adjust styling, and test it within the form structure.