Is there a way to use Webflow's CMS data in a form select field without third-party tools or integrations?
TL;DR
- Webflow forms don’t support CMS-bound select fields natively, but you can create a hidden Collection List with the CMS data.
- Use custom JavaScript to read that hidden data on page load and dynamically generate <option> elements for your dropdown.
Webflow does not natively support dynamically populating form select fields with CMS data, and there is no built-in way to do this without custom code or third-party tools.
1. Limitations of Webflow CMS and Forms
- Webflow CMS can populate Collection Lists, rich text blocks, and other dynamic elements.
- However, form elements—like select dropdowns, checkboxes, or radio buttons—do not support CMS bindings.
- You can't directly bind a CMS collection to a select field's options inside the Designer.
2. Workarounds Without Third-Party Tools
While you can't achieve this directly in the Designer, you can use native Webflow elements and custom JavaScript (added inside the project) to simulate this behavior:
- Add a Collection List on the page that holds the CMS data you want in the dropdown.
- Style it to be hidden (using
display: noneor placing it inside a hidden container). - Use custom JavaScript to read the collection list items on page load and populate the
<select>field with them. - This doesn’t require external libraries or third-party integrations—just Webflow and native JS.
3. Example Setup Strategy
- Add a Collection List Wrapper with your CMS items.
- Each item outputs a hidden
<div>or<span>containing the needed value (e.g., city name). - Assign the wrapper or individual items a unique class (e.g.,
.cms-option). - Use JavaScript embedded in the Before </body> tag section of the Page Settings to:
- Read
.cms-optionitems. - Programmatically append
<option>elements to your target<select>.
This method uses Webflow-only tools (plus JS) and avoids third-party integration but still requires script logic for functionality.
Summary
Webflow doesn’t allow CMS data in form select fields natively, but you can use hidden Collection Lists + custom JavaScript—within Webflow itself—to simulate dynamic dropdowns without third-party tools.
