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.