Riassunto AI
Ti sei mai chiesto se potessi permettere agli utenti di selezionare un'immagine nel tuo modulo WordPress invece che solo testo?
Ammettiamolo. Siamo tutti naturalmente attratti da elementi interattivi e visivi. Un modulo di solo testo è funzionalmente valido, ma un modulo con immagini selezionabili si traduce in un'esperienza utente MOLTO migliore.
E sai una cosa? Aggiungere immagini ai pulsanti di opzione in un modulo WordPress è in realtà abbastanza facile da fare, come ti mostrerò in questo articolo.
Come aggiungere un'immagine accanto ai pulsanti di opzione nei moduli WordPress
WPForms rende semplicissimo aggiungere immagini o icone ai tuoi pulsanti di opzione a scelta multipla o ai tuoi campi Casella di controllo. Ecco i passaggi che dovrai seguire:
Se preferisci istruzioni scritte, continua a leggere qui sotto.
Passaggio 1: Crea un modulo WordPress semplice
La prima cosa che dovrai fare è installare e attivare il plugin WPForms. Per maggiori dettagli, consulta questa guida passo-passo su come installare un plugin in WordPress.
Dopo aver installato correttamente WPForms sul tuo sito, puoi iniziare a creare il tuo modulo aprendo la dashboard di WordPress e navigando su WPForms » Aggiungi Nuovo.
Dopodiché, puoi iniziare dando un nome al tuo modulo e quindi scegliendo un modello. Per questo esempio, userò il modello Modulo di contatto semplice, che è uno dei oltre 2.100 modelli di moduli WordPress disponibili.
Non appena selezioni un modello, questo verrà caricato all'interno del costruttore di moduli.
Puoi anche consultare il nostro tutorial su come creare un modulo di contatto semplice come esempio per iniziare.
Passaggio 2: Personalizza il tuo modulo WordPress
Il modello Modulo di contatto semplice viene fornito con i seguenti campi modulo predefiniti:
- Nome
- Commento o Messaggio
Nel nostro esempio, aggiungeremo un campo modulo Scelta multipla al nostro modulo di contatto semplice e cambieremo l'etichetta e le scelte per chiedere perché l'utente ci sta contattando.
Puoi aggiungere campi aggiuntivi al tuo modulo trascinandoli dal pannello di sinistra al pannello di destra.
Quindi, fai clic sul campo per apportare eventuali modifiche. Puoi anche fare clic su un campo modulo e trascinarlo per riorganizzare l'ordine dei campi nel tuo modulo di contatto.
Puoi aggiungere immagini accanto ai campi modulo Scelta multipla e Elementi multipli, che sono pulsanti di opzione, nonché ai campi modulo Caselle di controllo e Elementi casella di controllo.
Ora è il momento di aggiungere le immagini accanto a ciascun pulsante di opzione.
Passaggio 3: Aggiungi immagini ai pulsanti di opzione
Per aggiungere un'immagine ai pulsanti di opzione del tuo modulo, apri le Opzioni campo per il tuo campo Scelta multipla e quindi abilita l'interruttore Usa scelte di immagini.
Dopo aver abilitato le Scelte di immagini, puoi caricare un'immagine per ogni scelta nel tuo campo.
Per aggiungere un'immagine, fai clic sul pulsante Carica immagine. Questo aprirà la tua libreria multimediale di WordPress in modo da poter caricare una nuova immagine su WordPress o scegliere tra quelle esistenti.
Aggiungi scelte icona ai pulsanti di opzione
A seconda del tuo modulo, potrebbe avere più senso utilizzare scelte icona anziché scelte immagine. Puoi facilmente attivare questa opzione nello stesso modo in cui hai fatto per le scelte immagine selezionando Usa scelte icona nel pannello Opzioni campo.
WPForms utilizza un'ampia libreria di icone già pronte, quindi non devi caricarle. Puoi semplicemente selezionare l'icona di cui hai bisogno tra le opzioni disponibili.
Per maggiori dettagli, consulta la nostra guida su come utilizzare le scelte icona in WPForms.
Passaggio 4: Personalizza le tue scelte di immagini
WPForms rende la personalizzazione delle tue scelte immagine super semplice grazie alle opzioni di personalizzazione integrate. Per prima cosa, scegli il tuo Stile scelta immagine preferito.
Lo stile Moderno visualizza le immagini selezionate in una casella con ombra e aggiunge un segno di spunta verde al centro. Lo stile Classico visualizza le immagini selezionate con un bordo spesso e grigio.
L'opzione Nessuno non aggiungerà alcuno stile speciale; invece, vedrai i tradizionali pulsanti di opzione accanto a ciascuna immagine tra cui i visitatori del sito potranno scegliere. Quindi puoi visualizzare altre opzioni facendo clic sulla scheda Avanzate.
È importante assicurarsi di selezionare il tuo Layout scelta preferito. Puoi scegliere tra 1, 2 o 3 colonne.
Hai anche la possibilità di scegliere In linea, che posiziona quante più opzioni possibile in ogni riga prima di aggiungerne un'altra. In linea è il layout di scelta predefinito per tutti i moduli WordPress che visualizzano scelte immagine.
Puoi anche selezionare l'opzione Ordina casualmente le scelte se desideri randomizzare l'ordine delle scelte immagine ogni volta che un nuovo utente visita il tuo sito web.
Passaggio 5: Abilita il report dei sondaggi
Se desideri vedere quante persone scelgono ciascuna scelta immagine che offri, puoi abilitare il reporting dei sondaggi per i tuoi moduli installando e attivando il componente aggiuntivo Sondaggi e questionari.
Per fare ciò, vai su WPForms » Componenti aggiuntivi e trova quello etichettato Componente aggiuntivo Sondaggi e questionari. Fai clic su Installa componente aggiuntivo e poi su Attiva.
WPForms ti consente di raccogliere i risultati dei sondaggi per i seguenti campi del modulo:
- Testo a riga singola
- Testo paragrafo
- Menu a discesa
- Caselle di controllo
- Scelta multipla
- Valutazione
- Scala Likert
- Net Promoter Score (NPS)
Per abilitare il reporting dei sondaggi per tutti i campi compatibili in un modulo, vai su Impostazioni » Sondaggi e questionari nell'editor del modulo e seleziona l'opzione Abilita reporting sondaggi.
Se desideri raccogliere dati solo per un campo specifico, apri il suo pannello Opzioni campo e fai clic sulla scheda Avanzate. Quindi attiva Abilita reporting sondaggi.
Una volta che le persone iniziano a compilare il tuo modulo, completo di immagini accanto ai pulsanti di opzione, sarai in grado di generare report dei sondaggi nella dashboard di WordPress per vedere i risultati.
Per generare un report del sondaggio, vai su WPForms » Tutti i moduli e passa il mouse sopra il tuo modulo per visualizzare le opzioni. Quindi, fai clic su Risultati del sondaggio.
Con WPForms, i tuoi dati vengono ora generati automaticamente in bellissimi report facili da capire per il cervello umano.
Aggiungere immagini accanto ai campi radio – FAQ
Ho raccolto alcune domande comuni che il nostro team ha ricevuto di recente sui campi radio e le immagini. Leggi queste se hai ulteriori domande su questo argomento.
Perché dovrei aggiungere immagini accanto ai pulsanti radio nei moduli di WordPress?
Le immagini funzionano benissimo come aiuti visivi nei moduli di WordPress; sono molto più facilmente notabili e attirano immediatamente gli occhi del visitatore.
Di conseguenza, i moduli che hanno elementi visivi sono più facili da compilare perché richiedono meno tempo per essere letti e compresi, portando a un maggiore coinvolgimento dell'utente e a un'esperienza complessiva migliorata.
Ho bisogno di esperienza di codifica per aggiungere immagini al mio modulo?
Se stai utilizzando un plugin user-friendly come WPForms, non hai bisogno di una singola riga di codice per aggiungere immagini ai tuoi moduli.
Aggiungere immagini al tuo modulo con WPForms è come caricare immagini nella tua Libreria multimediale di WordPress. Chiunque può farlo!
L'aggiunta di immagini rallenterà il mio sito web?
Sebbene l'aggiunta di immagini influenzi la velocità di caricamento della pagina, molto dipende dal tuo sito web specifico. Se fai attenzione alla quantità di immagini che stai aggiungendo e ti assicuri che siano tutte ottimizzate, non ci sarà alcun impatto negativo sulla velocità della tua pagina.
Posso personalizzare l'aspetto dei pulsanti radio e delle immagini?
Sì, puoi personalizzare l'aspetto dei pulsanti radio e delle immagini in WPForms. Ad esempio, puoi scegliere tra diversi layout di campo come disposizioni inline, a 1 colonna, a 2 colonne e a 3 colonne.
Inoltre, WPForms ti consente anche di scegliere tra stili Moderno e Classico per le scelte dei campi radio, che visualizzano le immagini in stili leggermente diversi.
Le immagini accanto ai pulsanti radio influiscono sull'accessibilità?
Le immagini che accompagnano i pulsanti radio possono influire sull'accessibilità se si ignorano alcune considerazioni come il contrasto di colore tra lo sfondo e le immagini.
Raccomando di aggiungere testi alternativi descrittivi alle tue immagini ed eseguire un controllo visivo di base per assicurarsi che le immagini siano immediatamente visibili con un alto contrasto.
Se ti costa fatica vedere chiaramente l'immagine, è un segno che hai bisogno di colori più contrastanti per garantire un'accessibilità ideale.
Successivamente, Guadagna di più online
Ed ecco fatto! Ora sai come aggiungere un'immagine accanto ai pulsanti radio nei moduli di WordPress.
Se sei interessato a guadagnare online, puoi consultare il nostro tutorial su come creare un semplice modulo d'ordine in WordPress e aggiungere immagini accanto a ciascun articolo che hai in vendita.
Crea ora il tuo modulo WordPress
Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.
Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.
l'immagine radio non viene visualizzata nei campi di pagamento... funziona bene nei "campi standard" ma non funziona nei campi di pagamento.
qualche idea sul perché??
Ciao Raju,
Mi dispiace! Sì, al momento questo è intenzionalmente impedito a causa di come le nostre integrazioni di pagamento gestiscono queste etichette (l'HTML causerebbe problemi quando quei dati vengono inviati a Stripe o PayPal). Questo è nel mirino del nostro team, tuttavia, e i nostri sviluppatori stanno lavorando a una soluzione. Non ho una tempistica, ma speriamo di risolverlo presto!
Nel caso possa essere d'aiuto, le immagini possono ancora essere aggiunte a ciascuna opzione dell'elemento con un po' di CSS personalizzato. Ciò richiede uno stile CSS specifico per il modulo, ma se volessi contattare il nostro team di supporto possiamo aiutarti a realizzarlo 🙂
La funzionalità "Image Choices to WPForms" è una capacità di base del modulo?
Il mio sito contiene diverse gallerie di immagini che non cambiano per un utente. Ci sono tra 5 e 30 immagini in un modulo e 50 moduli (gallerie). Voglio che l'utente selezioni un'immagine su un modulo, poi passi al modulo successivo; selezioni un'immagine e così via. Ogni selezione di immagine corrisponde a un paragrafo di testo che voglio fornire all'utente in un report. Questo può essere fatto con WPForms? Con solo piccole aggiunte di codice?
Ciao Richard,
Mi scuso, ma non sono sicuro di capire esattamente cosa stai cercando di fare. Quando hai un momento, potresti contattare il nostro supporto con qualche dettaglio in più?
Grazie! :)
Questa è un'ottima funzionalità, tuttavia sia lo stile moderno che quello classico sono molto mal progettati. Nel classico il riquadro grigio è molto difficile da vedere e nel moderno, il segno di spunta è sull'immagine e spesso difficile da vedere, mostra un'icona di spunta nera su molti telefoni che lo rende ancora più difficile da vedere e il grassetto del testo sposta a volte i campi quando sono su mobile...
Mantienilo semplice e crea un riquadro COLORATO in grassetto che non cambi la larghezza dei campi.
Ciao Martin – Grazie per il feedback e i suggerimenti! Li ho annotati nel nostro tracker in modo che il team di sviluppo possa considerarli mentre lavora alla nostra roadmap per futuri aggiornamenti, nel frattempo se lo desideri puoi contattare il nostro team di supporto per ricevere aiuto e potranno assisterti con del codice CSS personalizzato per farlo apparire come desideri.
Se hai una licenza WPForms, hai accesso al nostro supporto via email, quindi per favore invia un ticket di supporto. Altrimenti, forniamo un supporto gratuito limitato nel forum di supporto di WPForms Lite su WordPress.org.
Grazie :)
Salve,
Ho usato la scelta dell'immagine insieme alle caselle di controllo. Funziona bene in modalità desktop e tablet, ma non su mobile. L'intera sezione delle caselle di controllo con tutte le immagini e le caselle di controllo scompare dal breakpoint 600px in giù. Ho del CSS personalizzato, pensavo potesse essere il mio CSS a causare i problemi e l'ho rimosso, ma senza successo.
Uso la versione gratuita di WPFrom.
Qualche idea?
Ciao Daniel,
In tal caso, ti consiglio di utilizzare la classe CSS per dispositivi mobili come mostrato in questa guida
Spero che questo aiuti! :)