Webflow CMS & Collection Lists

How to Store Custom Code in a CMS Text Field

Overview
CMS Basics
Strongly-typed Data-binding
11:45
101
CMS Field Types
11:45
102
Sorting Collection Lists
Sorting by OPTION & REF Fields
13:43
201
Random, Dynamic List Sorting
202
Filtering Collection Lists
Filtering Collection Lists
11:45
250
Working with Collection Lists
How Collection List Pagination Works
3:46
301
Unbinding Collection Lists
3:46
302
Hide an Entire Section w/ Empty Collection Lists
7:00
303
Nesting Collection Lists
304
Display Filename for Download
Int
305
Collection Lists & Custom Code
How to Store Custom Code in a CMS Text Field
Int
400
How to Bind CMS fields to Custom Attributes
Int
401
Collection Pages
Collection Pages
501
No items found.

Whether you are needing to store a chunk of CSS, some custom script, or a Soundcloud podcast embed, sometimes you need to store custom code in a CMS field.

Currently [ Nov-2022 ], Webflow does not have an HTML Embed field time for the CMS, which means you probably want to use a multiline text field. But there's a problem...

Whatever content you put into that field gets HTML-encoded in the final result. This is a result of the way Webflow handles embedded fields in HTML Embeds- any fields you insert will be HTML encoded.

In most situations, this is the right behavior, but not when you want functioning code, or structured JSON data.

Fortunately, there are solutions.

Solution #1 - Use the "Rich Text Embed" Quick Hack

The CMS does not yet have an HTML Embed field type, however it does have a Rich Text field type, and Rich Text content can contain HTML Embed content.

Therefore one way to do this is to create a Rich Text field in your CMS Collection, and then in that Rich Text field content, you add an embed and paste your content in there.

Jeff ( @webdev )in the Webflow forums detailed this approach;

  1. Add a rich text field to your CMS Collection
  2. In the CMS view ( designer or editor ) edit that field and drop in a custom code embed
  3. Paste your html / css / script / JSON in there
  4. Bind that Rich text field to a rich text element

It's hacky, and inconvenient to see or edit the code as it requires an extra couple of clicks, but in this setup Webflow will render that custom code without HTML encoding it, and it should work fine.

Solution #2 - NOCODE solution

Sygnal Attributes decode-html Attribute

Add one library reference, and one custom attribute, and your text contents will be automatically decoded for you.

Downside here is performance. The decode happens after the page has loaded, so there is a brief delay before the decoded content will appear.

Docs are here.

Solution #3 - Decode your Encoded HTML Content w/ Script

Another approach is to bind your plain text field to an element, and allow Webflow to HTML encode it. Then in your resulting page, use script to decode it.

This is a funky approach I’ve used before, which is a self-replacing script. Place your HTML Embed where you want the decoded content to go. Drop this script in and put your embedded field that allows you to easily position the decoded content.

When the document renderer hits the script, it will process it, decode your HTML, and then replace the script element with the newly decoded element.

Restrictions- in this approach, your encoded content cannot contains any backticks (`), because it will likely break the script.

<script>
(function() { // IIFE

    // Replace this string with the CMS field you are decoding
    var htmlString = `YOUR CMS FIELD EMBED HERE`;

    // Prepare your decoded content
    function decodeHtml(html) {
        var doc = new DOMParser().parseFromString(html, "text/html");
        return doc.documentElement.textContent;
    }
    var decodedString = decodeHtml(htmlString);

    // Create a new element to hold it
    var newElement = document.createElement('div');
    newElement.innerHTML = decodedString;
    
    // Replace this script with the new element
    var scriptElement = document.currentScript;   
    scriptElement.parentNode.replaceChild(newElement, scriptElement);
})();
</script>

Manual Scripting Solution

Another solution ( similar, but manual setup ) is shared here;

Precise Conversion

If you are working with precise data, such as a JSON payload, and you need it to be 100% cross-browser support, I recommend that you instead use the HTML Entity ( he ) library on Github.

Resources

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.