Moduli di contatto in Joomla con JD Simple Contact Form

In molti siti web è indispensabile inserire dei moduli di contatto sia per consentire ai visitatori di richiedere velocemente informazioni, sia per i gestori del sito web che hanno la possibilità di configurare il modulo in base alle proprie esigenze.

Infatti è possibile stabilire quali informazioni si vogliono ricevere definendo con precisione i campi da far compilare. Inoltre c'è da tenere presente che un visitatore che compila un modulo lo fa perché ha un forte interesse nei confronti dei servizi e\o dei prodotti offerti. Nel presente articolo vedremo come installare e configurare una estensione per realizzare con facilità form di contatto: JD Simple Contact Form.

Non lasciamoci ingannare dal nome perchè il modulo JD Simple Contact Form consente di realizzare moduli alquanto complessi malgrado la sua facilità d'uso. Si tratta di un modulo responsive e compatibile con Bootstrap 4 per cui i forms realizzati saranno ben visualizzati sulle varie tipologie di dispositivi: pc, tablet, smartphone.

Prima di tutto facciamo il download del modulo facendo riferimento alla specifica pagina della JED. Scaricato il file lo installiamo come di consueto da Estensioni -> Gestione -> Installa. Ultimata l'installazione è possibile realizzare i propri forms da Estensioni -> Moduli editando il modulo JD Simple Contact Form e concentrandoci sulle tre tabs più importanti: Modulo, Form Layouts, Email Options.

La tab Modulo è alquanto semplice e veloce da configurare: bisogna ovviamente inserire il nome del modulo al quale è possibile aggiungere una breve descrizione che viene visualizzata sotto il titolo del modulo e prima dei campi. Successivamente possiamo decidere se attivare il supporto Ajax, che permette di inviare il modulo senza ricaricare la pagina, e se attivare la verifica Captcha per contrastare i bot automatici. Inoltre possiamo personalizzare il testo del pulsante SUBMIT e attribuirgli una classe CSS specifica in modo tale da personalizzare l'aspetto grafico. Infine è possibile personalizzare il messaggio di ringraziamento una volta inviato il form e decidere se reindirizzare gli utenti verso una pagina specifica del sito dopo l'invio del form.

jdsimplecontactform 01

 

La tab Form Layouts è la più importante in quanto permette di inserire i campi del form definendone l'ordine e la disposizione. E' possibile inserire un numero di campi illimitato per ogni form. Le impostazioni sono le seguenti:

Name: il nome del campo che deve essere univoco per ogni campo e può contenere solo caratteri alfanumerici e non verrà visualizzato nel frontend.

Type: è possibile selezionare la tipologia di campo tra le nove disponibili:

  • Text: campo di testo che accetta qualsiasi tipologia di testo. È possibile impostarne la larghezza.
  • Textarea: campo di testo multilinea (la classica area di testo) che accetta qualsiasi tipologia di testo.
  • Radio: campo radio (il classico cerchio da spuntare) che consente di scegliere solo una opzione tra quelle proposte.
  • Checkbox: casella di controllo per indicare che una specifica opzione è stata accettata.
  • Checkboxes: caselle di controllo che è possibile selezionare contemporaneamente per accettare più opzioni
  • E-mail: campo di testo che accetta solo indirizzi e-mail.
  • List: elenco di opzioni tra le quali selezionarne una.
  • Number: campo di testo che accetta solo numeri
  • URL: campo di testo che accetta solo URL.

Label: Nome del campo, che verrà visualizzata nel frontend.

Required: Se impostato su Sì è necessario compilare i rispettivi campi per poter inviare il form.

jdsimplecontactform 02

 

La tab Email Options consente di impostare le opzioni delle email che vengono automaticamente inviate ogni volta che un form viene compilato e inviato.

From Email: l'indirizzo email dal quale inviare le email.

From Name: il nome che deve comparire nel campo Da dell'email.

Email Subject: il soggetto dell'email. E' possibile utilizzare la sintassi {field:label} & {field:value} per rendere dinamico il soggetto dell'email inserendo ad esempio il nome e il cognome.

Email Address: l'indirizzo email che riceverà i risultati del form. E' possibile inserire più indirizzi email separandoli con la virgola.

CC Email: inserire l'indirizzo email qualora si voglia valorizzare il campo copia carbone dell'email. E' possibile inserire più indirizzi email separandoli con la virgola.

BCC Email: inserire l'indirizzo email qualora si voglia valorizzare il campo copia carbone nascosta dell'email. E' possibile inserire più indirizzi email separandoli con la virgola.

Email Templates: permette di utilizzare il template Predefinito per l'invio dell'email. Il template predefinito elenca tutti i campi uno di seguito all'altro utilizzando la sintassi {field:label} & {field:value}. Qualora si voglia personalizzare il template selezionare l'opzione Custom e utilizzando sempre la sintassi {field:label} & {field:value} è possibile personalizzare a piacere il testo e la formattazione dell'email.

jdsimplecontactform 03

 

Ho esemplificato le potenzialità di JD Simple Contact Form realizzando un abbozzo di modulo di iscrizione ad un circolo sportivo visionabile alla URL: https://lab.frascan.com/test/jd-simple-contact-form.html