Campo casella di controllo
Raccogli accordi e selezioni multiple con facilità. Dalle semplici caselle di controllo sì/no agli elenchi a selezione multipla con "Seleziona tutto", controlli min/max e layout intelligenti, il campo Casella di controllo gestisce accordi singoli e domande a risposta multipla con potenti funzionalità di convalida e opzioni intuitive.
Due modalità per ogni esigenza di casella di controllo
Perfetto per:
Funzionalità potenti per ogni caso d'uso
Due modalità di casella di controllo
Modalità casella di controllo singola:
Una casella di controllo per domande a risposta aperta, accordi o opt-in. Ideale per l'accettazione dei termini, l'iscrizione alla newsletter e i moduli di consenso.
Casi d'uso:
- “Accetto i termini e le condizioni”
- “Iscrivimi alla newsletter”
- “Sì, voglio ricevere aggiornamenti”
- “Confermo che queste informazioni sono accurate”
Caratteristiche:
- Testo dell'etichetta della casella di controllo personalizzata
- Stato predefinito selezionato/deselezionato
- Valore personalizzato inviato (sì, 1, vero, ecc.)
- Opzione di convalida richiesta
Modalità caselle di controllo multiple:
Opzioni multiple in cui gli utenti possono selezionare più opzioni. Perfetto per domande "Seleziona tutte le risposte pertinenti", raccolta di preferenze e sondaggi a selezione multipla.
Casi d'uso:
- "Quali caratteristiche ti interessano?" (selezione multipla)
- “Seleziona i tuoi metodi di contatto preferiti”
- “Scegli tutti i servizi di cui hai bisogno”
- "Quali argomenti ti interessano?" (seleziona più opzioni)
Caratteristiche:
- Opzioni di casella di controllo illimitate
- Tre stili di layout
- Opzione "Seleziona tutto"
- Limiti di selezione min/max
- “Altro” con input di testo
- Opzione esclusiva "Nessuna delle precedenti"
🎨 Tre opzioni di layout (modalità multipla)
Disposizione verticale (impilata):
Le caselle di controllo vengono visualizzate una per riga, disposte verticalmente. Layout più leggibile per etichette di opzioni più lunghe.
Ideale per:
- Testo opzionale lungo
- 3-10 opzioni
- Moduli mobile-first
- Massima leggibilità
Disposizione orizzontale (affiancata):
Le caselle di controllo vengono visualizzate in fila, una accanto all'altra. Layout compatto per etichette brevi.
Ideale per:
- 2-5 opzioni brevi
- Forme compatte
- Layout del desktop
- Efficienza spaziale
Layout griglia (colonne multiple):
Caselle di controllo disposte in una griglia a 2 colonne. Layout bilanciato che consente di risparmiare spazio mantenendo la leggibilità.
Ideale per:
- 4-12 opzioni
- Etichette di media lunghezza
- Design equilibrato
- Aspetto professionale
Comportamento reattivo:
Tutti i layout si adattano automaticamente agli schermi dei dispositivi mobili, impilandosi quando necessario per una migliore interazione touch.
✨ Opzione "Seleziona tutto"
Selezione con un clic:
Aggiungi una casella di controllo speciale "Seleziona tutto" in cima all'elenco. Gli utenti possono selezionare/deselezionare tutte le opzioni con un clic.
Comportamento intelligente:
- Controlla tutte le opzioni regolari contemporaneamente
- Deseleziona tutto quando fai clic di nuovo
- Deseleziona automaticamente se un'opzione è deselezionata
- Mostra uno stato indeterminato quando sono selezionate alcune opzioni (non tutte)
- Esclude "Nessuna delle precedenti" da Seleziona tutto
Ideale per:
- Elenchi di caselle di controllo lunghi (5+ opzioni)
- Moduli in cui gli utenti spesso selezionano tutto
- Domande "Seleziona tutte le risposte che si applicano"
- Selezione delle autorizzazioni e delle funzionalità
L'esperienza utente:
Risparmia tempo con elenchi lunghi. Gli utenti possono selezionare tutto, quindi deselezionare eccezioni specifiche.
✏️ Opzione "Altro" con inserimento di testo
Raccolta di risposte personalizzate:
Aggiungi una casella di controllo "Altro" che, se selezionata, mostra un campo di testo. Gli utenti possono specificare la propria risposta se le opzioni preimpostate non sono adatte.
Come funziona:
- La casella di controllo "Altro" appare in fondo all'elenco
- Se selezionato, viene visualizzato il campo di immissione del testo
- Gli utenti digitano una risposta personalizzata
- Vengono inviati sia la selezione della casella di controllo che il testo
Casi d'uso:
- “Metodo di contatto preferito: …Altro (specificare)”
- “Interessi: …Altri argomenti”
- “Come hai saputo di noi: …Altra fonte”
- Qualsiasi elenco che non può co
Vantaggi:
Cattura risposte inaspettate, offre flessibilità, impedisce selezioni "forzate" e migliora la qualità dei dati.
❌ Opzione "Nessuna delle precedenti"
Esclusiva Non Selezione:
Aggiungere un'opzione "Nessuna delle precedenti" che deselezioni automaticamente tutte le altre selezioni quando si fa clic.
Esclusività intelligente:
- Quando è selezionato "Nessuno", tutte le altre opzioni vengono deselezionate automaticamente
- Quando è selezionata qualsiasi altra opzione, "Nessuno" viene deselezionato automaticamente
- Fornisce un modo chiaro per indicare che non si applicano selezioni
- Previene selezioni contraddittorie
Casi d'uso:
- Domande di preferenza facoltative
- “Seleziona tutte le allergie: …Nessuna delle precedenti”
- Verificatori di qualificazione
- Selezioni di interesse
Perché includere:
Impedisce l'abbandono del modulo, dimostra completezza, fornisce un'opzione negativa esplicita e migliora l'accuratezza dei dati.
📊 Controlli di selezione Min/Max
Selezione del controllo Quantità:
Imposta il numero minimo e massimo di caselle di controllo che devono/possono essere selezionate.
Selezioni minime:
Richiedi agli utenti di selezionare almeno X opzioni. Il modulo non verrà inviato finché il requisito non sarà soddisfatto.
Esempi:
- “Seleziona almeno 2 interessi” (Min: 2)
- “Scegli almeno 3 preferenze” (Min: 3)
- "Scegli almeno 1 opzione" (Min: 1)
Selezioni massime:
Limita la selezione di opzioni da parte degli utenti a un massimo di X. Le caselle di controllo vengono disattivate una volta raggiunto il limite.
Esempi:
- "Scegli le tue 3 caratteristiche principali" (Max: 3)
- “Seleziona fino a 5 servizi” (Max: 5)
- "Non scegliere più di 2 opzioni" (Max: 2)
Feedback chiaro:
Gli utenti visualizzano messaggi di convalida come "Seleziona almeno 2 opzioni" o "Sono consentite al massimo 3 selezioni".
🔧 Gestione delle opzioni semplice
Controllo completo sulle scelte:
- Aggiungi opzioni: digita e premi Invio oppure fai clic su "Aggiungi opzione". Crea elenchi di caselle di controllo in pochi secondi.
- Opzioni di modifica: aggiorna in modo indipendente il testo visualizzato (ciò che gli utenti vedono) e i valori (ciò che viene inviato).
- Predefinito selezionato: preselezionare caselle di controllo specifiche selezionando la casella accanto a ciascuna opzione.
- Opzioni di riordino: usa le frecce su/giù per disporre le caselle di controllo in perfetto ordine.
- Elimina opzioni: rimuovi le opzioni indesiderate con un clic.
Visualizzazione vs. Valore:
- Etichetta: cosa vedono gli utenti (ad esempio, "Aggiornamenti via e-mail")
- Valore: cosa viene memorizzato (ad esempio, "email_updates")
Costruzione in serie:
Aggiungi più opzioni rapidamente digitando, premendo Invio, digitando, premendo Invio: creazione rapida di un elenco di caselle di controllo.
☑️ Funzionalità della casella di controllo singola
Opzioni di personalizzazione:
Testo etichetta casella di controllo:
Il testo visualizzato accanto alla casella di controllo. Rendilo chiaro e specifico (ad esempio, "Accetto di ricevere email di marketing").
Stato predefinito selezionato:
Preselezionare la casella al caricamento del modulo. Da usare con cautela: gli utenti devono selezionare consapevolmente le caselle di consenso.
Valore personalizzato inviato:
Imposta il valore da inviare quando selezionato (in genere "sì", "1" o "vero"). Il valore predefinito è "sì".
Convalida richiesta:
Rendi obbligatoria la casella di controllo. Gli utenti devono selezionarla per inviare il modulo. Perfetto per gli accordi obbligatori.
🔀 Logica condizionale
Visibilità dinamica delle caselle di controllo:
Mostra o nascondi i campi delle caselle di controllo in base ad altri valori del modulo. Visualizza le opzioni solo se pertinenti.
Regole logiche avanzate:
Logica AND: tutte le condizioni devono essere soddisfatte
Logica OR: qualsiasi condizione può attivare l'azione
8 operatori: uguale, diverso, maggiore, minore, contiene, è vuoto e altro ancora
Casi d'uso:
Mostra le caselle di controllo "Preferenze di spedizione" solo quando è selezionato "Richiede spedizione"
Visualizza "Argomenti della newsletter" quando la casella di controllo dell'abbonamento è selezionata
Mostra "Servizi aggiuntivi" quando il tipo di servizio è uguale a "Premium"
Nascondi le "Opzioni sconto" quando il totale dell'ordine è inferiore a $ 50
🎯 Esperienza utente migliorata
Funzionalità intelligenti integrate:
- Indicatori visivi: deseleziona le caselle di controllo con la spaziatura corretta
- Navigazione tramite tastiera: scorri facilmente le opzioni tramite Tab
- Touch-Friendly – Grandi target di tocco per dispositivi mobili
- Selezioni predefinite: preseleziona opzioni specifiche
- Classi CSS personalizzate: applica lo stile ai gruppi di caselle di controllo
- Supporto per l'accessibilità: etichette ARIA, compatibili con i lettori di schermo
- Ottimizzato per dispositivi mobili: dimensioni perfette delle caselle di controllo per il tocco
- Etichette chiare: testo leggibile con allineamento corretto
- Convalida richiesta – Cancella i messaggi di errore
- Testo di aiuto: aggiungi descrizioni per gruppi di caselle di controllo complessi
Configurazione semplice in 3 passaggi
Prepara il tuo campo casella di controllo in pochi minuti
Aggiungi campo casella di controllo
Trascina e rilascia il campo Casella di controllo dalla sezione Campi di base nel tuo modulo.
Scegli la modalità
Selezionare "Casella di controllo singola" per domande a risposta sì/no o "Caselle di controllo multiple" per opzioni a selezione multipla.
Configura opzioni
Per singolo: imposta l'etichetta e il valore della casella di controllo. Per multiplo: aggiungi opzioni, scegli il layout, abilita facoltativamente le opzioni "Seleziona tutto" o "Altro" e imposta le selezioni minime/massime.
."🎉 Ecco fatto! Il campo casella di controllo è pronto con la convalida intelligente.
Applicazioni del mondo reale
Accordi e consenso
* Accettazione dei termini e delle condizioni
* Accordi sulla privacy
* Consenso via e-mail
* Abbonamenti alla newsletter
Sondaggi e feedback
* Domande "Seleziona tutte le risposte applicabili"
* Selezione di interessi multipli
* Raccolta delle preferenze delle funzionalità
* Scelte di interesse per argomento
E-Commerce
* Selezione delle caratteristiche del prodotto
* Componenti aggiuntivi del servizio
* Opzioni di spedizione
* Preferenze di notifica
Moduli di registrazione
* Preferenze di comunicazione
* Categorie di interesse
* Impostazioni dei permessi
* Selezione dell'accesso alle funzionalità
Applicazioni
* Verificatori di qualificazione
* Selezione delle competenze
* Aree di interesse
* Opzioni di disponibilità
Impostazioni e preferenze
* Impostazioni dell'account
* Opzioni sulla privacy
* Scelte di notifica
* Attiva/disattiva le funzionalità
Completa le opzioni del campo
Configurazione di base
- Etichetta del campo: la domanda o il titolo mostrato sopra le caselle di controllo
- Descrizione/Testo di aiuto – Ulteriori indicazioni per gli utenti
- Campo obbligatorio: rendere obbligatorie le caselle di controllo
- Segnaposto – Non applicabile per le caselle di controllo
Modalità casella di controllo
Scegli il tipo di modalità:
- Casella di controllo singola: domanda Sì/No, accordo o consenso (una casella di controllo)
- Caselle di controllo multiple: opzioni di selezione multipla (caselle di controllo multiple)
Opzioni casella di controllo singola
- Testo accanto alla casella di controllo: etichetta visualizzata accanto alla casella di controllo (ad esempio, "Accetto i termini")
- Avvia selezionato: casella di controllo preselezionata al caricamento del modulo
- Valore se selezionato: valore dei dati memorizzato se selezionato (predefinito: "sì")
Opzioni di caselle di controllo multiple
Stile di layout:
- Impilati (uno per riga) – Disposizione verticale
- Affiancati (in fila) – Disposizione orizzontale
- Griglia (colonne multiple) – layout griglia a 2 colonne
Opzioni casella di controllo:
Crea la tua lista di scelte:
- Testo visualizzato: ciò che vedono gli utenti (ad esempio, "Email")
- Valore: cosa viene inviato (ad esempio, "email")
- Predefinito selezionato: preseleziona opzioni specifiche
- Riordina – Sposta le opzioni su/giù
- Elimina – Rimuovi opzioni
Opzioni speciali:
- Aggiungi opzione "Seleziona tutto": aggiunge una casella di controllo in alto che seleziona/deseleziona tutte le opzioni
- Aggiungi l'opzione "Altro" con la casella di testo: aggiunge l'opzione "Altro" con il campo di testo per le risposte personalizzate
- Aggiungi l'opzione "Nessuna delle precedenti": aggiunge un'opzione esclusiva che deseleziona tutte le altre quando selezionate
Limiti di selezione:
- Selezioni minime richieste: numero minimo di caselle di controllo che devono essere selezionate (ad esempio, 2)
- Numero massimo di selezioni consentite: la maggior parte delle caselle di controllo che possono essere selezionate (ad esempio, 5)
Logica condizionale
- Abilita logica condizionale: mostra/nascondi in base alle condizioni
- Tipo logico
- Tutte le condizioni devono essere soddisfatte (E)
- Qualsiasi condizione può essere soddisfatta (OR)
- Regole di condizione
- Mostra/Nascondi – Azione da intraprendere
- Campo – Quale campo controllare
- Operatore – Uguale, Non uguale, Contiene, Maggiore di, Minore di, È vuoto, Non è vuoto
- Valore – Valore di confronto
- Condizioni multiple: aggiungi regole illimitate
Opzioni avanzate
- Campo nascosto: rende il campo invisibile (non consigliato per le caselle di controllo)
- Classi CSS personalizzate: applica stili personalizzati
- Attributi di accessibilità: etichette ARIA per lettori di schermo
Perché scegliere il nostro campo Checkbox?
✅ Due modalità – Casella di controllo singola o più caselle di controllo in un tipo di campo
✅ Layout flessibili – Disposizioni verticali, orizzontali o a griglia
✅ Seleziona tutto – Selezione con un clic per maggiore comodità
✅ Altra opzione – Inserimento di testo per risposte personalizzate
✅ Nessuna opzione – Scelta esclusiva non selettiva
✅ Limiti min/max – Quantità di selezione del controllo
✅ Gestione facile – Aggiungi, modifica, riordina, elimina opzioni senza sforzo
✅ Di facile utilizzo – Etichette chiare, spaziatura corretta, touch-friendly
✅ Perfetta integrazione con Qapter – Funziona perfettamente con tutte le funzionalità del modulo
Domande frequenti
D: Qual è la differenza tra le modalità con casella di controllo singola e multipla?
La modalità singola mostra una casella di controllo per le risposte sì/no. La modalità multipla mostra più caselle di controllo in cui gli utenti possono selezionare più di un'opzione.
D: Gli utenti possono selezionare tutte le caselle di controllo contemporaneamente?
Sì. Abilita l'opzione "Seleziona tutto" per aggiungere una casella di controllo che seleziona o deseleziona tutte le opzioni con un clic.
D: Come funzionano le selezioni min/max?
Il valore minimo garantisce che gli utenti selezionino almeno un certo numero di opzioni. Il valore massimo limita il numero di caselle di controllo che possono essere selezionate.
D: A cosa serve l'opzione "Altro"?
Aggiunge una casella di controllo aggiuntiva denominata "Altro". Quando viene selezionata, appare un campo di testo in cui gli utenti possono inserire una risposta personalizzata.
D: Come funziona "Nessuna delle precedenti"?
Funziona come una scelta esclusiva. Se selezionata, tutte le altre caselle di controllo vengono deselezionate. Se è selezionata un'altra opzione, l'opzione "Nessuno" viene deselezionata automaticamente.
D: Posso preselezionare determinate caselle di controllo?
Sì. Per la modalità singola, attiva "Avvia selezionato". Per la modalità multipla, seleziona la piccola casella di controllo accanto a ciascuna opzione che desideri selezionare per impostazione predefinita.
D: Devo selezionare preventivamente le caselle dell'accordo?
No. Per quanto riguarda policy, termini e consenso, gli utenti devono selezionare attivamente la casella.
D: Posso modificare l'ordine delle caselle di controllo?
Sì. Utilizza le frecce su e giù accanto a ciascuna opzione per riordinarle come preferisci.
D: Qual è la differenza tra testo visualizzato e valore?
Il testo visualizzato è ciò che gli utenti vedono. Il valore è ciò che viene memorizzato nel database per ottenere dati puliti e coerenti.
D: Posso usare la logica condizionale con le caselle di controllo?
Sì. Attiva altri campi in base alle selezioni utilizzando operatori come "Uguale a", "È vuoto" o "Non è vuoto".
D: Come faccio a creare una casella di controllo obbligatoria?
Abilita "Campo obbligatorio". Per la modalità singola, la casella deve essere selezionata. Per la modalità multipla, gli utenti devono selezionare almeno un'opzione o soddisfare il requisito minimo.
D: Gli utenti possono modificare le selezioni dopo aver effettuato il controllo?
Sì. Possono selezionare o deselezionare liberamente qualsiasi opzione prima di inviare il modulo. È anche possibile attivare o disattivare l'opzione "Seleziona tutto" in qualsiasi momento.
