Problems

Currently, binding CMS fields to custom attributes is limited, leading to clunky workarounds:

• For true/false states (e.g., controlling an element's attribute), users must manually enter "true" in a Text Field, which is error-prone (e.g., typos like "True" or "ture" break functionality).

• Binding a Switch field requires a Code Embed and custom JavaScript.

• For elements like a custom <video> element, binding a poster image means pasting a URL into a Text Field instead of directly using an Image Field from the CMS, where you can control image dimensions and file size.

These issues make workflows unintuitive for non-technical clients and force reliance on JavaScript over efficient CSS.

Proposed Solution

Enable seamless binding of any CMS field (e.g., Switch, Image) to custom attributes on any element via the Custom Attributes panel. This would allow designers to control states using CSS attribute selectors (e.g., [data-state="active"]), reducing the need for JavaScript or error-prone manual inputs.

Use Case Example: Dynamic Two-Column Blog Layout

A client wants to toggle a rich text blog post between single- and two-column layouts for readability.

Ideal Workflow: Add a [data-two-columns="{{CMS switch binding}}"] attribute to the rich text element, bound to a "Use Two-Column Layout?" Switch field. Handle styling with CSS:

.text-rich-text[data-two-columns="true"] {
  column-count: 2;
  column-gap: 40px;
}

Current Workflow: Use a Code Embed with JavaScript, which is less performant:

const isTwoColumns = {{wf { CMS binding } }};

if (isTwoColumns) {
  const richText = document.querySelector('.text-rich-text');

  if (richText) {
    richText.style.columnCount = 2;
    richText.style.columnGap = '40px';
  }
}

Benefits

• Better Client Experience: Intuitive switches replace manual text entry, ideal for non-technical users.

• Fewer Errors: Eliminates typos that break features.

• Improved Performance: Use lightweight CSS for layouts instead of resource-heavy JavaScript.

• Empowers Designers: Enables more dynamic, state-driven sites in Webflow's no-code environment.