Webflow sync, pageviews & more.
NEW

How can I hide these fields on Webflow if there is no CMS entry for them?

TL;DR
  • Use Webflow’s Conditional Visibility to show elements only when the connected CMS field is set.
  • For multiple fields, apply individual conditions to the parent wrapper or use custom JavaScript if complex logic is needed.

To hide CMS-connected fields in Webflow when there’s no entry for them, you need to conditionally hide the element using Webflow’s built-in features for empty fields.

1. Use Conditional Visibility in the CMS Collection List

  • Select the element (like a text block, image, or link) that is connected to a CMS field.
  • In the right-hand panel, go to the Settings tab (gear icon).
  • Scroll to the Conditional Visibility section and click + Add Condition.
  • Choose "Element is visible when [field name] is set".
  • This will automatically hide the element if the CMS field is empty for that item.

2. Hide Wrapper Elements (Optional)

  • If you want to hide an entire section or div when multiple fields are empty, you can:
  • Add Conditional Visibility to the parent wrapper using “is set” conditions for each field individually.
  • Note: Webflow doesn’t allow combining multiple “is not set” conditions natively — you may need custom JavaScript for complex logic.

3. Double Check CMS Field Content

  • Some fields might contain invisible characters (like spaces) which Webflow treats as “set”.
  • Ensure the fields are fully empty in the CMS for Conditional Visibility to work correctly.

4. Alternative Using Custom Code (as a last resort)

If you’re trying to hide elements based on multiple blank fields, and Webflow’s native conditions aren't sufficient:

  • Consider adding custom JavaScript to hide elements when their content is blank on page load.
  • Example: Use querySelectorAll to find elements with empty innerText and hide their parent.

However, native Conditional Visibility is preferred for performance and maintainability.

Summary

Use Conditional Visibility rules in the Webflow Designer to hide elements connected to CMS fields when those fields are empty. This is the most efficient and no-code solution. Use custom code only if you need more complex conditional logic.

Rate this answer

Other Webflow Questions