How to add an attribute:

close icon
Hey! Give us some feedback here.
Forms

CMS Select

Create dynamic Form Select element with Webflow CMS Collection List.

781,967

loads per month

CMS 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.

navigator arrow
TEXT VALUE
I want this

Text Element

inside a Collection List Item to be the dynamic content for the Select Field
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsselect-element
copy icon
Value
text-value
copy icon
Check live example here
This text is the source for the Select Field value. Select values will be dynamically generated based on the this element.

For example, if there are 10 items in this Collection, the Select will generate 10 options and each option value will be this "text-value" element.

This List will automatically be removed from the page once its content is added to the select field. It is only used to get the dynamic data. It is not for display purposes.
how to add cms select text value attribute
navigator arrow
SELECT
I want this
select icon

Select Field

to display the dynamic content
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsselect-element
copy icon
Value
select
copy icon
This is the dynamic Select Field on the page.

Each Collection Item from the List will be added as a new option in the Select Field.
how to add cms select attribute

Working examples

See this solution working live in this Webflow project.

Example 1
Add CMS items to a form select field
These dynamic items
United States
India
Brazil
Spain
Italy
France
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Copy and paste this example directly on Webflow
locked icon
Coming soon

Combinations using CMS Select:

You can combine this Attribute with others to create more complex solutions.

Frequently Asked Questions

Everything you need to know about this attributes solution.

No FAQ items found yet. Join Finsweet Community on Slack if you have any question related to this solution.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

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