Aggiungere scelte di immagini

Vuoi aggiungere opzioni immagine ai tuoi moduli? WPForms semplifica l'aggiunta di immagini ai tuoi campi Scelta multipla, Caselle di controllo, Elementi multipli ed Elementi casella di controllo in modo che i tuoi utenti possano vedere l'opzione o l'elemento che hai elencato.

Questa guida ti mostrerà come aggiungere scelte immagine a campi esistenti o nuovi in WPForms.

Demo modulo d'ordine fiori!
Scegli un fiore da ordinare
Indirizzo di spedizione
$0.00

Vuoi visualizzare in anteprima e utilizzare un modello di modulo personalizzabile per velocizzare il processo di creazione del tuo modulo? Dai un'occhiata al nostro modello di modulo d'ordine di magliette di esempio.


Impostazione delle scelte immagine

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.

Una volta aperto il generatore di moduli, potrai aggiungere scelte di immagini a uno qualsiasi dei seguenti tipi di campo:

  • Scelta multipla
  • Caselle di controllo
  • Elementi multipli
  • Elementi casella di controllo

Inoltre, puoi aggiungere immagini sia ai campi nuovi che a quelli esistenti di questi tipi di campo.

Per il nostro esempio, vogliamo mostrare immagini per le opzioni dell'articolo in un modulo d'ordine. Per fare ciò, aggiungeremo prima un campo Articoli multipli al nostro modulo.

Seleziona campo elementi multipli

Ora che abbiamo aggiunto il nostro campo, il passo successivo è modificare l'etichetta del campo e aggiungere testo per le opzioni disponibili. Poiché stiamo utilizzando un campo Articoli multipli, dobbiamo anche aggiungere i prezzi per ogni articolo.

Aggiungi etichetta e prezzo

Una volta che questa configurazione di base è pronta, selezioneremo l'opzione Usa scelte di immagini.

Seleziona usa scelte di immagini

Non appena questa opzione sarà abilitata, un pulsante Carica immagine verrà aggiunto a ogni opzione. Inoltre, un'immagine segnaposto verrà visualizzata per ogni opzione nell'area di anteprima.

Le immagini segnaposto servono a guidare il processo di creazione del modulo e vengono visualizzate solo nell'area di anteprima. Queste immagini segnaposto non verranno mostrate quando il modulo è incorporato nel tuo sito.

Aggiunta di immagini

Per aggiungere un'immagine a un'opzione, fai clic sul pulsante Carica immagine.

Fai clic sul pulsante carica immagine

Se stai cercando di caricare un formato di immagine non accettato (come i file .svg), dovrai prima abilitare il supporto per quel tipo di file. Assicurati di consultare la nostra guida su come consentire tipi di caricamento file aggiuntivi per maggiori dettagli.

Questo aprirà la Libreria multimediale di WordPress. Da qui, puoi selezionare un file che è già stato aggiunto al tuo sito o caricare una nuova immagine. Una volta scelta l'immagine che desideri utilizzare, fai clic sul pulsante Usa immagine.

Carica e usa immagine

Per questo esempio, abbiamo già modificato tutte le immagini in modo che siano di dimensioni 150x150 pixel. Questo aiuterà le nostre opzioni di immagine ad apparire più uniformi e professionali.

Le immagini non verranno ritagliate o ridimensionate quando vengono aggiunte al tuo modulo. Per ottenere i migliori risultati, consigliamo di rendere tutte le scelte di immagini delle stesse dimensioni e di 250x250 pixel o inferiori.

Per i dettagli sulle opzioni di modifica di base delle immagini integrate nella Libreria multimediale di WordPress, inclusi ridimensionamento e ritaglio, consulta il tutorial di WPBeginner.

Ecco come appariranno le nostre scelte di immagini ai nostri utenti:

Un esempio di campo scelte di immagini

Se preferisci un aspetto più pulito nascondendo le etichette sotto le scelte di immagini, la nostra documentazione per sviluppatori fornisce uno snippet CSS rapido per fare proprio questo.

Personalizzazione delle opzioni immagine

WPForms include anche diverse opzioni integrate per personalizzare le tue scelte di immagini. Per visualizzare queste opzioni, apri la scheda Avanzate nelle Opzioni campo.

Scheda Avanzate

Oltre a qualsiasi altra opzione di personalizzazione disponibile per il campo che stai utilizzando, due opzioni vengono aggiunte quando viene selezionata l'opzione Usa scelte di immagini: Stile scelta immagine e Layout scelta.

Stile e layout delle scelte di immagini

Stile scelta immagine

Ci sono tre opzioni disponibili per lo stile delle scelte di immagini: Moderno, Classico e Nessuno.

Stili delle scelte di immagini

Andremo ad analizzare ciascuna di queste opzioni di seguito:

Stile moderno

L'opzione Modern visualizzerà qualsiasi opzione selezionata all'interno di una casella ombreggiata e aggiungerà anche un segno di spunta verde e bianco al centro dell'opzione selezionata.

Stile moderno per le scelte di immagini in WPForms

Stile Classico

L'opzione Classic aggiungerà semplicemente un bordo spesso, grigio scuro attorno a qualsiasi opzione selezionata.

Stile classico per le scelte di immagini in WPForms

Nessuno

Se preferisci non aggiungere alcuno stile speciale, seleziona l'opzione None. Questa opzione visualizzerà normali caselle di controllo o pulsanti di opzione accanto al testo per ogni opzione.

Nessuno stile per le scelte di immagini in WPForms

Desideri rimuovere lo spazio bianco attorno alle scelte di immagini nei tuoi moduli? Consulta la nostra documentazione per sviluppatori per uno snippet CSS che ottimizza l'aspetto delle tue scelte di immagini.

Layout Scelta

Per qualsiasi campo in cui sono consentite scelte di immagini, avrai diverse opzioni di layout. Questo determinerà quante colonne vengono utilizzate per visualizzare le scelte all'interno di questo campo.

Le opzioni Choice Layout includono Una Colonna, Due Colonne, Tre Colonne e Inline.

Opzioni di layout delle scelte

Per impostazione predefinita, l'opzione Inline sarà selezionata quando l'opzione Aggiungi scelte di immagini è abilitata. Questo posizionerà automaticamente quante più scelte possibile all'interno di ogni riga.

Nella maggior parte dei casi, consigliamo di mantenere il layout di scelta Inline predefinito per i campi di scelta di immagini. Ciò consentirà al layout di adattarsi automaticamente a varie dimensioni dello schermo.

Questo è tutto! Ora puoi aggiungere immagini a qualsiasi campo Scelta Multipla, Caselle di controllo, Elementi Multipli e Elementi Casella di controllo nei tuoi moduli. Se hai utilizzato un campo Elementi Multipli e prevedi di accettare pagamenti, non dimenticare di configurare un'integrazione con StripePayPal, Authorize.Net, o Square.

Successivamente, desideri testare i tuoi moduli prima di aggiungerli al tuo sito? Assicurati di consultare la nostra checklist pre-lancio per tutti i nostri suggerimenti e raccomandazioni prima di lanciare un modulo.

Il miglior plugin per la creazione di moduli drag and drop per WordPress

Facile, veloce e sicuro. Unisciti a oltre 6 milioni di proprietari di siti web che si affidano a WPForms.