To auto-populate a form field in Webflow with the CMS item name from the same page, you can use a combination of dynamic embeds, custom code, and interactions. Here's a step-by-step guide on how you can achieve this:
1. Set up your CMS collection: Create a CMS collection in Webflow and add the necessary fields, including the name field that you want to auto-populate in the form.
2. Design your form: Design your form in the Webflow Designer and add the input field where you want to auto-populate the CMS item name.
3. Add a dynamic embed: Go to the Webflow Designer, and on the page where your form is placed, add a new element and choose the Dynamic Embed component from the Add panel. Position it anywhere on the page, but keep it hidden.
4. Get the CMS item name: Open the dynamic embed's settings, and in the code field, enter the following custom code:
```html
```
Replace `'myInputField'` with the ID of the input field in your form where you want to auto-populate the CMS item name.
5. Bind the dynamic embed: Now, go to the form input field's settings, and in the Advanced tab, bind the `name` field from your CMS collection to the field's value. This ensures that the CMS item name is stored when the form is submitted.
6. Add an interaction: To trigger the auto-population of the input field when the page loads, select the dynamic embed element in the Designer and apply an interaction to it. Set the trigger to "Page load" and choose the "Hide" action. This ensures that the dynamic embed element remains hidden but executes the custom code upon page load.
That's it! Now, when a user visits the page, the input field will be auto-populated with the name of the CMS item from the same page. When the form is submitted, the CMS item name will be stored along with the form data. Remember to test the functionality thoroughly to ensure it works as intended.
Please note that this solution assumes you have a single CMS item per page. If you have multiple CMS items on a single page and want to auto-populate the input fields accordingly, additional logic will be required to differentiate and match the CMS item with the respective input field.