Gravity Forms: immagini come elementi checkbox

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.

<a>Prima Scelta<img src="http://dominio.com/wp-content/uploads/2015/11/IMG_000.jpg" alt="Smiley face" height="400" width="400"></a>

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.