How can I auto-populate a form field in Webflow with the CMS item name from the same page?
TL;DR
- Place the form in a Collection List on a Collection Page linked to your CMS.
- Add a Custom Code Embed near the form for JavaScript execution.
- Write JavaScript in the Embed Block to capture the CMS item name from a class, e.g.,
.cms-item-name, and set it in the form field with a givenid. - Publish the site and test the form to confirm auto-population works.
To auto-populate a form field in Webflow with the CMS item name from the same page, follow these steps:
1. Use a Collection List
- Ensure your form is placed within a Collection List connected to your CMS.
- Make sure the page is a Collection Page where you can access the specific CMS item fields.
2. Add a Custom Embed Block
- Inside the Collection List, add a Custom Code Embed element near the form you want to affect.
- This will allow you to use JavaScript to capture the CMS item name and insert it into the form field.
3. Write JavaScript for Auto-Population
- In the Embed Block's custom code section, write JavaScript to capture the CMS name and insert it into the designated form field. For example:
- Suppose your CMS name is displayed in an
<h1>tag with the class.cms-item-name. - Your form field has an
idof#your-form-field-id. - Use this script snippet for operation:
```javascript
document.addEventListener('DOMContentLoaded', function () {
const cmsItemName = document.querySelector('.cms-item-name').textContent;
document.querySelector('#your-form-field-id').value = cmsItemName;
});
```
4. Publish and Test
- Publish your site to ensure the JavaScript runs correctly on the live environment.
- Test the form to verify that the field auto-populates with the correct CMS item name.
Summary
To auto-populate a form field with a CMS item's name, use a Collection List, incorporate a Custom Code Embed with the appropriate JavaScript, and publish your site to test the functionality. This will ensure the intended CMS content is reflected in your form input as desired.