Come creare un modulo di contatto in Joomla

I form sono considerati uno strumento professionale per gestire i contatti via mail da parte degli utenti e possono aiutarti ad apparire più affidabile e disponibile nei loro confronti e a conoscerli meglio.

In più poter inviare richieste di informazioni o supporto direttamente dal sito attraverso un modulo di contatto di Joomla può far sì che più visitatori si mettano in comunicazione con te.

In questa guida vedremo i 2 metodi principali per inserirli nei menù di Joomla, nelle aree del template come moduli o dentro una vera e propria pagina contatti. Inoltre parleremo di alcune funzionalità con cui possiamo renderli più efficaci, facili da gestire e sicuri. 

Perché creare un modulo di contatto in Joomla

Un modulo di contatto consente ai visitatori di inviare messaggi a chi gestisce il sito senza abbandonarlo e senza bisogno di inserire o conoscere l’indirizzo email del destinatario. 

Ma integrare un modulo di contatto in Joomla offre una serie di vantaggi diretti anche agli admin del sito. 

Aiuta a convogliare le mail su un unico canale per gestirle in modo più efficiente e permette di proteggere la privacy – nascondendo gli indirizzi email – e di ridurre lo spam, se include i captcha.

Con il form di contatto puoi fare in modo che l’utente inserisca tutte le informazioni necessarie e nel formato corretto. I dati raccolti possono essere archiviati e usati per risposte rapide o altre finalità – sempre ovviamente nel rispetto del GDPR. Possono aiutarti a capire meglio i tuoi clienti effettivi e potenziali; per lo stesso motivo ti consiglio di configurare anche Analytics su Joomla.

In Joomla è anche possibile collegare i moduli di contatto al sistema di gestione degli utenti e assegnare le mail inoltrate attraverso ciascun modulo a persone diverse.

Metodi per creare un modulo di contatto in Joomla

Ci sono principalmente 2 metodi per creare un modulo contatto in Joomla:

• usare il componente nativo Contatti
• installare un’estensione per Joomla.

La funzionalità nativa di Joomla è perfetta per costruire moduli di contatto semplici.

Le estensioni di terze parti invece danno la possibilità di aggiungere campi personalizzati, messaggi e richieste di conferma; possono offrire funzionalità professionali come la logica condizionale o la conservazione nel database delle informazioni inserite dagli utenti.

Creare un modulo di contatto con il componente Contatti di Joomla

Vediamo come creare un modulo di contatto con il componente Contatti integrato in Joomla.

Per questo esempio ho usato Joomla 5, ma se hai la versione 4 non avrai problemi a seguirlo perché non ci sono differenze sostanziali. In Joomla 3 invece, la procedura è la stessa; l’unica difficoltà sta nell’interfaccia diversa che potrebbe richiederti un po’ più di impegno per riconoscere percorsi di navigazione e pulsanti.

Considera comunque che la versione 3 è considerata obsoleta e la 4 non avrà più supporto dopo ottobre 2025. Se pensi sia arrivato il momento, abbiamo una guida all’aggiornamento di Joomla che può esserti d’aiuto.

Per creare un modulo di contatto in Joomla con le funzionalità native del CMS ti serviranno:

• un contatto a cui far indirizzare le mail;
• una voce di menu che porti alla pagina del modulo;
• una categoria per il contatto (opzionale).

Inoltre se non vuoi che i tuoi contatti siano assegnati ad Uncategorized, devi creare almeno una categoria in cui inserirli. Non preoccuparti perché vedremo come farlo mentre creiamo il Contatto.

Creare un contatto

Per creare un contatto Joomla accedi al pannello d’amministrazione del tuo sito e usa la barra laterale per entrare in Componenti > Contatti > Contatti. 

Se anche tu non hai mai creato un contatto finora, prosegui usando il pulsante per aggiungere il tuo primo contatto. 

Se invece non è il primo, avrai a disposizione il tasto Nuovo.

Nella schermata successiva ti viene chiesto prima di tutto di inserire il Nome ed eventualmente il cognome della persona da contattare, o il nome dell’ufficio o azienda.

Poi di scegliere l’Alias, cioè lo slug – parte finale dell’URL che gli sarà assegnato –, altrimenti Joomla la ricaverà in automatico dal nome.

Più giù, nella tab Nuovo contatto puoi fare un clic sull’icona accanto a Seleziona un utente per collegare il contatto a un utente Joomla.

Qui va configurato anche l’indirizzo email a cui saranno inviati i messaggi inseriti nel modulo di contatto. Finché non lo specifichi il form non sarà visibile sul sito, anche perché non potrebbe funzionare correttamente.

Un altro campo obbligatorio è quello che serve a definire la Categoria di appartenenza del contatto, che di default viene assegnato ad Uncategorized. Però attraverso il menù a tendina puoi scegliere o configurare altre categorie – se hai tanti contatti da gestire.

A piacere, puoi aggiungere o meno un tag al contatto.

I campi a disposizione per aggiungere informazioni opzionali al nuovo contatto Joomla sono:

• immagine
• ruolo
• indirizzo
• telefono.

Primo/secondo/terzo campo di ordinamento servono invece a definire il criterio per ordinare i contatti negli elenchi, e per lo scopo di questa guida non sono utili. 

Perché il contatto sia visibile imposta lo Stato su Pubblicato.

E come sempre in Joomla, puoi impostare una data di inizio e fine della pubblicazione.

Nella tab successiva Altre informazioni puoi aggiungere un testo facoltativo.

Per confermare le modifiche usa i pulsanti di Joomla per il salvataggio: si trovano nella barra orizzontale. 

Ora in Contatti vedrai una lista di quelli che hai configurato finora, compreso il tasto Nuovo per aggiungerne altri.

Aggiungere una nuova voce di menù per il modulo contatti

Come sempre accade in questo CMS, se vogliamo che il modulo di contatto su Joomla sia raggiungibile, dobbiamo configurare una nuova voce di menù: in pratica un link alla pagina che lo conterrà.

Quindi nella barra laterale di Joomla clicca su Menu e poi sul pulsante ‘+’ per aggiungere la voce di menù al sito.

Nella prossima schermata potrai configurare tutte le opzioni, a partire dal Titolo, cioè il testo del link che comparirà sul tuo sito, per esempio “Contattaci!”; mentre l’Alias come al solito è opzionale ma definirne uno intuitivo può semplificarti la vita più avanti.

Più in basso, nella tab Dettagli, clicca sul pulsante Seleziona. 

Si aprirà una finestra che mostra i tipi di voce di menu disponibili. Qui vai su Contatti > Singolo contatto.

Ora nella schermata sono comparsi un campo obbligatorio e un campo Seleziona contatto, con un pulsante che ti servirà per associare il contatto che hai appena creato alla voce di menù.

Nella schermata successiva fai clic sul contatto appena creato o quello che preferisci.

In alternativa puoi usare il tasto Crea (accanto a Seleziona) per configurare un nuovo contatto senza uscire da qui – nel modo che abbiamo già visto.

A questo punto ti restano da configurare le opzioni nella barra laterale della schermata Menu: Nuova voce di menu.

È obbligatorio scegliere un Menu in cui inserire la voce, cioè il collegamento alla pagina che contiene il modulo di contatto di Joomla; se non lo fai, verrà attivata l’impostazione di default Main Menu, che inserisce la voce nel menù principale.

Invece il menù Voce principale subito sotto serve a definire una gerarchia delle voci: permette di mantenere la nuova voce indipendente – quando impostato su Nessuna –, oppure di trasformarla in una sottovoce – selezionando da qui la voce genitore.

Per esempio questo è l’aspetto del menù dopo che ho scelto Home come voce genitore per il modulo.

Abbiamo anche il menù Ordinamento, che di default mostra il nome della voce di menù che stai creando. Se non lo modifichi, il menù in cui hai deciso di inserirla mantiene l’ordine preimpostato di Joomla. 

In alternativa puoi scegliere dopo quale altra voce posizionare il nuovo collegamento, oppure assegnarle il primo o ultimo posto del menù.

Come sempre in Joomla, puoi impostare una data di inizio e fine della pubblicazione.

Perché la voce sia visibile devi impostare lo Stato su Pubblicato e salvare le modifiche.

Testare il modulo di contatto

Ora puoi accedere alla pagina Contattaci appena creata. A seconda del template Joomla attivato può essere visualizzata in modo diverso ma conterrà sempre 2 parti: le informazioni sul sito che hai inserito nelle impostazioni del Contatto e il modulo vero e proprio che i visitatori devono compilare per inviarti un’email.

Per verificare che il tuo nuovo modulo di contatto Joomla funzioni, naviga sulla homepage o un’altra pagina del sito in cui sia visibile il menù che contiene il collegamento al form e aprilo.

Compilalo e fai clic su Invia email.

Se non vedi la mail nella tua casella, potrebbero esserci diverse spiegazioni. Forse è finita nella posta indesiderata – come nel mio caso –, oppure potrebbero essere errate le impostazioni in Sistema > Configurazione Globale > Server, o quelle dell’hosting email.

Creare un modulo di contatto con un’estensione Joomla

Tra le tante estensioni Joomla per creare moduli di contatto abbiamo scelto di usare Chronoforms, un plugin freemium, perché è uno dei pochi componenti aggiuntivi per Joomla con tante recensioni (371) e valutazione media molto buona (4.5/5). Come si intuisce, le funzionalità di Chronoforms non si limitano ai moduli contatto Joomla ma permettono di creare moduli di tutti i tipi – come fanno i plugin form per WordPress.  

Anche nella versione gratuita, ChronoForms è più flessibile rispetto al costruttore di moduli di contatto nativo di Joomla poiché offre:

• un costruttore di form drag and drop con campi personalizzati aggiuntivi; 
• la convalida del contenuto dei campi durante la compilazione;
• l’invio di notifiche a più destinatari, o all’utente che compila il form;
• il salvataggio dati nel database.

Uno svantaggio di questo strumento è che nella versione base aggiunge il link “This form was created by ChronoForms” sotto il modulo contatti di Joomla.

Installare ChronoForms v8 

La prima cosa da fare è scaricare il file di installazione di Chronoforms dalla directory delle estensioni di Joomla, accedendo col browser o con la funzione Installa da Web del CMS. 

Nella pagina dedicata, fai clic in alto a destra sul tasto Get Chronoforms.

Scegli la versione 8 – compatibile con Joomla 3, 4 e 5, e anche con WordPress.

Scarica ChronoForms v8 Joomla Extension.

Ora vai sull’area di amministrazione del tuo sito e naviga in Sistema > Installa > Estensioni.

Carica il pacchetto di installazione del plugin, che verrà installato in automatico.

Creare un modulo di contatto

Nella barra laterale entra in Componenti > ChronoForms 8 e fai clic su New per avviare la creazione di un modulo di contatto Joomla.

Eccoci nella schermata New Form, dove puoi costruire il tuo modulo usando una serie di blocchi drag and drop.

Prima però digita un nome, per esempio “Contatti” e se vuoi uno slug.

Salva le modifiche per attivare le funzioni di salvataggio automatico e poter visualizzare l’anteprima.

Costruire il modulo con i blocchi

Gli elementi disponibili per costruire la pagina si trovano nella sezione Views, sul lato destro della schermata.

Sono divisi in 4 gruppi:

• Fields
• Security
• Areas
• Content.

In Fields troviamo blocchi come:

• Button – pulsante
• Text – testi brevi
• Textarea – area di testo estesa
• Checkbox – lista con caselle da spuntare
• File – area per il caricamento di file
• Hidden – campi nascosti
• Password – campo per inserire le credenziali
• Dropdown – menù a discesa
• Calendar.

In Security ci sono i blocchi per creare domande di sicurezza e diversi tipi di captcha.

Areas raggruppa elementi contenitore, che possono essere usati per definire la struttura di form più complessi.

Content i blocchi che permettono di configurare CSS, HTML e JavaScript e stile, inserire header ecc.

Aggiungere gli elementi base e configurarli

Nella tab Load della pagina 1 del modulo puoi iniziare col trascinare dentro l’area di lavoro centrale 4 componenti di base:

• 2 blocchi Text, per nome ed email;
• blocco Textarea per il messaggio dell’utente;
• blocco Button per il pulsante di invio.

Puoi spostare i blocchi cliccando sul pulsante giallo Move e trascinando l’elemento senza smettere di cliccare sul tasto sinistro.

Per personalizzare il campo Nome del modulo di contatto, vai sul primo blocco di testo e fai clic sull’icona a forma di chiave inglese per aprire le impostazioni.

Nel campo Label puoi assegnare l’etichetta “Nome” e in Field Name dai al campo un nome intuitivo, come “nome_utente”.

Usa il menù Behaviors per rendere il campo obbligatorio selezionando Required. 

Dopodiché puoi personalizzare anche il messaggio di errore, come ho fatto qui:

Per personalizzare il campo Email, nel secondo blocco di testo assegna l’etichetta “Email”, e in Field Name un nome campo riconoscibile come “email_utente”.

Nel menù Behaviors seleziona le regole: 

• Valid email – funzione che controlla che l’indirizzo email inserito sia valido;
• Required – per rendere il campo obbligatorio.

Configura il blocco Textarea attribuendogli un’etichetta riconoscibile, per esempio “Messaggio”. 

Configura il pulsante di invio inserendo per esempio l’etichetta “Invia Messaggio”.

A partire dal menù Behaviors puoi decidere a che pagina porta il pulsante, selezionando URL e inserendola nel campo apposito.

Inoltre il menù ti permette di sfruttare altre funzionalità, per esempio puoi:

• personalizzare la posizione del pulsante
• aggiungere icone dalla raccolta Font Awesome 6
• modificare i colori 
• aggiungere attributi HTML.

La versione gratuita di Chronoforms permette anche di usare la logica condizionale e far sì che alcuni campi dei moduli vengano visualizzati solo in certe condizioni. 

Ecco come appare il modulo contatti Joomla che abbiamo creato:

Configurare email e messaggi di conferma

Per configurare email e messaggi di conferma ci spostiamo sulla tab Submit, dove possiamo usare il drag and drop per aggiungere azioni dalla barra laterale Actions.

Aggiungi un’azione Email trascinandola nell’area di lavoro, dopodiché potrai definire:

• l’indirizzo a cui vuoi ricevere il messaggio;
• l’inserimento automatico di elementi nel corpo della mail o nell’oggetto;
• le impostazioni della mail di risposta.

Facendo clic sul tasto verde Enable Editor, puoi visualizzare le opzioni per formattare il testo.

Con Quick Save puoi salvare le modifiche senza uscire dalla schermata.

Usando il pulsante Preview nella barra orizzontale possiamo verificare il funzionamento del modulo.

Chronoforms ti offre la possibilità di includere nelle mail elementi dinamici grazie a una quindicina di shortcode, che permettono di inserire in automatico nella sezione Submit i dati inseriti nella sezione Load.

Per esempio è possibile aggiungere il nome del mittente nell’oggetto usando:

{data:nome}

Oppure richiamare nel corpo dell’email le informazioni inserite dall’utente in campi specifici del modulo con:

{data:nome_campo}

Esiste anche uno shortcode per aggiungere alla mail una tabella di riepilogo con tutti i valori digitati dall’utente:

{email:data_table}

Per velocizzare la risposta alle mail degli utenti, puoi far precompilare il campo Reply name con il valore inserito nel campo nome del modulo usando:

{data:nome} 

Per precompilare l’indirizzo del destinatario nel campo Reply email invece ti servirà:

{data:email}

Usando il menù Behaviors invece, possiamo attivare altre funzionalità come:

• From Settings – per configurare dinamicamente i campi dell’email usando i dati inseriti nel modulo;
• Attachments – per allegare file all’email;
• PHP – consente di eseguire codice PHP personalizzato nel corpo dell’email;
• CC/BCC Settings – imposta destinatari in copia carbone e copia nascosta a partire dai dati del modulo;
• GPG Encryption – crittografa il contenuto dell’email con la tecnologia GPG;
• Print – genera una versione stampabile della mail.

Mostrare una richiesta di conferma prima dell’invio

Per mostrare una richiesta di conferma all’utente prima dell’invio effettivo del modulo bisogna modificare le impostazioni del pulsante di invio. 

Apri le impostazioni del pulsante per l’invio (Button) con clic sull’icona a forma di chiave inglese. Apri il menù Behaviors e attiva HTML Attributes.

Aggiungi l’attributo onClick, personalizzando come preferisci il testo tra parentesi:

onclick=return confirm('Confermi l’invio?')

Così: 

Ora chi compila il modulo visualizzerà un popup simile a questo:

Mostrare un messaggio di conferma dell’invio

Per fare in modo che l’utente che ti scrive visualizzi un messaggio di conferma ed eventualmente un ringraziamento dopo l’invio, vai sulle tab Submit e in Views apri la sezione Content, poi trascina il blocco Message nell’area di lavoro. 

Ora apri le impostazioni del messaggio cliccando sulla solita icona e aggiungi il testo che preferisci nel campo apposito.

Da adesso in poi dopo l’invio i tuoi utenti vedranno un messaggio di conferma simile a questo:

Come inserire il modulo contatti Chronoforms in una pagina

Anche in questo caso, per inserire il modulo contatti Joomla in una pagina del sito bisogna creare una nuova voce di menù e associarlo.

Puoi accedere a questa funzionalità dalla barra laterale di Joomla cliccando su Menu e poi sul pulsante ‘+’ per aggiungere una voce di menu al sito.

Nella prossima schermata, nella tab Dettagli, clicca sul pulsante Seleziona. 

Nella finestra che mostra i tipi di voce di menu disponibili questa volta scegli Chronoforms8 e poi Display a Form.

Dopo aver dato alla voce il nome che vuoi visualizzare nel menù, scelto il menù in cui inserirla e tutte le opzioni già viste, salva.

Ora dovresti trovare nel menù anche il link al nuovo modulo contatti Joomla generato con Chronoforms.

Come inserire il form contatti dentro un modulo Joomla

Se vuoi visualizzare il form contatti nella sidebar, nel footer o un’altra area gestita attraverso i template, devi inserirlo come modulo Joomla.

C’è un’ulteriore estensione Chronoforms che può semplificarti le cose: ChronoForms v8 Joomla Module. Puoi scaricarla dalla pagina dedicata della directory delle estensioni Joomla e installarla insieme all’estensione principale di Chronoforms, senza la quale non può funzionare.

Vediamo come configurare il modulo Joomla generato in automatico da ChronoForms v8 Joomla Module.

Se vai su Contenuto > Moduli sito vedrai che esiste già un modulo Joomla chiamato ChronoForms8. Attivalo e poi fai clic sul link per entrare nelle impostazioni.

Qui dobbiamo specificare l’alias del modulo Chronoforms che vogliamo inserire nel template.

Grazie al menù Posizione puoi scegliere in che area del template collocarlo.

Dopodiché con il menù Ordinamento hai la possibilità di spostarlo sotto un’altra voce già presente.

Infine controlla che il modulo sia visibile sul frontend e prova a inviare un messaggio per assicurarti che tutto funzioni correttamente.

Aggiungere un captcha al modulo di contatto

I captcha sono sistemi che verificano che a fare una richiesta su un sito sia un essere umano e non un robot, e nei moduli di contatto servono a limitare l’arrivo di messaggi spam. Per aggiungerne uno al modulo di contatto su Joomla bisogna installare un plugin per i captcha.

In Joomla 3 e 4 si trovano installati di default dei plugin che sfruttano il sistema reCAPTCHA di Google, e devono essere solo attivati e configurati.

In Joomla 5 invece, i plugin captcha vanno installati manualmente. Possiamo approfittarne per scegliere di non usare il sistema di Google, considerato poco rispettoso della privacy perché contiene sistemi di tracciamento.

I plugin captcha per Joomla sono tutti semplici e simili da configurare. Qui vedremo come usare hCaptcha, compatibile con tutte le versioni di Joomla a partire dalla 3; ma il procedimento è simile anche per altre estensioni, come Aimy Captcha o Google reCaptcha v3 per Joomla. 

In sintesi per attivare un captcha nel modulo contatti Joomla bisogna:

• installare un plugin
• ottenere le chiavi di sicurezza
• impostare il plugin scelto come predefinito per i captcha.

Installare il plugin hCaptcha

Per prima cosa vai sulla pagina dedicata al plugin nella Joomla! Extensions Directory e fai clic sul pulsante Get hCaptcha per scaricare il file di installazione. 

Prosegui cliccando sul pulsante More information e poi su View files.

Scarica il file hCaptcha adatto alla tua versione di Joomla: ne trovi uno per Joomla 3 e 4 e uno per Joomla 5.

 Fai login su Joomla e vai in Sistema > Installa > Estensioni.

Ti troverai nella tab Carica file pacchetto e col pulsante Oppure cerca il file potrai importare il file .zip che hai appena scaricato.

Ora puoi configurare l’estensione in Pannello di controllo > Plugin.

Abilita hCaptcha facendo clic sul cerchio grigio per trasformarlo in una spunta verde, poi fai clic sul link per entrare nelle impostazioni.

Qui è dove vanno inserite le chiavi di sicurezza necessarie al funzionamento del plugin. Per ottenerle dobbiamo creare un account gratuito su hCaptcha.com – che ci permetterà di usare i captcha su un solo sito.

Clicca sul pulsante Iniziare nella sezione “Base (gratuito)”. Ti verranno comunque assegnate due settimane di prova gratuita del piano a pagamento.

Accedi con Google o Github oppure iscriviti con un altro indirizzo email.

Continua con la prova gratuita con il link in basso a destra.

Usa il pulsante Generate e verrà creata la chiave Secret, che serve a verificare il tuo account. Copiala e prosegui.

Per generare la seconda chiave – Sitekey, un codice specifico per il tuo sito e le impostazioni scelte per i captcha – nel menù seleziona la seconda voce.

Nella pagina successiva configura le impostazioni:

• dai un nome alla configurazione;
• aggiungi il dominio del tuo sito;
• scegli il setting, la modalità del captcha.

Con il piano gratuito Basic hai a disposizione solo la modalità Always Challenge, in cui in genere agli utenti viene mostrata una sfida visiva o una casella da selezionare. 

99.9% Passive – solo per clienti Pro ed Enterprise – è una modalità ibrida che sottopone al test solo lo 0,1% degli utenti (quelli considerati sospetti).

Passive – disponibile solo con i piani Enterprise – è una verifica che non richiede azioni da parte degli utenti.

Per non dover cambiare le impostazioni al termine della prova gratuita, scegli Always Challenge e prosegui senza cambiare il livello di difficoltà del test. 

Copia la chiave generata e poi vai a inserirle entrambe su Joomla.

Inserire hCaptcha nel modulo contatti nativo di Joomla

Per inserire hCaptcha nel modulo contatti nativo di Joomla basta una piccola modifica alle impostazioni del sito.

Vai in Pannello di controllo > Configurazione Globale > Sito.

Imposta hCaptcha come Captcha predefinito selezionandolo dal menù.

Ecco come appare il captcha sotto il modulo di contatto nativo di Joomla:

Aggiungere hCaptcha a un modulo Chronoforms

Vediamo come usare un blocco captcha drag and drop in ChronoForms e aggiungere la verifica ai moduli di contatto Joomla generati con questo plugin.

Nel pannello di amministrazione di Joomla vai su Componenti > ChronoForms e apri il form che vuoi modificare.

Se hai installato hCaptcha, trovi il suo widget nella sezione Security delle Views, nella tab a destra.

Se hai inserito i codici nelle impostazioni globali di hCaptcha (in Pannello di controllo > Plugin), il tuo blocco dovrebbe già funzionare. Altrimenti puoi inserire qui le chiavi, che funzioneranno solo localmente.

Il risultato finale sarà simile a questo:

Come vedi, nell’editor di Chronoforms c’è anche l’widget di reCAPTCHA, ma anche questo richiede la configurazione di un plugin che lo supporti – il più noto è Google reCAPTCHA v3, che sostituisce i plugin captcha preinstallati di Joomla 3 e 4.

Dai un’occhiata anche alla nostra guida su come aumentare la sicurezza di un sito Joomla per trovare altri consigli.

Conclusioni

In questa guida ai moduli di contatto in Joomla abbiamo visto che si possono creare attraverso il componente Contatti nativo di Joomla oppure con un’estensione di terze parti come ChronoForms v8.

I form creati possono essere inseriti all’interno di pagine contatti grazie alla funzione voci di menù di Joomla, oppure nella sidebar, nel footer o altre aree del tema con i moduli. Possiamo generare il modulo Joomla che ci serve in automatico con l’estensione ChronoForms v8 Module.

Abbiamo parlato anche di come aggiungere al modulo una richiesta di conferma prima dell’invio o un messaggio di conferma dopo l’invio; così come un filtro anti-spam grazie a servizi come hCaptcha, e di altre funzionalità per personalizzare i form di contatto e per facilitare le risposte ai messaggi.

E tu hai già creato il tuo modulo di contatto su Joomla? Se vuoi raccontaci com’è andata nei commenti.