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!

TL;DR

Place an HTML Embed block on a CMS Collection Page or inside a Collection List and insert a custom HTML form.
Use Webflow’s “Add Field” feature to dynamically populate form input values with CMS data, and handle submissions using third-party tools like Formspree or Zapier.

You're trying to auto-populate form input fields using CMS data in Webflow, such as pre-filling a text or paragraph input with dynamic content from a CMS item. This is not natively supported through Webflow’s default form block, but you can achieve this using Custom Code inside an HTML Embed block within a CMS Collection List or Template Page.

1. Use an HTML Embed to Insert the Form

Drag an Embed element onto the CMS Collection Page or inside a Collection List.
This allows you to write custom HTML with dynamic CMS fields inserted via Webflow’s native Add Field (+) button.

2. Add Your Hand-Coded Form

Within the Embed block, write a standard HTML form. Use Webflow CMS fields to populate the value attribute for input fields.

Example:

<form action="/your-form-endpoint" method="POST">
  <label for="title">Title</label>
  <input type="text" id="title" name="title" value="{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}" readonly>
  
  <label for="description">Description</label>
  <textarea id="description" name="description" readonly>{{wf {&quot;path&quot;:&quot;description&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}</textarea>
  
  <button type="submit">Submit</button>
</form>

Replace "name" and "description" with the actual field names from your CMS.
The {{wf {…} }} is the placeholder Webflow uses internally; when adding via Embed, use the "Add Field" (+) to insert fields properly rather than pasting.

3. Make the Fields Read-Only (Optional)

If you want to display CMS data but not allow user edits, add the readonly attribute to inputs and textareas.

4. Where This Works

This can be used on CMS Collection Pages or inside a Collection List on static pages.
It’s useful for pre-filling form fields with details like a product name, blog title, or any CMS-related data point.

5. Handling the Submitted Data

Webflow’s native form handling doesn’t integrate with custom HTML forms.
To process these forms, you’ll need to:
Use a third-party tool like Formspree, Basin, or Zapier.
Or, set up a back-end function (e.g., Make/Integromat or Netlify Functions) to handle the POST request.

Summary

To prefill a form field with CMS data in Webflow, place a custom HTML form inside an Embed block on a CMS page, and use the Add Field feature to dynamically insert content. This lets you populate input or textarea fields with dynamic values using CMS fields. Hosting and handling submission requires third-party tools since Webflow Forms will not recognize custom hand-coded forms for native processing.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer