### [Aggiungere scelte di immagini](https://wpforms.com/docs/how-to-add-image-choices-to-fields/) **Pubblicato:** 25 novembre 2023 **Autore:** David Ozokoye **Estratto:** Scopri come aggiungere immagini ai campi a scelta multipla, caselle di controllo, elementi multipli o elementi di casella di controllo. **Contenuto:** Vuoi aggiungere opzioni immagine ai tuoi moduli? WPForms semplifica l'aggiunta di immagini ai tuoi campi a scelta multipla, caselle di controllo, elementi multipli e elementi di casella di controllo in modo che i tuoi utenti possano vedere l'opzione o l'elemento che hai elencato. Questo tutorial ti mostrerà come aggiungere scelte di immagini a campi esistenti o nuovi in WPForms. - [Impostazione delle scelte di immagini](#setup) - [Aggiunta di immagini](#adding-images) - [Personalizzazione delle opzioni immagine](#customize) Abilita JavaScript nel tuo browser per completare questo modulo. ##### Demo modulo d'ordine fiori! Scegli un fiore da ordinare \*- Rosa – $4,99 - Girasole – $7,99 - Speciale di Sullie – $14,99 Indirizzo di spedizione \*Indirizzo Linea 1 Città — Seleziona stato —AlabamaAlaskaArizonaArkansasCaliforniaColoradoConnecticutDelawareDistretto di ColumbiaFloridaGeorgiaHawaiiIdahoIllinoisIndianaIowaKansasKentuckyLouisianaMaineMarylandMassachusettsMichiganMinnesotaMississippiMissouriMontanaNebraskaNevadaNew HampshireNew JerseyNew MexicoNew YorkNorth CarolinaNorth DakotaOhioOklahomaOregonPennsylvaniaRhode IslandSouth CarolinaSouth DakotaTennesseeTexasUtahVermontVirginiaWashingtonWest VirginiaWisconsinWyomingStato Totale \*$0,00 Ordina ora 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](https://wpforms.com/templates/sample-shirt-order-form-template/). --- ## Impostazione delle scelte di immagini Prima di iniziare, assicurati che WPForms sia [installato e attivato](https://wpforms.com/docs/install-wpforms-plugin/ "Come installare il plugin WPForms") sul tuo sito WordPress e che tu abbia [verificato la tua licenza](https://wpforms.com/docs/verify-wpforms-license/ "Come verificare la tua licenza WPForms"). Quindi puoi [creare un nuovo modulo](https://wpforms.com/docs/creating-first-form/ "Come creare il tuo primo 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 di casella di controllo Inoltre, puoi aggiungere immagini sia a campi nuovi che esistenti di questi tipi di campo. Per il nostro esempio, vogliamo mostrare immagini per le opzioni articolo in [un modulo d'ordine](https://wpforms.com/how-to-create-a-simple-order-form-in-wordpress/ "Come creare un modulo d'ordine in WordPress [+Modelli gratuiti]"). Per fare ciò, aggiungeremo prima un campo **Elementi multipli** al nostro modulo. 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 Elementi multipli, dobbiamo anche aggiungere i prezzi per ogni articolo. Una volta che questa configurazione di base è pronta, selezioneremo l'opzione **Usa scelte di immagini**. Non appena questa opzione è 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 viene incorporato nel tuo sito. ## Aggiunta di immagini Per aggiungere un'immagine a un'opzione, fai clic sul pulsante **Carica immagine**. Se stai tentando 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](https://wpforms.com/docs/how-to-allow-additional-file-upload-types/) per maggiori dettagli. Questo aprirà la Libreria multimediale di WordPress. Da qui, puoi selezionare un file già aggiunto al tuo sito o caricare una nuova immagine. Una volta scelta l'immagine che desideri utilizzare, fai clic sul pulsante **Usa immagine**. Per questo esempio, abbiamo già modificato tutte le immagini per avere dimensioni di 150 x 150 pixel. Questo aiuterà le nostre opzioni 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 della stessa dimensione e di 250 x 250 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](http://www.wpbeginner.com/beginners-guide/how-to-crop-rotate-scale-and-flip-images-in-wordpress/). Ecco come appariranno le nostre scelte di immagini ai nostri utenti: Se preferisci un aspetto più pulito nascondendo le etichette sotto le scelte di immagini, la nostra [documentazione per sviluppatori](https://wpforms.com/developers/how-to-hide-image-choice-labels-with-wpforms/) 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** all'interno delle Opzioni campo. 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 scelta immagine Sono disponibili tre opzioni per lo stile delle scelte di immagini: Moderno, Classico e Nessuno. Andremo ad analizzare ciascuna di queste opzioni di seguito: #### Stile Moderno L'opzione **Moderno** visualizzerà le opzioni selezionate all'interno di una casella con ombra e aggiungerà anche un segno di spunta verde e bianco al centro dell'opzione selezionata. #### Stile Classico L'opzione **Classico** aggiungerà semplicemente un bordo spesso e grigio scuro attorno alle opzioni selezionate. #### Nessuno Se preferisci non aggiungere alcuno stile speciale, seleziona l'opzione **Nessuno**. Questa opzione visualizzerà caselle di controllo o pulsanti di opzione normali accanto al testo per ogni opzione. Vuoi rimuovere lo spazio bianco attorno alle scelte di immagini nei tuoi moduli? Consulta la nostra [documentazione per sviluppatori](https://wpforms.com/developers/how-to-remove-whitespace-from-around-image-choices/) per uno snippet CSS che ottimizza l'aspetto delle tue scelte di immagini. ### Layout scelta Per qualsiasi campo in cui sono consentite le 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 **Layout scelta** includono Una colonna, Due colonne, Tre colonne e In linea. Per impostazione predefinita, l'opzione **In linea** sarà selezionata quando l'opzione Aggiungi scelte immagine è abilitata. Questo posizionerà automaticamente quante più scelte possibile in ogni riga. Nella maggior parte dei casi, consigliamo di mantenere il layout di scelta predefinito **In linea** per i campi con scelte di immagini. Ciò consentirà al layout di adattarsi automaticamente a varie dimensioni dello schermo. Ecco fatto! Ora puoi aggiungere immagini a qualsiasi campo Scelta multipla, Caselle di controllo, Elementi multipli e Elementi di 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 [Stripe](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/ "Come installare e utilizzare l'addon Stripe con WPForms"), [PayPal](https://wpforms.com/docs/install-use-paypal-addon-wpforms/ "Come installare e utilizzare l'addon PayPal con WPForms"), [Authorize.Net](https://wpforms.com/docs/how-to-install-and-use-the-authorize-net-addon-with-wpforms/ "Come installare e utilizzare l'addon Authorize.Net con WPForms") o [Square](https://wpforms.com/docs/how-to-install-and-use-the-square-addon-with-wpforms/ "Come installare e utilizzare l'addon Square con WPForms"). Successivamente, vuoi testare i tuoi moduli prima di aggiungerli al tuo sito? Assicurati di consultare [la nostra checklist pre-lancio](https://wpforms.com/docs/how-to-properly-test-your-wordpress-forms-before-launching-checklist/ "Come testare correttamente i tuoi moduli WordPress prima del lancio [Checklist]") per tutti i nostri suggerimenti e raccomandazioni prima di lanciare un modulo. **Categorie:** Campi, Personalizzazioni campo ---