Forms
Mirror Input Values
Mirror a user Form input from one Webflow element to another input. Replicate user form data to other inputs on the page.
Get Started
Step #2
Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
Add this attribute
Description
Name
fs-mirrorinput-element
Value
trigger
The form input that will be mirrored somewhere else.
All inputs from the "trigger" element will be replicated to the "target" element.
Works with text input, textarea, select, checkbox, and radio.
All inputs from the "trigger" element will be replicated to the "target" element.
Works with text input, textarea, select, checkbox, and radio.
Add this attribute
Description
Name
fs-mirrorinput-element
Value
target
The form input that is being mirrored.
All inputs from the "trigger" element will be replicated to the "target" element.
Works with text input, textarea, select, checkbox, and radio.
All inputs from the "trigger" element will be replicated to the "target" element.
Works with text input, textarea, select, checkbox, and radio.
I want to have more than one instance of Mirror Inputs Values on the same page
See how it works
Optional
You may need multiple instances of this Attribute!
All of our attributes follow the same structure for multiple instances!
To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance.
Example of this solution:
Attributes that must have instances
Second instance example
Third instance example
fs-mirrorinput-element = "trigger"
fs-mirrorclick-element = "trigger-2"
fs-mirrorclick-element = "trigger-3"
fs-mirrorclick-element = "target"
fs-mirrorclick-element = "target-2"
fs-mirrorclick-element = "target-3"
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
