How can I use a jQuery-based databinding utility library to bind a CMS Collection to a Webflow Select form control in Webflow?

TL;DR

Add a hidden Collection List bound to your CMS, using a hidden element with data-* attributes for each item.
Insert a Select element in your form and manually add a default option.
Use jQuery to loop through the hidden CMS items and append them as <option> elements to the Select.
Optionally, use the Webflow CMS API for dynamic loading if needed, though it's more complex.

You can bind a Webflow CMS Collection to a Select form control using a jQuery-based data binding library like Rivets.js or Knockout.js, though jQuery alone is often sufficient for this. Webflow does not natively support binding CMS data to form controls, so this requires custom JavaScript.

1. Add a Hidden Collection List

Add a Collection List to your page and bind it to the CMS Collection you want to pull data from.
Inside the Collection List, include a hidden element (like a div or span) that holds each item’s value using a class or data-* attribute (e.g., data-option-name).
Set the Collection List’s display to none so it doesn’t show on the live site.

2. Add a Select Form Control

Add a Select element in your form where you want users to choose from CMS data.
Add a default option manually (e.g., "Please select a value").

3. Write Custom jQuery to Populate the Select

At the bottom of your page (before the closing </body>), add the custom script via Page Settings → Before </body> tag or a Site-wide Embed if site-wide.
Use jQuery to loop through the hidden CMS List and append options to the Select.

Example:

<script>
  $(document).ready(function() {
    // Loop through each CMS item
    $('.cms-option-item').each(function() {
      var optionText = $(this).data('option-name'); // e.g., data-option-name="Category A"
      var optionValue = $(this).data('option-value') || optionText;

      // Append to the Select element
      $('#your-select').append(
        $('<option>', {
          value: optionValue,
          text: optionText
        })
      );
    });
  });
</script>

Replace cms-option-item with your actual class and #your-select with your real Select element's ID or class.
If using a data binding library like Knockout.js, you would bind the CMS items to a JavaScript array and use data-bind="options: yourArray"—but this is usually overkill in Webflow.

4. (Optional) Load CMS Data via Webflow’s API

If you want more dynamic behavior or need to fetch CMS data asynchronously, use the Webflow CMS API (requires authentication) to fetch CMS items and populate your Select via AJAX.
This avoids needing a hidden Collection List but adds complexity due to authentication requirements.

Summary

Use a hidden CMS Collection List and jQuery to read CMS item values and populate a Select form field. This method is Webflow-friendly and avoids the need for complex data-binding libraries unless your project demands more reactive data updates.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer