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'll use a small JavaScript snippet that listens for input events and updates the target element accordingly.

1. Set Up Form Field and Target Element in Webflow

• Give your input field a unique ID or class, e.g., id="nameInput".
• Add a text element (like a Paragraph or Heading) to display the mirrored input (e.g., a <div> block) and give it an id="mirrorText".

2. Add Custom Code in Webflow

• Go to Page Settings or use an Embed element at the bottom of the page.
• Inside the <script> tags, paste the following JavaScript:

<script> document.addEventListener("DOMContentLoaded", function () { const inputField = document.getElementById("nameInput"); const mirrorText = document.getElementById("mirrorText"); if (inputField && mirrorText) { inputField.addEventListener("input", function () { mirrorText.textContent = inputField.value; }); } }); </script>

3. Publish the Site

• Custom code will not work in preview mode, so you must publish your site to a staging or live domain to see it in action.

4. Optional Enhancements

• To prevent blank output when the field is empty, add a placeholder like:

  ```javascript

  mirrorText.textContent = inputField.value || "Your mirrored text here";

  ```

• To format the mirrored text (e.g., uppercase), wrap .value with string methods as needed:

  mirrorText.textContent = inputField.value.toUpperCase();

Summary

To mirror input in real time on a Webflow page, assign unique IDs to your input and target elements, and use JavaScript to listen for .addEventListener("input", …) events, updating the display using textContent.