Use CMS data in custom attributes

Hello everyone, I am getting stuck in (what initially I thought should be something simple), I am trying to populate some input fields with some CMS Collection data. I read that there is this new feature for custom attributes.

In the Settings from the desire Input, I go to Custom Attributes, then fill it up with:

Name: data-value
Value: Here I choose the CMS Item, when I select it is displayed as “{{ CMS ITEM }}”

But nothing happens, even try it in different components.

Could someone, please, give more information about this. I am trying to avoid custom code, for that only need.

Thanks,


Here is my public share link:
https://preview.webflow.com/preview/ruta-del-votante?utm_medium=preview_link&utm_source=designer&utm_content=ruta-del-votante&preview=f8d52c86dd5f766a0fa80eb9ea2ae90b&pageId=64e034f16321200c4cf8e7f8&itemId=64e037dfc8bff842f897b26e&workflow=preview

You need to set the value attribute which is unfortunately reserved.

The only way around this is custom code, but if you want to avoid writing that code yourself, here’s an attributes-based lib that makes it easy to override custom attributes.

Add this lib and then the custom attribute you create would be prefaced with x-, in your case x-value will override value on page load.

You shouldn’t need to use custom code for this.

You mentioned you read about a feature for this, is it this one?

If so, you’re correct, you should be able to do as you’ve described.

Components can be a bit tricky.

My suggestion is to create a new page and test this, in isolation, outside of a component.

Try to get the most basic version of this working, with the most common of approaches, first. Then when it does work weave that into your existing site / page.

Also. That doesn’t sound right to me.

You can see from the screenshot in the link I posted, and from what I’ve personally experienced, is that the actual field name is populated not the literal {{ CMS ITEM }} so something may be either wrong with your account (reach out to Webflow support), or the component is doing something funky (rule that out with my suggestion above).

Hello @ChrisDrit it is exactly as you are describing, the only thing is that it not literally said {{ CMS ITEM }}, but the actual name of the CMS item. I would test it as you suggested, in a blank project, and scaled it,

Thanks for both answeres @memetican and @ChrisDrit