Hi Webflow Community, has anyone successfully used a custom code workaround to make a CMS field automatically populate a paragraph or text form field? I recall a tip from 2016 advising to add a "hand-coded" form in the dynamic embed code and populate the input tags with dynamic data. If anyone has experience with this or could provide a custom code snippet, I would greatly appreciate it. Thank you!
- Add a Form Block and an Embed element on a CMS Collection Page template.
- Use Webflow’s field binding to insert CMS values into input
valueattributes via the Embed. - Use hidden inputs to submit non-editable CMS data.
- For non-template pages, use JavaScript to extract CMS data and populate form fields manually.
You're looking to auto-populate a form field using CMS data in Webflow, which isn't supported natively but can be done with custom code inside an Embed element on a CMS Collection Page.
1. Add the Form and Embed in the CMS Template
- Go to your CMS Collection Page (e.g., “Project Template”).
- Drag a Form Block onto the canvas.
- Inside the Form Block, add an Embed element.
- Within this Embed, you’ll add a custom input element and use Webflow CMS fields directly.
2. Use CMS Fields in the Embed Code
In your Embed element, insert something like:
<input type="text" name="project-name" value="{{wf {"path":"name","type":"PlainText"} }}">Webflow will render the CMS value into the
valueattribute.Replace
"name"with the field slug (e.g.,title,client-name,category).
Important: You can use Webflow’s Add Field button inside the Embed window to insert CMS bindings correctly, rather than manually typing JSON syntax.
3. Optionally Hide the Auto-Filled Fields
To keep auto-filled fields hidden (e.g., you're sending data without user editing), add this to the same Embed:
<input type="hidden" name="project-id" value="{{wf {"path":"_id","type":"PlainText"} }}">This lets you submit static CMS-related data in the form submission.
4. Use JavaScript for Advanced Scenarios
If you're working outside of a CMS Template Page (e.g., on a static page with a Collection List), direct CMS binding in Embed Code won’t work. Instead:
- Use custom JavaScript to transfer CMS text into a form field.
- Example: assign a
data-*attribute to a visible element using a Text Block with CMS data, then inject that into your form later usingdocument.querySelector()andinput.value.
Summary
To auto-populate a form field with CMS content in Webflow:
- Use a CMS Collection Page.
- Place an Embed element inside your form.
- Bind input field
valueattributes to CMS fields using Webflow’s field binding. - Optionally use hidden input types or JavaScript for custom use cases.
This method is reliable and still works in 2024.