What is the process of displaying CMS Collection Item Fields as editable input fields using an HTML Embed in Webflow?
TL;DR
- Use an HTML Embed inside a Collection List to create input fields with CMS field values inserted via the Add Field tool.
- Inputs are visually editable but require third-party tools or Webflow Logic to sync changes back to the CMS.
To display CMS Collection Item fields as editable input fields using an HTML Embed in Webflow, you’ll need to manually bind dynamic values using Webflow’s CMS and set up inputs in an Embed element that reflects those values.
1. Add an HTML Embed Inside a Collection List
- Drag a Collection List into your Webflow page and bind it to a CMS Collection.
- Inside the Collection Item, use an Embed element where you want the input field to appear.
2. Insert Input Fields with CMS Field Values
- In the Embed element, manually create the input tag and insert the CMS field using Add Field.
- Example (for a Name field):
<input type="text" value="{{wf {"path":"name","type":"PlainText"} }}" /> - Use the Add Field (+ icon) in the Embed code editor to insert the CMS field properly. Do not manually type field bindings.
3. Make Fields Editable in Design, Not CMS
- These inputs are only visually editable on the front-end, meaning users can click and type, but they won’t update the CMS unless you build a form submission workflow.
- This setup is most useful for prototypes, form UIs, or integrations with third-party tools.
4. Optional: Enable Input Field Attributes
- You can add attributes like
id,name, orclassdirectly in the input tag. - Example:
<input type="email" id="email" value="{{wf {"path":"email","type":"PlainText"} }}" />
5. Handle Data Submissions (If Needed)
- Webflow forms cannot write back to the CMS.
- If you want users to edit and update CMS items:
- Use a third-party tool like Zapier, Make (Integromat), Airtable, or Xano.
- Or use Webflow’s Memberships + Logic (beta) to build data flows tied to user actions.
Summary
To display CMS fields as editable input fields, use an HTML Embed inside a Collection List, insert the CMS field into the value of the input, and note that inputs are editable visually but not CMS-bound by default. For editing CMS data, external tools or Webflow Logic are required.