How to Sync Input Fields in Webflow Using Mirror Input Values

This instructional module details the implementation of Finsweet’s Mirror Input Values solution, a no-code method for synchronizing Webflow input fields in real-time. The tutorial demonstrates how to leverage simple custom attributes to instantly reflect user data from a "trigger" field to a "target" field, thereby creating dynamic and engaging web experiences without requiring complex programming knowledge.

Viewers will learn to configure sophisticated form behaviors by manipulating Webflow custom elements, converting them into read-only inputs or text areas to display dynamic content. The guide specifically covers technical nuances, such as setting the "tag" property to input and applying specific type attributes, enabling developers to build personalized greetings and real-time visual previews effectively.

Beyond basic setup, the video outlines three distinct architectural patterns: creating personalized UI messaging, generating live content previews for items like postcards, and auto-filling complex forms to reduce user error. The lesson concludes with high-level best practices, urging developers to prioritize User Experience (UX) by clearly labeling linked fields and implementing mirroring features only where they genuinely enhance the user journey.

• Attribute-Based Synchronization: The core functionality relies on the fs-mirror input-element attribute, where the input field is assigned a "trigger" value and the receiving field is assigned a corresponding "target" value to establish a link.
• Advanced Custom Element Configuration: To display mirrored text in unique layouts, users must utilize Webflow custom elements by setting the property tag to input and adding attributes such as type="text" or designating them as a text area.
• Scalable Implementation: When implementing multiple synchronized fields on a single page, developers must append unique numerical identifiers to the attribute values (e.g., trigger-2 and target-2) to ensure distinct fields do not conflict.
• Versatile Input Support: This solution extends beyond standard text fields to support text areas, select dropdowns, radio buttons, and checkboxes, allowing for complex data mirroring across different form components.
• Flexible User Control: For functional use cases like address duplication in checkout flows, mirrored target fields can remain editable rather than read-only, allowing users to leverage auto-fill convenience while retaining the ability to modify the data if necessary.

• 02:36 – Add the custom attribute fs-mirror input-element with the value trigger to the primary input field.
• 03:28 – Set the "tag" property to input within the Element Settings panel to convert a Webflow custom element into an input field.
• 03:40 – Add the type attribute with a value of text to define the custom element's functionality.
• 03:59 – Apply the readonly attribute (no value needed) to prevent users from editing the mirrored target field,.
• 04:09 – Add the custom attribute fs-mirror input-element with the value Target to the receiving element to establish the link.
• 06:29 – Assign a unique indexed value (e.g., trigger-2) to the attribute when configuring multiple independent triggers on the same page.
• 08:04 – Set the target attribute value to Target-2 to ensure it matches the corresponding trigger's unique index.
• 08:47 – Assign the text area value to the tag property within Element Settings to configure a multi-line input target.
• 12:57 – Apply the mirroring attribute with a matching target value (e.g., Target-5) to a Select input field to synchronize dropdown data.

Technical Guide: Implementing Real-Time Input Mirroring in Webflow

This guide outlines the step-by-step process for syncing input fields in real-time using the Finsweet Mirror Input Values solution. Follow these instructions to create dynamic user experiences such as personalized greetings, live content previews, and auto-filling forms.

Step 1: Define the "Trigger" Input Field

Reference Timestamp: 02:29 – 02:47

• How: Select the primary input field (e.g., a "Name" text field) where the user will type data. Navigate to the Element Settings panel in Webflow. Add a custom attribute with the name fs-mirror input-element and set the value to trigger.
• Why: This establishes the input field as the "source" of the data. The script monitors this specific field for keystrokes to mirror elsewhere.

Step 2: Configure a Custom Element as a Target

Reference Timestamp: 03:10 – 03:33

• How: Select a Webflow Custom Element (not a standard Form Block input) where you want the text to appear. In the Element Settings panel under "Input Settings" set the Tag property to input.
• Why: Using a custom element allows for greater design flexibility within the UI (like embedding a name inside a sentence) without the default styling constraints or behaviors of a standard form input block.

Step 3: Define Input Type and Read-Only Status

Reference Timestamp: 03:40 – 04:02

• How: With the target custom element still selected, add a custom attribute named type with a value of text. Then, add the attribute readonly (no value is required).
• Why: The type="text" attribute ensures the browser renders the custom element as a text field. The readonly attribute prevents users from manually editing the mirrored text, ensuring it only reflects what is typed in the trigger field.

Step 4: Link the Target to the Trigger

Reference Timestamp: 04:09 – 04:21

• How: Add the mirroring attribute fs-mirror input-element to the target element, but this time set the value to Target.
• Why: This creates the connection between the two elements. The script matches the element with the value trigger to the element with the value Target to synchronize the data instantly.

Step 5: Implement Multiple Independent Triggers (Indexing)

Reference Timestamp: 06:00 – 07:02

• How: When creating a second set of synced fields on the same page (e.g., a "Message" field separate from the "Name" field), append a unique number to the attribute value. Set the new trigger’s attribute value to trigger-2 (or trigger-3, etc.).
• Why: Unique indexing ensures that different input streams do not conflict. For example, typing in the "Name" field (trigger-2) should not update the "Message" preview (trigger-3).

Step 6: Link Indexed Targets to Specific Triggers

Reference Timestamp: 08:04 – 08:34

• How: On the destination element, set the attribute value to match the specific trigger's index. For example, if the source is trigger-2, the destination attribute must be Target-2.
• Why: The numeric suffix acts as a unique ID, ensuring the script routes the data to the correct location on the page.

Step 7: Configure Text Areas for Long-Form Content

Reference Timestamp: 08:47 – 09:15

• How: If the target needs to display multi-line text (like a postcard message), go to the Element Settings panel and set the Tag property to text area instead of input. Then apply the corresponding target attribute (e.g., Target-3).
• Why: The input tag is designed for single-line text. The text area tag allows the element to expand and wrap text correctly for longer messages.

Step 8: Sync Complex Inputs (Select Fields & Editability)

Reference Timestamp: 11:00 – 12:57

• How: To mirror dropdown menus, select the source "Select" field and apply the trigger attribute (e.g., trigger-5). Apply the matching Target-5 attribute to the destination Select field. For use cases like "Shipping same as Billing," do not add the readonly attribute to the target.
• Why: This solution supports various input types, including Select dropdowns, radio buttons, and checkboxes. Leaving the target editable allows users to utilize the auto-fill convenience while retaining the ability to manually override the data if necessary (e.g., if the billing address differs from shipping).

To synchronize fields, apply the custom attribute fs-mirror input-element="trigger" to the primary input field and fs-mirror input-element="Target" to the destination field. For multiple sets of inputs on the same page, append unique numbers to the values (e.g., trigger-2 and Target-2) to ensure the correct fields are linked without conflict.

You can create a text preview by converting a Webflow custom element into a read-only field; set its settings tag to input and add the attributes type="text" and readonly. Finally, connect it to the user's input field by adding the fs-mirror input-element attribute with the appropriate target value.

Assign the attribute fs-mirror input-element="trigger" to your shipping fields and fs-mirror input-element="Target" to the corresponding invoicing fields. This configuration instantly copies the data while keeping the target fields editable, allowing users to manually update the billing address if it differs from the shipping location.

Yes, the mirroring solution supports Select inputs, radio buttons, and checkboxes in addition to standard text fields and text areas. Implementation remains the same: apply the mirroring attribute with a unique identifier (e.g., trigger-5) to the source dropdown and the matching target value to the receiving field.