.svg)
.svg)
Multiple use cases can lead to a need to dynamically place and update options in a Select field based on an attribute in a CMS collection. In this article, we will see how to implement this feature on our Webflow site.
This tutorial will help you set up a dynamic select field based on a CMS collection. At Elias, we need to offer the user to select a job from the list of jobs in our CMS collection. So together, we are going to set up a form that will contain a Select field, which itself will draw its values (<option>) from our database.
Setting up the Select connected to the CMS
Several methods, each as simple as the next, exist to implement this functionality. Merci Webflow ;)
A bit of JS?
The first method is to add Custom Code before the tag <Body/> on our page.
Initially, we will need to add two classes to the following elements:
- Select field on our form
- Text connected to the CMS field we want to refer to
Once the classes are added, here's how much custom code you'll need to add to make the magic happen. Go to the settings of your Webflow page and copy the following code:
<script>
$ ('.select-text') .each (function () {
var s = $ (this) .text ();
$ ('.select-item') .append ('' +s+ '<option value="'+s+'">'</option>);
})
</script>
This code will allow you to find your select element on your page and fill it with all CMS elements whose name contains the class '.select-item'.
The Finsweet method
You can imagine that a feature so practical, so used by the Webflow community, and so quick to implement will necessarily have interested our friends at Finsweet.
They therefore set up a 3-step tutorial, just as simple as the custom code javascript method.
Add the Finsweet script to target CMS items and add them to a select field
<!-- [Attributes by Finsweet] CMS Select -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsselect@1/cmsselect.js"></script>
Use the HTML attributes of Select and Text elements
All you have to do is publish your site, and that's it!
In summary
It only took you a few minutes to set up a very practical feature on your Webflow site. You will now be able to use any field from any of your CMS collections to fill in a Select field in your forms.
For more Webflow Tips and Tutorials, feel free to visit our Blog or to ask us your question directly on elias.studio/contact
.jpeg)
.jpeg)
.jpeg)
.jpeg)
.jpeg)
.jpeg)
