Unique HTML code (from Plain Text field) not rendering on CMS page

Hey Webflow Community,

I’m brand new to Webflow (total novice). I’ve created a plain text field in a collection and pasted HTML code in there to render a table on just one page. When I use an embed element on the design template and paste the HTML directly in, the table is rendered no problem. However, it renders on every page in the collection (not wanted). I need unique tables on each CMS page, hence the creation of the plain text field populated with HTML code in the collection.

When I tell the embed element on the collections page to +Add Field and pull from the plain text field in the collection that I titled “table code”, it renders it as plain text on the page and not as the table. Does anyone know what I might be doing wrong here?

The test table code I’ve been using (which is pasted into a plain text field in the collection settings).

What the table looks like if I embed it directly into the embed element (no good because it shows up on every page of the collection).

13%20AM

2 Likes

Can you share your share link and the whole code of the HTML?

Hey @c-mac! Welcome to the Webflow Community!

I ran into a similar issue very recently and tried to achieve the same thing — adding my code to a CMS field and trying to reference it on my CMS page. The issue you’re running into is exactly what happened to me as well.

Unfortunately, I don’t think there’s a workaround for this at the moment. I ran the issue by @rileyrichter (WF Staff) back then, and he confirmed that you can’t add script to the CMS and have it render on-page in an embed.

Ben — any ideas here?

Hi!

Thanks for the reply. Here is the read-only link to the site.
https://preview.webflow.com/preview/af-ce-playbooks?utm_medium=preview_link&utm_source=designer&utm_content=af-ce-playbooks&preview=bd850e21b7780550fbd4a929b5319480&pageId=5d029764c0e3a8782b60a647&itemId=5d029764c0e3a8977d60a70b&mode=preview

And here is the complete table code…

.tg {border-collapse:collapse;border-spacing:0;} .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;} .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;} .tg .tg-m3se{background-color:#ffccc9;border-color:inherit;text-align:center} .tg .tg-90e1{background-color:#ffccc9;border-color:inherit;text-align:left;vertical-align:top} .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
X X X
X X X
X X X

Your issue helped inspire me to create a solution that handles complex decoding issues. I needed it for a client so I made a blog post tutorial. You should be able to follow my instructions and use the code to resolve your issue. Please let me know if it works for you. I need a tester following my instructions.

3 Likes

This looks great! Unfortunately, I must be missing a step or getting something else wrong because I can’t get it to work for me.

I have the jsdelivr.net/npm/he@1.2.0 script (the script from your instructions) pasted into the custom code head tag in the settings of the template page. (Note: I couldn’t find this script on the site you referenced jsDelivr.com)

I also have the HTML code I want in a plain text field in the collection page and told the embed element on the page to pull from that field but it still doesn’t render.

I also tried converting the HTML to Javascript to see if that had any affect. It seemed like your directions were saying to convert to Java but later in the demo you used HTML code to embed so I wasn’t sure.

In any case, I must be missing something. I am totally new to this stuff, but I wasn’t able to get your solution to work for me.

Sorry to hear you are struggling. Here is a link to my read-only project you can check your work against.

The link to the he script was in the codeblock below the paragraph that linked to the homepage of jsdelivr.com.