HTML in a Collection

Design help CMS
1

Hi All,

I am trying to get HTML code to show up on a collection page. I have hundreds of fields and I really don’t want to hand format every rich text field for every entry. So, I created a script that turns my content into HTML, then I want to upload that code into a Collection field.

So far, I have tried putting the code in a Rich Text field. Didn’t work.
Putting the code into a multi-line text field and then try to dynamically put it in an Embed element. Didn’t work.

Does anyone have any way to include HTML as a field in a Collection?

Thank you in advance,

John

Here is my public share link: Webflow - Directory2

2

Rich text fields should provide well for basic HTML - paragraphs, headings, lists, images, etc.
If you need other elements or unusual constructions you need to do an HTML embed.

Webflow’s CMS does not have an HTML Embed field type, however the Rich Text field does offer it as a sub-element type, in the same way it supports video and images.

You can store your custom HTML inside of an HTML embed that is inside of a rich text field. Bind that to a rich text element on your canvas and you’ll get your custom HTML.

3

I think I follow what you are saying.

  1. Put a Rich Text Field in a Collection List Item
  2. Put and HTML Embed in the Rich Text Field
  3. Bind the HTML Embed to the Collection’s Rich Text Field that stores the HTML

If I understood this correctly, then unfortunately, this doesn’t work. I can’t bind a Collection field to an HTML Embed Element within a Rich Text Field.

If I create the HTML Embed in the Collection Item List, I can’t bind it to a Rich Text Field. I can bind it to a text field, but unfortunately, that doesn’t display the HTML correctly.

I’m not trying to do any tricky HTML. Just headings, bullets, and paragraphs.

4

I do this regularly though the API. Raw HTML, via the API, into a Collections Rich Text field.

What exactly “didn’t work”, did you get some errors? What are the error messages?

5

Hi Chris,

I have tried binding the HTML (in the collection as a Rich Text Field) to a Rich Text Field in the Collection List. It shows the raw HTML instead of the formatted HTML. Example <‘bold>Text<’/bold> rather than bolded text.

If I create a Rich Text Field, then create an Embed within it and manually paste the HTML in it, this works fine. However, when you put an Embed within a Rich Text Field in a Collection list, you can’t bind a Collection Field to it.

If I create an Embed on its own in a Collection List, I can not bind a Rich Text Field to a Embed element. I can bind just about any other type of field, just not a Rich Text field. I have tried putting the HTML in a regular text field and binding it to an Embed element outside of a Rich Text Field, and that doesn’t show the formatted HTML.

Maybe I am just too much of a Boomer, but I can’t figure this one out for the life of me.

John

I put an example of my issue here: Example

6

Sorry for my brain not working. Oh man, I am an idiot. I just figured out what you were all trying to tell me. Create the Rich Text field in the collection, Create an Embed within the Collection field, insert HTML into the Embed.

I really am a boomer. Now, I just need to figure out how to create an Embed within a Rich Text field from something like Make so I can automat this.

7

Gosh. You are greatly overcomplicating things.

First, this is totally wrong:

Screen Shot 2023-05-17 at 9.00.56 AM
Screen Shot 2023-05-17 at 9.00.56 AM2480×1572 347 KB

This shows your CMS with a Rich Text field that has HTML copy / pasted into it.

You can’t do that. That’s why it’s spitting out HTML tags on your published site.

If you want to add raw HTML into a CMS Rich Text field you must do so through the API.

That’s how you win.

Second…

Stop with all of this Embed elements within Collection Lists, within Rich Text fields stuff.

Take a step back, breath deeply and simplify :smile:

Step 1:

Send simple, raw HTML into a CMS Collections Rich Text Field via the Webflow API.

Something like:

<h1>Hello</h1><p>This is some raw HTML.</p><p>Did it work?</p>

You can use the API here: Create Collection Item

Step 2:

View it within the CMS field. Notice how there are no raw HTML tags. Instead, an H1 tag is rendered HTML. This is correct.

Step 3:

Display this in a CMS Collection Template (skip the Collection List element for a moment, simplify).

Did it work? It should have.

Step 4:

Try again in your Collection List element.

You should have success with this approach :+1:

8

Thank you for your reply. I will give this a shot.

9

If you’re just doing basic HTML with elements that are already supported by the richtext element, you’ll just want to use that and populate it via the API. Webflow will parse your supplied HTML content accordingly when you update that field through the API.