Sincronizza i campi input in Webflow in tempo reale

Costruisci un form Webflow dove un campo si rispecchia in un altro in tempo reale: scrivi il tuo nome e guardalo comparire dentro un saluto, vedi un’anteprima del messaggio aggiornarsi mentre lo scrivi, o fai copiare un indirizzo di spedizione nei campi della fattura. Ottieni tutto questo con l’attributo Mirror Input di Finsweet — e senza una riga di codice.

Il tutto gira su un solo attributo con due ruoli. Segni il campo dove le persone scrivono come trigger, segni il campo che deve rispecchiarlo come target, e Finsweet li tiene sincronizzati mentre l’utente digita. Funziona con input di testo, text area, select, radio button e checkbox, quindi la stessa piccola configurazione copre di tutto, da un “ciao” personalizzato a un pattern completo di campi duplicati in un checkout.

E la cosa migliore è che è davvero divertente da mettere in piedi — una volta collegata una coppia, sai già collegarne dieci.

Come funziona

Un attributo, due ruoli. Mirror Input lavora mettendo i campi in coppia. Sul campo dove l’utente scrive davvero imposti fs-mirror-input-element a trigger; sul campo che deve rispecchiarlo imposti lo stesso attributo a target. Questa è tutta la relazione — mentre qualcuno scrive nel trigger, il valore viene copiato nel target in tempo reale. Niente script da configurare, nessun id da collegare.

La numerazione evita che le coppie si scontrino. Nel momento in cui vuoi più di uno specchio in pagina, la semplice coppia trigger/target non basta — ogni trigger alimenterebbe ogni target. Quindi li numeri: la prima coppia resta trigger/target, la successiva è trigger-2/target-2, poi trigger-3/target-3 e così via. Il suffisso è la colla. Un target ascolta solo il trigger che condivide il suo numero, quindi target-4 rispecchia trigger-4 e nient’altro. Fai combaciare i numeri su entrambi i lati e funziona tutto.

Il tuo target di solito non dovrebbe essere un normale campo form. In quasi tutti questi casi d’uso il target è un display — un saluto, l’anteprima di una cartolina — che non vuoi rendere modificabile. Mettere lì un vero input di Webflow sarebbe scomodo, quindi prendi invece un semplice custom element di Webflow e lo trasformi tu stesso in un input: nelle impostazioni dell’elemento imposti il tag a input, aggiungi un attributo type di valore text e aggiungi readonly (senza valore) così mostra il testo rispecchiato ma non ci si può scrivere dentro. Per un messaggio rispecchiato fai lo stesso ma imposti il tag a textarea.

Non è solo testo. Mirror Input gestisce input di testo, text area, select, radio button e checkbox — ed è esattamente ciò che fa funzionare il pattern dei campi duplicati. L’esempio classico è “indirizzo di fatturazione uguale a quello di spedizione”: via e prefettura della spedizione sono i trigger, via e prefettura della fattura sono i target corrispondenti, e i valori si copiano appena vengono inseriti — mentre l’utente può comunque sovrascrivere il lato fattura se i due indirizzi sono diversi. Una piccola rifinitura da conoscere: nell’esempio del saluto, uno spazio compare dopo “Hello” solo quando il nome non è vuoto, cosa che richiede un pizzico di codice custom che trovi dentro il cloneable.

Come si usa

1. Clona il progetto. Prendi il cloneable Webflow così hai i tre esempi già pronti da ispezionare — saluto, anteprima messaggio e campi duplicati.

2. Imposta il trigger. Sul campo dove le persone scrivono (un input di testo, una text area o una select), apri le impostazioni dell’elemento e aggiungi l’attributo fs-mirror-input-element con valore trigger.

3. Costruisci il target come display. Aggiungi un custom element di Webflow dove il valore deve comparire. Nelle sue impostazioni imposta il tag a input (o textarea per un messaggio), aggiungi un attributo type di valore text e aggiungi readonly così non è modificabile. Poi dagli fs-mirror-input-element con valore target.

4. Fai combaciare la coppia. Per un singolo specchio bastano trigger e target. Per più coppie sulla stessa pagina numerale in modo coerente — trigger-2 con target-2, trigger-3 con target-3 — assicurandoti che il numero alla fine del valore del trigger corrisponda a quello del suo target.

5. Pubblica e prova sul link live. Mirror Input gira sul sito pubblicato, quindi premi Publish e apri l’URL live — mentre scrivi in un trigger, il suo target si aggiorna all’istante.

6. Usalo con criterio. Rispecchia solo dove aiuta l’utente, e dai ai campi collegati etichette identiche (Via con Via, Prefettura con Prefettura) così il legame è chiaro e nessuno perde il filo di cosa viene copiato da dove.