How can I auto-populate a form field in Webflow with the CMS item name from the same page?
TL;DR
- Add a form to your CMS Collection Page, and attach a custom attribute to the form field you want to auto-populate.
- Customize your CMS collection page by adding JavaScript in the "Before </body> tag" to set the form field's value to the CMS item name.
- Save the changes and publish the site to initialize the functionality.
To auto-populate a form field in Webflow with the CMS item name from the same page, follow these steps:
1. Add Your Form to the Collection Page
- Go to your CMS Collection Page where you want the form.
- Add a Form Block by dragging it from the elements panel onto your collection page template.
2. Add a Custom Attribute to the Form Field
- Select the Form Field you want to populate with the CMS item name.
- Go to the Settings Panel and scroll down to the Custom Attributes section.
- Add a new custom attribute:
- Name: data-item-name
- Value: Leave this empty for now.
3. Customize the Collection Item Name
- Go to the Page Settings of your collection page.
- Find the "Before </body> tag" section, where you will add custom code.
4. Add Custom JavaScript
- Insert the following JavaScript in the "Before </body> tag" section:
```js
<script>
const cmsItemName = "{{wf {"path":"name"} }}";
const inputField = document.querySelector('[data-item-name]');
if(inputField) {
inputField.value = cmsItemName;
}
</script>
```
- Replace
"name"with the exact field name you are capturing from your CMS collection.
5. Save and Publish
- Save your changes and publish your site to see the form field populate.
Summary
By adding a custom attribute to a form field and using a JavaScript snippet on your CMS collection page, you can auto-populate the field with the CMS item name. Ensure the JavaScript targets the correct form field by defining a unique custom attribute.
