Functional
Mirror Click Events
Mirror a click event from one Webflow element to another element. Replicate user clicks on other elements 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.
TRIGGER
I want this
Button, Text Link, Link Block, or Div Block
to trigger mirror events.
See how it works
Add this attribute
Description
Name
fs-mirrorclick-element
Value
trigger
When clicking on this element, a different element on the page will be clicked.
For example, a div block on the page that should submit a form when clicked, but is not the native form submit button.
For example, a div block on the page that should submit a form when clicked, but is not the native form submit button.
Add this attribute
Description
Name
fs-mirrorclick-element
Value
target
This element is the mirrored click. This element will be clicked when the "trigger" is clicked.
For example, a Webflow form submit button.
For example, a Webflow form submit button.
I want to have more than one instance of Mirror Click Events 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-mirrorclick-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"
Working examples
See this solution working live in this Webflow project.
Example 1
Mirror click events
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
