CMS Select Input

Populate select inputs with CMS data.

Additional code/setup

Add these scripts before the </body> tag

<!-- Call Code Select Script-->
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/countrycode.js"> </script>

Add a select input

Add a 'select' element, add 1 choice with the placeholder text and set the value as empty.

You add powerups to this select element.

Attributes

Structure

Your select input and the CMS that provides the data has to be in the same div block and be sibling elements.

This allows you to have multiple CMS select input instances without needing to change the attribute each time.

01

Select Input

Add this attribute to the Select input element.

Custom <div> attributes
data-cms-select
=
input

Notes: 

1. To have multiple CMS select inputs, you duplicate your existing elements and change the source of the CMS. No extra attributes needed.

01

Collection List Wrapper

Add this attribute to the Collection List Wrapper element not on the Collection List

Custom <div> attributes
data-cms-select
=
cms
02

Text Block

Add this attribute to the Text Block that is connected to the CMS field .

Custom <div> attributes
data-cms-select
=
text
03

Join our awesome Slack community with over 300+ Webflow users!

Seek support, vote on new features, stay updated and network with other community members.

Join Slack community