Come aggiungere la logica condizionale ai moduli Webflow senza scrivere codice
Hai creato una landing page Webflow davvero curata, hai collegato il modulo e poi un addetto al marketing ti chiede di apportare una modifica sensata: mostrare la domanda sulle dimensioni dell’azienda solo quando qualcuno seleziona “Azienda”, oppure escludere i visitatori che scelgono un tipo di progetto non supportato. Il design sembra pulito, ma il generatore di moduli non ti offre un controllo di ramificazione intuitivo.
È qui che la logica condizionale dei moduli di Webflow non si limita più alla semplice attivazione o disattivazione di un’impostazione, ma diventa una questione di scegliere l’implementazione giusta. Puoi creare una soluzione alternativa leggera usando attributi, CSS e JavaScript, oppure integrare un generatore di moduli dedicato quando il flusso richiede qualifiche e squalifiche in più fasi, oltre a un’attribuzione affidabile. La parte difficile non è solo far apparire i campi, ma garantire che le risposte nascoste, i valori UTM, gli stati di validazione e i passaggi al CRM rimangano intatti in ogni ramo.
Se il tuo modulo richiede anche una strategia di qualificazione strutturata, una guida moderna alla qualificazione dei lead di vendita può aiutarti a decidere quali domande inserire nel flusso prima di iniziare a impostare le interazioni.
Table of Contents
Indice
- Introduzione alla logica condizionale dei moduli in Webflow
- Comprendere i limiti e i prerequisiti della logica nativa
- Implementazione di modelli di codice personalizzati
- Integrazione di Growform per moduli condizionali avanzati
- Conservazione degli UTM e dei dati di tracciamento
- Migliori pratiche e risoluzione dei problemi
- Conclusioni e prossimi passi
Introduzione alla logica condizionale dei moduli in Webflow
Una richiesta tipica sembra semplice: un visitatore sceglie “Sto acquistando per la mia azienda” e il modulo richiede informazioni sulle dimensioni dell’azienda, sul ruolo e sui tempi previsti. Chi sceglie “Progetto personale” dovrebbe vedere un percorso più breve. Su una pagina di generazione di lead, quelle domande potrebbero anche determinare se il visitatore arriverà o meno alla fase di contatto.
Webflow ti offre un controllo completo sul layout e sullo stile, ma la ramificazione nativa dei moduli ha sempre richiesto delle soluzioni alternative. Questo ti offre tre opzioni pratiche:
- Soluzione alternativa nativa: usa i campi di Webflow, gli attributi personalizzati, i CSS e JavaScript per gestire la visibilità.
- Implementazione personalizzata: crea un flusso articolato in più fasi con transizioni e convalide esplicite.
- Livello del modulo incorporato: usa un builder dedicato per la ramificazione, la qualificazione e la gestione dei campi nascosti, poi inseriscilo in Webflow.
Ogni approccio può funzionare. Si differenziano per quanto riguarda la manutenzione, l’impegno richiesto per i test, l’affidabilità delle analisi e la quantità di logica che il tuo team riesce a gestire senza l’aiuto di uno sviluppatore.
La differenza fondamentale sta tra la visibilità condizionale e il comportamento condizionale del modulo. Nascondere un campo riguarda solo il livello dell’interfaccia. Un modulo di produzione deve anche decidere se il campo nascosto rimane abilitato, se il suo valore viene inviato, se la convalida è ancora valida e se i dati di attribuzione arrivano al CRM. Ecco perché un modulo che sembra corretto nel Designer può comunque generare invii incompleti o fuorvianti dopo la pubblicazione.
Comprendere i limiti e i prerequisiti della logica nativa
La cronologia della community di Webflow spiega perché questo problema continua a presentarsi. Nel 2019, in una risposta da parte dello staff e della community di Webflow, il comportamento condizionale nativo era stato descritto come “non proprio possibile in modo nativo”, quindi gli utenti dovevano ricorrere a soluzioni alternative o a strumenti esterni. Entro il 30 luglio 2020, i consigli della community descrivevano modelli pratici che utilizzavano un menu a tendina o un campo numerico per mostrare i campi ripetuti, come ad esempio visualizzare “Nome del figlio 2” solo quando la risposta era due o più. L’evoluzione è documentata nella discussione della community di Webflow sulla creazione dei moduli.
Webflow ha poi introdotto una funzionalità di logica condizionale a livello di piattaforma. L’aggiornamento ufficiale dice che la funzionalità è stata lanciata il 5 marzo 2026 e supporta varianti, testo, attributi, immagini e video. Questo aggiornamento riguarda la presentazione dei contenuti, non la ramificazione dei moduli come documentata, quindi non dovrebbe essere considerato un sostituto nativo dei percorsi di qualificazione all’interno di un modulo. La distinzione è chiara nell’aggiornamento sui contenuti condizionali di Webflow.
Prepara il progetto prima di procedere alla compilazione
Che tu utilizzi codice personalizzato o un livello di moduli incorporato, definisci innanzitutto una struttura prevedibile:
- Assegna a ogni campo un nome chiaro: usa nomi fissi come
lead_type,company_sizeeproject_timeline. - Aggiungi identificatori di trigger: assegna a ogni menu a tendina, gruppo di pulsanti di opzione o casella di controllo un attributo o un ID personalizzato.
- Campi dipendenti da un gruppo: racchiudi i campi correlati in un elemento padre, così una sola regola può gestire l’intero gruppo.
- Nascondi inizialmente i gruppi dipendenti: la pagina dovrebbe essere in uno stato valido prima che lo script venga eseguito.
- Decidi come si comportano i valori nascosti: cancella i valori obsoleti o disattiva i campi nascosti quando un visitatore cambia direzione.
- Pubblica prima di testare: le anteprime del Designer non riproducono in modo affidabile l’ambiente di esecuzione live.
Se hai bisogno di un modulo che richieda una configurazione avanzata senza dover creare da zero il livello logico, la documentazione del Form Builder di Webflow è un utile punto di riferimento per l’approccio “embed”.
La configurazione tecnica minima è piuttosto semplice. Ti serviranno gli elementi dei moduli di Webflow, attributi o ID personalizzati, CSS per lo stato iniziale nascosto e JavaScript “vanilla” oppure uno script già presente nel progetto. jQuery può andare bene se fa già parte del progetto, ma un piccolo script “vanilla” di solito crea meno dipendenze.
Implementazione di modelli di codice personalizzati
Una configurazione personalizzata affidabile parte dal markup, non dallo script. Crea un campo trigger e inserisci ogni gruppo dipendente all’interno del proprio wrapper. Ad esempio, un gruppo di pulsanti di opzione potrebbe usare i valori business, personal e agency, mentre i gruppi dipendenti usano ID come business-fields e agency-fields.
Inizia inserendo uno stato nascosto nel CSS della pagina:
[data-conditional-group] {
display: none;
}
[data-conditional-group].is-visible {
display: block;
}
In Webflow, aggiungi l’attributo ` data-conditional-group ` a ogni wrapper dipendente. Assegna ai pulsanti radio di attivazione un nome comune, ad esempio ` lead_type`, e inserisci valori che descrivano il ramo. Il nome comune è importante perché il browser considera i pulsanti radio come un unico insieme di opzioni.
Associa il trigger ai gruppi di destinatari
Lo script qui sotto legge il valore del pulsante di opzione selezionato, nasconde tutti i gruppi condizionali e poi mostra il gruppo corrispondente. Inoltre disabilita i campi nascosti, impedendo così ai visitatori di inviare valori non aggiornati provenienti da un ramo che avevano selezionato in precedenza.
<script>
document.addEventListener("DOMContentLoaded", function () {
const triggers = document.querySelectorAll('input[name="lead_type"]');
const groups = document.querySelectorAll("[data-conditional-group]");
function updateConditionalFields() {
const selected = document.querySelector(
'input[name="lead_type"]:checked'
)?.value;
groups.forEach(function (group) {
const shouldShow = group.dataset.conditionalGroup === selected;
group.classList.toggle("is-visible", shouldShow);
group.querySelectorAll("input, select, textarea").forEach(function (field) {
field.disabled = !shouldShow;
});
});
}
triggers.forEach(function (trigger) {
trigger.addEventListener("change", updateConditionalFields);
});
updateConditionalFields();
});
</script>
Il valore di “ data-conditional-group ” deve corrispondere esattamente al valore del pulsante di opzione. Un gruppo con “ data-conditional-group="business" ” viene visualizzato quando il visitatore seleziona il pulsante di opzione il cui valore è “ business ”.
Regola pratica: nascondi i campi dipendenti per impostazione predefinita, poi prova la pagina pubblicata. Le linee guida della community indicano che l’uso di attributi personalizzati, JavaScript e il test della pagina in tempo reale rappresentano il modello più comune, poiché lo script viene eseguito sul sito pubblicato e non solo all’interno di Designer. Dai un’occhiata alla discussione sui moduli condizionali di Webflow.
Non aggiungere automaticamente il debouncing. Un gestore di cambiamento di stato di un pulsante radio di solito viene eseguito una volta per ogni selezione, quindi il debouncing può far sembrare l’interfaccia più lenta. Diventa utile quando il tuo trigger attiva operazioni più pesanti, come la convalida remota, la ricerca di un indirizzo o diverse transizioni visive. Mantieni la prima implementazione semplice e fai in modo che il cambio di stato sia immediato.
Collega la convalida e l’invio
I campi nascosti determinano una decisione di convalida. Se un campo obbligatorio rimane abilitato mentre il suo gruppo è nascosto, il browser può bloccare l’invio anche se il visitatore non ha mai visto quel campo. Disabilitare i campi nascosti, come fa l’esempio, evita questa discrepanza. Quando un gruppo torna visibile, i suoi campi vengono riabilitati e la convalida riprende normalmente.
Per i moduli a più passaggi, considera ogni ramo come un percorso esplicito. Non dare per scontato che Webflow deduca la destinazione successiva dalla risposta selezionata. La logica di transizione dovrebbe definire dove va il visitatore dopo ogni scelta, e il gestore di invio finale dovrebbe raccogliere solo i campi attivi.
Se l’invio alimenta un altro sistema, mappa i nomi dei campi stabili invece di affidarti alle etichette visive. Un flusso di lavoro basato sui webhook è più facile da gestire quando il servizio ricevente riceve chiavi coerenti, e la documentazione sui webhook può aiutarti a decidere cosa dovrebbe contenere il payload a valle.
Una sequenza di test utile è:
- Seleziona ciascuna opzione radio e verifica che compaia solo il gruppo desiderato.
- Inserisci un valore, passa a un altro ramo e verifica che il valore precedente non venga inviato.
- Torna al ramo originale e verifica che i campi funzionino correttamente.
- Invia il modulo lasciando vuoti tutti i campi obbligatori per verificare la validità dei dati.
- Prova l’intero flusso sulla pagina pubblicata e su un dispositivo mobile.
Puoi anche usare questo video come riferimento visivo per il modello di implementazione:
Il codice personalizzato è la scelta giusta quando la logica è breve, il team ha il controllo dello script e la destinazione di invio del modulo è già definita. Diventa però poco affidabile quando il marketing richiede modifiche frequenti, quando i percorsi si articolano su più passaggi o quando il tracciamento e l’invio al CRM sono più importanti che mantenere il modulo interamente nativo.
Integrazione di Growform per moduli condizionali avanzati
Un builder integrato può alleggerire notevolmente la gestione dello stato nel progetto Webflow, ma il rovescio della medaglia è che dovrai gestire un sistema separato per la configurazione, lo styling e il monitoraggio. Confronta i requisiti prima di scegliere uno strumento.
Confronto tra i generatori di moduli da incorporare
| Strumento | In più fasi | Logica condizionale | Pass-Through UTM | Personalizzazione dello stile |
|---|---|---|---|---|
| Growform | Sì | Flussi avanzati di ramificazione e qualificazione | Pass-through dei campi nascosti | Controlli relativi al marchio e allo stile |
| Typeform | Sì | Percorsi di domande basati sulla logica | Dipende dalla configurazione e dall’integrazione | Ampie possibilità di personalizzazione grafica |
| Jotform | Sì | Visibilità e instradamento condizionali | Dipende dai campi nascosti e dall’integrazione | Personalizzazione completa |
La scelta giusta dipende dal processo di passaggio, non solo dal form stesso. Un semplice modulo di contatto può rimanere nativo. Un percorso in stile quiz con criteri di ammissibilità, esclusione e dati di provenienza richiede un sistema che consideri questi requisiti come parte integrante del modello di invio.
Growform supporta moduli di contatto a più passaggi, salti logici, domande condizionali e percorsi di esclusione. La sua implementazione su Webflow utilizza uno snippet incorporato, quindi la pagina Webflow fornisce il layout circostante mentre il generatore di moduli gestisce il flusso interattivo. Questa separazione può ridurre la quantità di codice JavaScript personalizzato che devi gestire nel progetto del sito.
Configura il flusso prima di applicare lo stile
Inizia scegliendo un modello di modulo che rispecchi il più possibile l’obiettivo della campagna. Un flusso di qualificazione di solito richiede una domanda iniziale, poche decisioni di instradamento, i dati di contatto e uno stato di completamento chiaro. Definisci la mappa dei rami prima di modificare i colori o la tipografia.
Per ogni risposta, specifica il passo successivo o l’esito di esclusione. Se un visitatore seleziona un servizio non supportato, il flusso dovrebbe terminare con un messaggio specifico, invece di arrivare a un passaggio vuoto o inaccessibile. Se una risposta rende il visitatore idoneo, indirizzalo alla domanda successiva pertinente, invece di mostrare tutti i campi a tutti.
Quindi configura il pass-through dei campi nascosti. Aggiungi le chiavi di attribuzione usate dalle tue campagne, compresi i parametri UTM e gli ID dei clic, e verifica che l’invio finale le contenga. In questo contesto, un builder integrato può rivelarsi più pratico di una serie di soluzioni di ripiego con i campi di Webflow, a patto che l’integrazione venga testata con parametri di query reali.
Lo stile conta ancora. Assicurati che il carattere, la spaziatura, l’aspetto dei pulsanti, gli stati di focus e la visualizzazione degli errori del modulo siano in linea con la pagina Webflow. Controlla separatamente il layout per dispositivi mobili, perché un modulo con più passaggi può sembrare allineato sul desktop, ma creare uno scorrimento scomodo o aree di selezione poco intuitive su uno schermo stretto.
Infine, copia lo snippet di incorporamento generato e inseriscilo in un elemento “Embed” di Webflow. Pubblica la pagina, invia dei dati di prova attraverso ogni ramo e controlla il payload ricevuto dal CRM o dal webhook. Per una guida dettagliata all’installazione, consulta la guida su come aggiungere un modulo a più passaggi di Growform a Webflow.
L’approccio integrato è utile quando i professionisti del marketing devono apportare modifiche alla logica senza dover riaprire il codice del sito. Il costo è rappresentato da un’altra interfaccia, un altro punto di integrazione e la necessità di mantenere il sistema di design del modulo sincronizzato con Webflow.
Conservazione degli UTM e dei dati di tracciamento
Un modulo condizionale può convertirsi correttamente e comunque compromettere i report della campagna. L’errore più comune si verifica quando i valori UTM vengono inseriti nella landing page, ma il passaggio successivo del modulo o il livello incorporato non li trasferisce nel payload finale. Le linee guida della community avvertono specificatamente che gli elementi incorporati possono isolare i campi nascosti, quindi l’attribuzione potrebbe richiedere un passaggio esplicito dei valori, invece di dare per scontato che questi vengano mantenuti automaticamente. Il problema è documentato in questa guida alla logica condizionale nei moduli Webflow.
Acquisisci i valori non appena la pagina si carica
Aggiungi dei campi nascosti chiamati utm_source, utm_medium, gclid e fbclid. Poi leggi subito la stringa di query e conserva i valori per tutta la durata della navigazione del visitatore.
<script>
document.addEventListener("DOMContentLoaded", function () {
const keys = ["utm_source", "utm_medium", "gclid", "fbclid"];
const params = new URLSearchParams(window.location.search);
keys.forEach(function (key) {
const value = params.get(key);
if (value) {
sessionStorage.setItem(key, value);
}
const storedValue = sessionStorage.getItem(key);
const field = document.querySelector(`[name="${key}"]`);
if (field && storedValue) {
field.value = storedValue;
}
});
});
</script>
Esegui la fase di popolamento ogni volta che viene visualizzata una nuova fase del modulo. Se lo strumento incorporato offre un’interfaccia per la mappatura dei campi nascosti, mappa ogni valore memorizzato al campo corrispondente, invece di ricorrere all’accesso al DOM oltre i confini dell’incorporamento.
Tieni separata l’attribuzione dalle risposte relative ai rami. Il servizio o il risultato di qualificazione selezionato dal visitatore descrive il lead, mentre i campi UTM e click-ID descrivono l’acquisizione. Entrambi devono essere inclusi nell’invio finale.
Per le convenzioni di denominazione e la corretta gestione delle campagne, dai un’occhiata a queste best practice per il tracciamento UTM. Per la configurazione dei campi nascosti specifici di Growform, usa i campi nascosti con Growform.
Prima del lancio, controlla un invio reale nel sistema di destinazione. Verifica che i valori di origine rimangano associati dopo un cambio di ramo, una transizione in più fasi e l’invio finale. Se un valore scompare, il problema di solito riguarda l’ambito del campo, l’isolamento dell’incorporamento o una mappatura mancante nel payload finale.
Migliori pratiche e risoluzione dei problemi
I bug più dannosi nelle forme condizionali non sono quelli visivi. Un campo potrebbe apparire corretto mentre il suo valore viene comunque inviato, la convalida potrebbe essere eseguita su un input invisibile, oppure un ramo potrebbe portare a una fase senza una transizione definita. Considera il flusso come una macchina a stati, non come un insieme di effetti visivi.
I tutorial sui moduli Webflow avanzati avvertono che ogni percorso in più fasi deve essere collegato dall’inizio alla fine. Un ramo non collegato può creare un vicolo cieco, mentre la compilazione automatica su dispositivi mobili o la navigazione con un solo pollice possono far emergere problemi relativi allo stato dei campi nascosti che sfuggono durante i test su desktop. Le indicazioni per l’implementazione sono disponibili nel tutorial sui moduli Webflow avanzati.
Usa un piano di test basato sui percorsi
Prova la formula come una matrice di decisioni:
- Copertura dei rami: seleziona ogni valore di trigger e conferma il passo successivo previsto.
- Ripristino dello stato: inserisci i dati, cambia direzione e verifica che i valori dei rami abbandonati vengano azzerati o disabilitati.
- Convalida: invia il modulo lasciando vuoti i campi obbligatori visibili, poi riprova compilando i campi nascosti che avevi precedentemente compilato.
- Comportamento su dispositivi mobili: verifica il focus della tastiera, la compilazione automatica, lo scorrimento, la navigazione indietro e le aree di tocco su un vero telefono.
- Integrità del payload: controlla la richiesta finale o il record di ricezione per verificare i nomi dei campi, le risposte attive e i valori di attribuzione.
Gli strumenti di sviluppo del browser aiutano a individuare i problemi. Controlla la console per eventuali errori negli script, verifica se i campi nascosti sono disabilitati ed esamina i loro valori subito prima dell’invio. Se è presente un elemento incorporato, verifica i valori all’interno del modulo incorporato anziché solo nel documento Webflow principale.
Anche l’accessibilità merita la stessa attenzione. Non nascondere visivamente un gruppo lasciando però che chi usa la tastiera possa accedere ai suoi controlli con il tasto Tab. Usa lo stato “nascosto” vero e proprio, gestisci il focus quando compare un nuovo passaggio e rendi comprensibili i messaggi di squalifica senza fare affidamento solo sul colore.
Cerca di mantenere lo script snello e chiaro. Un piccolo insieme di trigger con nome e gruppi di destinazione è più facile da controllare rispetto a un motore di regole generico che nessuno nel team di marketing capisce. Quando la logica cambia spesso, sposta le regole di ramificazione in uno strumento dedicato, invece di espandere uno script a livello di sito fino a trasformarlo in una seconda applicazione.
Conclusione e prossimi passi
Ci sono tre modi sensati per gestire la logica condizionale dei moduli in Webflow. Usa una soluzione nativa per una regola di visibilità semplice, del codice personalizzato per un flusso controllato che il tuo team possa gestire, oppure un generatore di moduli integrato per campagne articolate in più fasi che prevedono qualificazione, esclusione e attribuzione. In ogni caso, prova la pagina live, collega ogni ramo, disattiva i campi irrilevanti e verifica il risultato finale invece di giudicare solo l’interfaccia.
Inizia individuando le domande e i risultati, poi scegli l’implementazione più snella che ti permetta di mantenere sia la qualità dei lead che i dati di tracciamento.
Growform offre moduli in più fasi senza codice, con domande condizionali, percorsi di qualificazione, logica di esclusione e trasferimento dei dati tramite campi nascosti per flussi di lead integrati. Se vuoi creare e testare un modulo Webflow basato su logica senza dover gestire tu stesso lo script di ramificazione, dai un’occhiata a Growform.