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.

Schermata 2015-11-19 alle 21.33.33

La configurazione iniziale sarà questa:

Schermata 2015-11-19 alle 21.36.32

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:

Schermata 2015-11-19 alle 21.51.44

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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.