How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?

To mirror user input from a Webflow form field to a non-form text element in real time, you need a small JavaScript snippet added to your project.

1. Add Identifiers to Elements

• Select the form input field (e.g., a text field) and give it a unique ID, for example: userInput.
• Select the text element (e.g., a text block or heading) where you want to show the mirrored text, and give it another ID, for example: mirroredText.

2. Insert JavaScript into the Page

• Go to Page Settings of the page where the form is located.

• Scroll to Before tag section.

• Add this JavaScript:

  Replace the IDs if you used different names.

  ```

  ```

3. Publish and Test

• Publish your site to test this behavior in the browser (it will not work in Designer Preview).
• As you type in the input field, your mirrored text field should update in real time.

Summary

Add unique IDs to both the input and display elements and use a short JavaScript snippet to listen for input events and update the mirrored text. This enables real-time syncing of user input with any non-form text element on the page.