How can I include HTML code as a field in a Webflow Collection?
TL;DR
- Use a Rich Text field with Custom Embed blocks to insert and render HTML like iframes or scripts.
- Alternatively, use a Plain Text field with an Embed element on the page, binding the field via Webflow’s dynamic CMS binding to render raw HTML.
To include HTML code in a Webflow Collection, use the Rich Text field with custom embeds or plain text field with HTML rendering inside a Custom Code Embed.
1. Use a Rich Text Field for HTML Embeds
- In your Collection Schema (CMS), add a Rich Text field.
- When editing a collection item, click inside the Rich Text editor.
- Click the “+” icon > Custom Embed and paste your desired HTML code (iframe, script, etc.).
- Webflow will save and render this HTML when you bind the Rich Text field to a page element.
2. Use a Plain Text Field with an Embed Element
- In the CMS schema, add a Plain Text field.
- Enter your raw HTML code directly into this field (e.g.,
<div class='my-component'></div>). - On your Webflow page, add an Embed element (from the Add panel).
- Use Webflow’s CMS field binding inside the Embed element like this:
{{wf {"path":"html-field","type":"PlainText"} }}
(This binding is auto-generated when you connect the CMS field inside the Embed component.)
Important: Ensure HTML inside Plain Text fields does not contain double quotes unless properly escaped, or use single quotes instead.
3. Security & Limitations
- Webflow sanitizes all HTML in Rich Text fields except for what’s inside Custom Embed blocks.
- HTML in Plain Text fields is not rendered unless parsed manually via Embed elements.
- You can't execute JavaScript from CMS fields directly, for security reasons.
Summary
To include HTML code in a Webflow Collection, use a Rich Text field with Custom Embeds for safe, flexible HTML insertion or a Plain Text field combined with the Embed element to dynamically render raw HTML in the Webflow Designer.