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?
TL;DR
- Assign unique IDs to the input (
nameInput) and target display (mirrorText) elements in Webflow. - Add JavaScript in a
<script>tag that listens for input events and updatesmirrorText.textContentwithnameInput.value. - Publish the site to see it work, as custom code doesn't run in preview mode.
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 anid="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
.valuewith 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.
