How to add an attribute:

close icon
Hey! Give us some feedback here.
Forms

Custom Form Select

Use a Webflow Dropdown element as a Webflow Form <select> component

Custom Form Select
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

Required for minimum setup

The only attribute required for setup is dropdown.

navigator arrow
Dropdown
I want to use this Webflow
select icon

Dropdown

See how it works
see webflow attributes
component as my <select> component design
Add this attribute
Description
Name
fs-selectcustom-element
copy icon
Value
dropdown
copy icon
Webflow Dropdown component that will serve as the designed Select component.

This Dropdown will 'mirror' the content that is in the nested Select. If there are 10 options in the nested Select, those 10 options will populate in this Dropdown List.

It is required to have a Link / Link Block as the "option template". The Link / Link Block template must be inside the the Dropdown List. The Link / Link Block template must have a single text element inside. This text element will be the dynamic text that mirrors the Select component. See screenshot below.

As you select options (Link / Link Blocks) inside the Dropdown List, those options will be selected in the Select component. It will mirror the selections.

The nested Select can be used for Webflow Form submissions, with Attributes' CMS Filter, and Attributes' CMS Sort.
how to add a selectcustom dropdown attribute
navigator arrow
Select
I want to use this Webflow
select icon

Select

See how it works
see webflow attributes
component as the source content for the Dropdown component
No attributes needed for this Select component.

It is required that to have this nested somewhere inside the Webflow Dropdown component.

This Select component will be the source of the content that populates the custom designed Dropdown component. This Select component should hold the final content of the custom Select options.

Integrates with Attributes' CMS Select for dynamic custom Selects!
how to add a selectcustom reset attribute

More attributes to use

Below is a list of attributes that can be used to further customize.

navigator arrow
Label
I want to use a second
See how it works
see webflow attributes

Text Block

in the Dropdown Toggle
Add this attribute
Description
Name
fs-selectcustom-element
copy icon
Value
label
copy icon
Required if more than one text element is used inside the Dropdown Toggle. If there is only one text element inside the Dropdown Toggle, this attribute is not needed.

Place this attribute on the content inside the Dropdown Toggle that should update with the currently selected option inside the Dropdown. This is the text element that should be dynamic based on what's currently selected.

If "Spain" is the option chosen in the Dropdown List, the label text will update as "Spain".
how to add a selectcustom label attribute
navigator arrow
Option reset
I want to change the "Select an option" option with a custom "Reset" message when an option is selected
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-selectcustom-element
copy icon
Value
option-reset
copy icon
Optionally customize the "Select an option" option inside the Select when an option is selected.

For example, if "Spain" is selected, instead of seeing "Select an option" as the first option of the Dropdown List, change the message to "Reset selections".

Place this attribute on a Link / Link Block inside the Dropdown List. This Link / Link Block will be used as the content for the "Select an option" option when an option is selected.

See Example #3 below for visual.
how to add a selectcustom reset attribute
navigator arrow
Hide initial option
See how it works
see webflow attributes

Option

Hide the initial option in the Dropdown List when no option is selected
Add this attribute
Description
Name
fs-selectcustom-hideinitial
copy icon
Value
true
copy icon
Use this option to hide the "Select an option" option in the Dropdown when there is no option selected.

For example, when the user first interacts with the Dropdown and clicks "Select an option" in the Dropdown Toggle, the Dropdown List will not show "Select an option" as an available option. The Dropdown List will start will options that hold values, like "Spain".

Leave the value of the "Select an option" option empty.

See Example #3 below for visual.
Where?
Add to the element with fs-selectcustom-element = "dropdown"

States and interactions

'Current' and 'Focus' state management is required for accessibility.

navigator arrow
States and Interactions
More information about states and interatctions
See how it works
see webflow attributes
No attributes needed. Fully integrated to Webflow's native states and interactions.

Active state of Link / Link Block elements in the Dropdown List use the Webflow native 'Current' state.

Accessible keyboard navigation uses the Webflow native 'Focus' state.

The Dropdown component used in this solution is fully compatible with native Webflow Interactions.

Working examples

See this solution working live in this Webflow project.

Example 1
Custom Form Select - Simple
Select an option
We are showing this select field as example. You can hide it ;)
Link Template
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Copy and paste accessible Custom Selects for your project
locked icon
Clone Accessible Components UI KIT
new
Example 2
Custom Form Select - Required label example
Country
Select
We are showing this select field as example. You can hide it ;)
Link Template
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Copy and paste accessible Custom Selects for your project
locked icon
Clone Accessible Components UI KIT
new
Example 3
Custom Form Select - Reset option with hide initial option
Select
We are showing this select field as example. You can hide it ;)
Link Template
back arrow
Reset selection
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Copy and paste accessible Custom Selects for your project
locked icon
Clone Accessible Components UI KIT
new
Example 4
Custom Form Select - Webflow Interactions
Select an option
We are showing this select field as example. You can hide it ;)
Link Template
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Copy and paste accessible Custom Selects for your project
locked icon
Clone Accessible Components UI KIT
new

Developer documentation

external link icon

Next time implement inside Webflow

external link icon

Need help? Use the Automated Support Service

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.