
Gravity Forms: immagini come elementi checkbox

Francesco Cozzi
Per permetterti di interagire con me e con i contenuti del mio sito raccolgo dei dati tramite cookie, <br>ti invito a leggere ed accettare come tratto i tuoi dati per continuare a garantire la libertà della Rete.<br> Privacy Policy
Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.
Gravity Forms è il plugin più conosciuto e usato per creare form customizzati in WordPress.
Grazie alla sua versatilità permette di integrarsi perfettamente anche in un ambiente e-commerce come WooCommerce supportando tutti i più diffusi metodi di pagamento come Paypal, Stripe ed altri.
Questo permette di creare veri e propri configuratori per prodotti custom o per esempio form per richiedere preventivi personalizzati e tanto altro.
In quest’ottica potrebbe essere molto utile poter visualizzare delle immagini delle varie possibilità di scelta.
Senza scendere nei dettagli sulll’utilizzo di Gravity Forms (rimando alla documentazione ufficiale fatta molto bene), in questo articolo spiegherò come creare una lista checkbox inserendo delle immagini come possibili scelte.
Aggiungiamo un “Pulsante Radio” nel nostro modulo.
La configurazione iniziale sarà questa:
Abbiamo creato un campo che permette la selezione di una tra le tre scelte mostrate sottoforma di elenco.
L’obiettivo è sostituire la stringa di testo di ogni scelta con una immagine definendone anche descrizione testuale e dimensioni delle immagini.
Procediamo inserendo nei vari campi di alternative un semplice tag html <img> unito ad un tag <a> per aggiungere il testo descrittivo.
Dobbiamo ovviamente sostituire il link dell’immagine, il testo e le dimensioni in pixel che desideriamo.
Salviamo e il risultato sarà per esempio questo:
Piccola dritta: per allineare in colonne e righe tutti o alcuni campi vi consiglio di dare un’occhiata alle CSS Ready Class di Gravity Forms.
Per ogni dubbio o chiarimento lasciate pure un commento.