Riassunto AI
Vuoi aggiungere opzioni icona ai tuoi moduli? L'uso di icone nei campi Scelta multipla, Caselle di controllo, Elementi multipli e Elementi casella di controllo è un modo semplice per migliorare l'attrattiva visiva e l'esperienza utente del tuo modulo.
Questo tutorial ti mostrerà come aggiungere scelte icona a campi esistenti o nuovi in WPForms.
Prima di iniziare, dovrai assicurarti che WPForms sia installato e attivato sul tuo sito WordPress e che tu abbia verificato la tua licenza. Quindi puoi creare un nuovo modulo o modificarne uno esistente per accedere al generatore di moduli.
Configurazione del tuo modulo
Una volta aperto il generatore di moduli, potrai aggiungere scelte icona a uno qualsiasi dei seguenti tipi di campo:
- Scelta multipla
- Caselle di controllo
- Elementi multipli
- Elementi casella di controllo
Per il nostro esempio, creeremo un semplice modulo di contatto che consente agli utenti di scegliere il loro metodo di contatto preferito, tra cui chiamata telefonica, SMS o e-mail.
Per iniziare, aggiungeremo un campo Scelta multipla al nostro modulo facendo clic su di esso o trascinandolo nell'area di anteprima del modulo.
Successivamente, cambieremo le etichette delle nostre scelte per includere quanto segue: Chiamata telefonica, SMS e E-mail.
Nota: Vuoi aggiungere un lungo elenco di scelte al tuo modulo? Dai un'occhiata alla nostra guida su come aggiungere scelte in blocco per imparare come aggiungere più scelte icona al tuo modulo contemporaneamente invece di creare ogni scelta singolarmente.
Abilitazione delle scelte icona
Una volta che questa configurazione di base è pronta, abiliteremo le scelte icona attivando l'opzione Usa scelte icona.
Se è la prima volta che configuri le scelte icona, vedrai una sovrapposizione con un messaggio che ti chiede di scaricare una libreria di icone. Il download della libreria di icone è un passaggio obbligatorio che ti concede l'accesso a oltre 2.000 icone da utilizzare nei tuoi moduli.
Per procedere con il download, fai clic sul pulsante Continua.
Nota: WPForms utilizza l'ultima versione della libreria di icone Font Awesome per le scelte icona.
Successivamente, vedrai un'altra sovrapposizione che ti informa che il download è in corso. Per evitare interruzioni durante l'installazione, assicurati di non chiudere o ricaricare la finestra del browser.
Una volta che la libreria di icone è stata installata correttamente, fai clic sul pulsante OK per salvare il tuo modulo e ricaricare il generatore di moduli.
Selezione delle icone
Ora che abbiamo abilitato le scelte icona, vengono aggiunte icone predefinite al nostro modulo. Selezioneremo nuove icone per sostituire quelle predefinite facendo clic su ciascuna icona nella parte sinistra del generatore di moduli.
Successivamente, apparirà la modale Selettore icone. Qui puoi sfogliare o cercare l'icona perfetta da utilizzare nel tuo modulo.
Andremo avanti e cercheremo un'icona del telefono digitando "telefono" nella barra di ricerca.
I risultati della ricerca visualizzeranno tutte le icone contenenti "telefono" nel nome dell'icona. Continueremo facendo clic sull'icona del telefono per selezionarla come nostra prima scelta icona.
Dopo aver selezionato un'icona dall'Icon Picker, questa apparirà nel generatore di moduli.
Continua e seleziona altre icone da utilizzare per le restanti scelte nel tuo modulo ripetendo questo processo.
Personalizzazione delle scelte icona
Una volta selezionate le icone che desideri utilizzare nel tuo modulo, è ora di personalizzare il loro aspetto. WPForms semplifica la personalizzazione del colore, delle dimensioni e dello stile delle icone, direttamente dal generatore di moduli. Tratteremo ciascuna di queste opzioni di seguito.
Nota: Le personalizzazioni vengono applicate a tutte le scelte di icone all'interno dello stesso campo del modulo.
Colore Icona
Per impostazione predefinita, il colore dell'icona è impostato su blu. Puoi facilmente selezionare il colore dell'icona preferito facendo clic sull'opzione Colore Icona e utilizzando lo strumento di selezione del colore.
Il colore selezionato si applicherà a tutte le scelte di icone per il dato campo.
Nota: Se stai utilizzando scelte di icone con il componente aggiuntivo Conversational Forms, tieni presente che lo schema di colori che selezioni per il tuo modulo conversazionale sovrascriverà il colore dell'icona.
Dimensione Icona
Ci sono 3 opzioni di dimensione per le scelte di icone, tra cui Piccola, Media e Grande. Per cambiare la dimensione, fai clic sul menu a discesa Dimensione Icona e seleziona la dimensione preferita.
Ecco un confronto delle opzioni di dimensione sul frontend:
La dimensione selezionata si applicherà a tutte le scelte di icone per il dato campo.
Stile Scelta Icona
Ci sono 4 opzioni per lo stile delle scelte di icone, tra cui Predefinito, Moderno, Classico e Nessuno. Per cambiare lo stile dell'icona, fai clic sul menu a discesa Stile Scelta Icona e seleziona lo stile preferito.
Lo stile di scelta icona selezionato si applicherà a tutte le scelte di icone per il dato campo.
Andremo ad analizzare ciascuna delle opzioni di stile disponibili di seguito:
Predefinito
Lo stile Predefinito aggiunge un bordo arrotondato, include una casella di controllo o un pulsante di opzione visibile, ha uno sfondo e un bordo colorati quando selezionato e visualizza l'etichetta della scelta all'esterno del bordo.
Moderno
Lo stile Moderno aggiunge un bordo arrotondato, visualizza l'etichetta della scelta all'interno del bordo e ha un'ombra e un bordo colorato quando selezionato.
Classico
Lo stile Classico aggiunge un bordo quadrato e colorato quando selezionato. L'etichetta della scelta viene visualizzata all'interno del bordo della scelta selezionata.
Nessuno
Se non desideri includere alcuno stile speciale, seleziona l'opzione Nessuno. Questa opzione visualizza una casella di controllo o un pulsante di opzione in una singola riga sotto l'icona.
Selezione di un layout di scelta
Per selezionare un layout per la visualizzazione delle scelte di icone nel tuo modulo, apri la scheda Avanzate nel pannello Opzioni Campo.
Puoi scegliere tra le seguenti 4 opzioni di layout per la visualizzazione delle scelte: Una Colonna, Due Colonne, Tre Colonne e In Linea. Il layout che selezioni determinerà il numero di colonne utilizzate per visualizzare le scelte.
Fai clic sul menu a discesa Layout Scelta e seleziona il layout preferito.
Ecco come apparirà il modulo sul frontend del sito:
Domande frequenti
Di seguito sono riportate alcune delle domande più frequenti sull'utilizzo delle scelte di icone.
Perché le icone non vengono visualizzate nel mio modulo?
Se le scelte di icone che hai aggiunto al tuo modulo non vengono visualizzate, è probabile che ci sia un problema con la cartella contenente la libreria di icone. Per risolvere questo problema, apri semplicemente il tuo modulo nell'editor di moduli e segui le istruzioni per reinstallare la libreria di icone.
Perché le icone non vengono visualizzate nelle voci, nelle notifiche email, nelle voci stampate, ecc.?
Le icone vengono utilizzate per migliorare l'aspetto di un modulo e fornire indizi visivi agli utenti, rendendo più facile per loro completare il modulo rapidamente. Tuttavia, non dovrebbero essere considerate un sostituto di etichette o descrizioni, poiché l'interpretazione del significato di un'icona può variare. Solo il valore di un'icona selezionata viene incluso nelle voci e nelle notifiche email per comunicare efficacemente le informazioni inviate tramite il tuo modulo.
Ecco fatto! Ora sai come aggiungere scelte di icone al tuo modulo.
Successivamente, vuoi aggiungere contenuti extra ai tuoi moduli? Assicurati di consultare la nostra guida su come utilizzare il campo Contenuto per imparare ad aggiungere intestazioni, elenchi, media e altro ai tuoi moduli.