What is the process of displaying CMS Collection Item Fields as editable input fields using an HTML Embed in Webflow?

To display CMS Collection Item Fields as editable input fields in Webflow using an HTML Embed, follow these steps to bind dynamic content within a custom code component:

​

1. Understand the Setup

• You will use Webflow's HTML Embed element to insert custom HTML and bind it with CMS Collection fields.
• This method allows you to display fields like text, numbers, or rich text as inputs that can be edited in the Designer, but not on the live site.

​

2. Add an HTML Embed Element

• Drag an HTML Embed element onto your page within a CMS Collection List or a Template Page.
• Open the HTML Embed to edit its content.

​

3. Insert Collection Field Variables

• Use Webflow variables to reference and bind your desired CMS fields within the HTML Embed.
• For example:

    ```html

    <input type="text" value="{CMS Field}" />

    ```

• Replace {CMS Field} with your actual CMS field, e.g., {item.name}.

​

4. Bind CMS Fields

• Use the Insert Field button in the HTML Embed settings to bind CMS data.
• Ensure to wrap these bindings within HTML input tags.
• Example for a Name field:

    ```html

    <input type="text" value="{item.name}" name="name-field"/>

    ```

​

5. Customize Input Attributes

• Add attributes to your HTML input tag for further customization.
• Example attributes include placeholder, class, or id.
• Make sure such attributes align with any styling or scripting needs.

​

6. Publish and Test

• Publish your changes to see how it displays with real data from your CMS.
• Note: These fields are only editable in preview/design mode, not on the live site.

​

Summary

To display CMS Collection Item Fields as input fields in Webflow, use an HTML Embed element, bind dynamic content using HTML input tags and Webflow variables, and publish to test the setup. Real-time live editing is not supported; these fields can only be previewed within the Designer.