Guide e tutorial pratici per joomla e le sue estensioni
Guide e tutorial pratici per joomla e le sue estensioni

Realizziamo un form di contatto avanzato con chronoforms V5

In rete ci sono decine di tutorial per costruire un semplice form con chronoforms V5, ma nessuna guida che ci spieghi in maniera semplice e sopratutto passo dopo passo come si costruisce un form di contatto avanzato che abbia le seguenti caratteristiche:

campi;

  • nome
  • cognome
  • oggetto
  • telefono
  • email
  • allegato
  • testo consenso privacy
  • messaggio
  • accettazione della privacy
  • noCaptcha

caratteristiche;

  • invio mail all'amministratore con oggetto mail dinamico (la mail conterrà per "oggetto" l'oggetto inserito dal mittente)
  • invio copia email al mittente/scrivente all'indirizzo inserito nel campo email (indirizzo dinamico)
  • risposta o contatto da parte dell'amministratore cliccando semplicemente su rispondi
  • attivazione del tasto invia solo dopo aver accettato il consenso della privacy
  • ricezione dell'allegato nella mail
  • pagina di ringraziamanto dopo l'invio
  • personalizzazione testuale e grafica delle e-mail amministratore e mittente

Chronoform V5, operazioni di configurazione lato design:

Iniziamo con il creare un nuovo form cliccando nell'icona NEW (no new simple che serve per creare form semplici) nel pannello di controllo di chronoforms V5, appena premuto NEW inseriamo il nome del form nel campo Form Name, il nome sarà form_avanzato.

Fate attenzione ad usare un underscore (questo simbolo qui:"_") fra una parola e l'altra per non lasciare spazi vuoti!

Se volete inserite nel campo Form Description una piccola descrizione del form che andremo a realizzare, ad esempio "Form avanzato di contatto per il sito....." potrebbe andare bene.

Salvate premendo SAVE nell'icona in alto a destra, successivamente portiamoci nella tabs "Designer" e inseriamo i seguenti elementi in questo ordine:

  1. text box per nome
  2. text box per cognome
  3. text box per oggetto
  4. text box per telefono
  5. text box per email
  6. File Field per l'allegato
  7. textarea box per il messaggio
  8. textarea box per il consenso privacy
  9. checkbox per accettare la privacy
  10. recaptcha
  11. Submit Button

Andiamo a configurare gli elementi appena inseriti;

  1. Clicchiamo su EDIT per il primo elemento text box ed inseriamo nei campi Field Name, Field ID e Label il testo "nome" tutto in minuscolo. Salviamo le opzioni dell'elemento appena inserite premendo su "SAVE AND CLOSE", infine premete sull'icona SAVE in altro a destra.
  2. Fate la stessa operazione per gli elementi cognome, oggetto, telefono e email. Naturalmente cambiarete il nome in base al campo! Ricordate che state lavorando su un interfaccia web, quindi finchè non premete salva o SAVE le modifiche non verranno salvate, ricordatelo!
  3. Configuriamo l'elemento "File Field" premendo EDIT ed inserendo nei campi Field Name, Field ID e Label; "allegato"
  4. Configuriamo l'elemento "textarea box" per il messaggio della privacy premendo EDIT ed inserendo nei campi Field Name, Field ID e Label; "messprivacy", mentre nel campo "Field Value" inserite un testo per il consenso, ad esempio: "Ai sensi del dlg 196/2003 bla bla bla ...". Infine per questo elemento inseriremo nel campo "Extra params" la stringa "readonly=readonly" che servirà a rendere il campo in sola lettura.
  5. Il successivo elemento "textarea box" dove verrà scritto il messaggio da parte dell'utente, dovrà avere nei campi Field Name, Field ID e Label; il testo "messaggio"
  6. Configuriamo il checkbox per l'accettazione del consenso privacy editando l'elemento e inserendo  nei campi Field Name, Field ID e Label; "privacy", mentre inseriremo nel campo "Secondary Label" la frase "confermo di aver letto il consenso alla privacy ed accetto" (certamente potrete insere un testo a voi più consono o qualsiasi altra cosa). premete "Save and Close".
  7. Per l'elemento recaptcha non dovremo configurare niente.
  8. Configuriamo l'elemento Submit Button inserendo in "Name", "ID" e "Value/Label" il testo "invia". Sostituiamo dentro il campo "Class" il testo "btn btn-default" con "btn btn-success", questo cambiamento farà in modo di avere un tasto verde anzichè bianco. Potrete anche sostituirlo con "btn btn-primary", opure "btn btn-info", "btn btn-warning" e "btn btn-danger". Chronoforms V5 utilizzando le classi di BOOTSTRAP farà apparire i pulsanti sencondo la logica del framework

Per semplicità di produzione ho utilizzato lo stesso nome ed in minuscolo per o campi Field Name, Field ID e Label, ma se vogliamo essere più precisi, il campo Label (etichetta) può essere personlizzato a piacere utilizzando mauscole e minuscole in quanto questo campo non influenza nessun meccanismo del form.

andiamo ad implementare quella funzione per cui se non si inserisce il flag sul checkbox "privacy", il tasto "invia" sarà disattivato.

Editiamo l'elemento checkbox "privacy"portandoci nella tabs "Events";

  • inserendo nel campo "ON" "uncheck",
  • inserendo nel campo"Action" "disable",
  • ed inserendo nel campo "Element ID/fn()/Event" "invia".

inseriamo un nuovo evento cliccando su add new events e compiliamolo come di seguito scritto;

 

  • inserendo nel campo "ON" "check",
  • inserendo nel campo"Action" "enable",
  • ed inserendo nel campo "Element ID/fn()/Event" "invia".

Il meccanismo funziona così;
se il checkbox è nella condizione "uncheck" (non flaggato o non checcato), l'azione "Action" che si dovrà compiere su "invia" sarà quella di disabilitare l'elemento;

Mentre se la condizione è "check" (ovvero flaggato o checcato) l'azione "Action" che si dovrà compiere su "invia" sarà quella di abilitare l'elemento.

Chronoform V5, operazioni di configurazione lato setup:

Iniziamo adesso a configurare le varie opzioni nella scheda setup, il motore vero e proprio di questo form.

  1. Il primo elemento da inserire in On load, cioè la parte che deve caricare i dati prima dell'invio, è l'elemento HTML (Render Form). Questo elemento ci consentirà di visualizzare il form lato front-end. Se questo elemento non viene inserito non potremo visualizzare il form! Salvate premendo su "SAVE" e successivamente cliccate su "test form", si aprirà una nuova scheda del browser o una nuova finestra (secondo le impostazioni del vostre browser: Se avete fatto tutto secondo i vari passi dovreste vedere il vostro form ancora "non funzionante", ma potrete testare l'attivazione/disattivazione del tasto "invia" secondo la condizione check/uncheck.
  2. Sempre in "On load" inseriamo adesso un elemento "Load Google NoCaptcha" e posizionatelo sopra l'elemento "HTML (Render Form) usando il tasto "Drag". AL suo interno andrà inserita la chiave del sito "Site Key" che vi verrà rilasciata andandovi ad iscrivere nel sito https://www.google.com/recaptcha/intro/index.html insieme alla chiave segreta (secret key) e che userete più avanti.
  3. Inseriamo adesso in On submit (la parte che elabora le informazioni dopo aver premuto il pulsante invia) un elemento "Check Google NoCaptcha" dove inseriremo la secret key annotata prima. Successivamente inseriamo in "On Fail" un elemento "Event Loop".
  4. Inseriamo adesso 2 elementi "email" in "On submit", piazzandoli subito dopo l'elemento "Check Google NoCaptcha", il primo di questi elementi "email" verrà usato per l'invio del messaggio all'amministratore del sito o chi dovrà ricevere i messaggi, il secondo servirà per l'invio del messaggio in copia al mittente (chi scrive).
  5. Editiamo il primo elemento "email" inserendo nei campi della tabs/scheda basic:
    Action Label: email per amministratore;
    Enabled: Yes;
    To: indirizzo email dell'amministratore (l'indirizzo dove deve arrivare il messaggio);
    Subject: lasciare vuoto;
    From Name: inserire il nome del vostro sito, ad esempio icagenda.it oppure il nome della vostra azienda;
    From Email:indirizzo email legato al sito/nomedominio che ospita il form, ad esempio Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo., questa email in alcuni casi e con alcuni servizi di hosting dovra essere creata e configurata su joomla con protocollo SMTP;
    Email Format: HTML;
    Template Generation: per adesso lasciare su "auto", più avanti quando personalizzeremo il messaggio sposteremo su "custom".
  6. Inseriamo nei campi della scheda advanced:
    Dynamic Subject: oggetto (la mail così arriverà con l'oggetto inserito dal mittente nel campo oggetto);
    Reply to name:"{cognome} {nome}" In questo caso non abbiamo usato il campo dinamico "Dynamic reply to name", campo che sarebbe stato più opportuno ma che avrebbe potuto contenere solo il nome o solo il cognome. Utilizzando invece il campo statico "reply to name" ed inserendogli dentro i campi "nome" e "cognome" fra parentesi graffe, ci ritroveremo il nome completo di cognome nella nostra email cliccando su rispondi.
    Dynamic Reply to Email:email

Il meccanismo di invio di questa email all'amministratore del form o comunque all'indirizzo inserito nel campo "To" fa in modo che quando il ricevente (l'amministratore del form) clicchi su reply nel suo client di posta o nella webmail, si ritrovi il campo "A" perfettamente compilato. Se non avessimo compilato il campo "Dynamic Reply to Email", avremmo avuto inserito nel campo "A" l'indirizzo email associato al sito, costringendoci ad inserirlo manualmente.

Sarà possibile a questo punto, anche se il form non è completamente configurato fare un test di invio; il messaggio arriverà all'indirizzo inserito nel campo "to". Verificate la mail che vi arriva cliccando su reply e leggendo cosa c'è scritto nel campo "A", dovrete visualizzare la mail di chi vi ha scritto. Vi consiglio di fare questi test con email differenti, ovvero non usate un unico indirizzo email per mittente e destinatario!

Passiamo a configurare il secondo elemento "email" che servirà ad inviare una copia al mittente/scrivente.

  1. Editiamo il secondo elemento "email" inserendo nei campi della tabs/scheda basic:
    Action Label: email per mittente;
    Enabled: Yes;
    To: lasciare vuoto;
    Subject: copia del tuo messaggio a.........(potete personalizzare l'oggetto come meglio volete);
    From Name: inserire il nome del vostro sito, ad esempio icagenda.it oppure il nome della vostra azienda;
    From Email:indirizzo email legato al sito/nomedominio che ospita il form, ad esempio Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo., questa email in alcuni casi e con alcuni servizi di hosting dovra essere creata e configurata su joomla con protocollo SMTP;
    Email Format: HTML;
    Template Generation: per adesso lasciare su "auto", più avanti quando personalizzeremo il messaggio sposteremo su "custom".
  2. Inseriamo nei campi della scheda advanced:
    Dynamic To: email
    Dynamic Subject: lasciare vuoto;
    Reply to name:inserite il nome del vostro sito o quello della vostra azienda, io inserirò icagenda.it
    Reply to Email:l'indirizzo email dove volete ricevere eventuali email se lo scrivente dovesse cliccare su reply nel suo client di posta o webmail.

La configurazione del secondo elemento email è terminata fate un piccolo test di prova per verificare la trasmissione e la ricezione di questi messaggi.

Inseriamo in On submit un elemento "File Upload" posizionandolo sopra "Check Google NoCaptcha", configuriamo l'elemento "File Upload" premendo edit ed inserendo nei campi:

  • Files config: allegato:zip-pdf (potrete inserire tutte le estensioni che volete separandole da un trattino/dash "-"). Se vi fosse bisogno di inserire più allegati utilizzando più elementi "File Filed", dovremmo stare attenti al naming inserendo anche un numero dopo il nome dei Fild ID e Field name, ad esempio allegato1, allegato2, allegato3........
  • Upload path: inserite il percorso assoluto del vostro sito che potrete ricavare su JOOMLA in SISTEMA>>CONFIGURAZIONE GLOBALE>>SISTEMA>>PERCORSO LOG.
    Quindi se il vostro percorso fosse: /home/zw12345ddrrgg/domains/vostrosito.com/public_html/log, dovrete modificare il percorso eliminando la cartella log ed inserendo la cartella dove volete caricare i file, ad esempio: /home/zw12345ddrrgg/domains/vostrosito.com/public_html/images/upload; i file così verranno caricati dentro la cartella upload che sarà stata creata dentro la cartella images. La creazione ed il posizionamento di questa cartella è a vostra discrezione, in aggiunta potrete creare un file htaccess per impedirne la lettura o inserire un file html vuoto nominato index.html.
  • Max file size: inserite la dimensione massima in KB del file, ad esempio inserendo 1024kb che equivalgono ad un mega, potremo far caricare file di dimesioni massime di 1MB
  • Min file size: inserite le dimensioni minime che il file deve avere, ad esempio 5kb
  • Max size error: Inserite un messaggio di avviso se il file caricato dovesse eccedere il peso inserito in Max file size ad esempio "Spiacenti, non sono consentiti file superiori a 1MB".
  • Min size error: Inserite un messaggio di avviso se il file caricato dovesse essere inferiore a quanto previsto in "Min file size", ad esempio "Spiacenti, non sono consentiti file inferiori a 5kb"
  • File type error: Inserite un messaggio che indichi che l'estensione dall'utente proposta non viene accettata dal sistema, ad esempio: "Spiacenti, sono consentite solo estensioni come .zip e .pdf"
  • Array fields: lasciate il campo vuoto
  • File name code: lasciate il campo vuoto
  • Extensions separator: lasciate il simbolo meno/dash "-"

Premete SAVE and CLOSE

Inseriamo dentro l'elemento "File Upload" in "On Fail" un elemento event loop che servirà a ripetere l'operazione se il file non dovesse rispettare i parametri impostati. Senza questo elemento il messaggio partirebbe senza allegato.

Adesso dobbiamo fare in maniera che il file caricato diventi l'allegato per la mail che riceverà l'amministratore o chi per lui.

Editate l'elemento email relativo alla email dell'amministratore e scorrete la scheda basic fino alla fine, quando troverete il campo "Attachment files", inserirete il nome "allegato" che è il nome utilizzato come field ID e field name per l'elemento file upload nella zona design.

La realizzazione del form è terminata, quindi possiamo provare a inviare un mesaggio con allegato. Noterete che quanto il messaggio arriverà nel vostro client di posta e webmail, all'allegato verrà aggiunto un prefisso numerico.

Validiamo i campi del nostro form avanzato realizzato con chronoforms V5

La validazione dei campi serve essenzialmente per far si che gli utenti inseriscono le informazioni secondo le nostre necessità, quindi validare, ad esempio, il campo email vuol dire fare in maniera di renderlo obbligatorio e di controllarne il contenuto, ovvero che sia un indirizzo email.

In chronoforms V5 la validazione dei campi si ottiene editando i vari elementi inseriti nel "lato" DESIGN, aprendo la scheda e portandoci su validation:

Per i campi;

  • nome
  • cognome
  • oggetto
  • telefono
  • email
  • messaggio

sceglieremo di renderli tutti obbligatori, quindi nella scheda Validation all'opzione "Required" sceglieremo "YES",

inoltre per il campo email all'opzione "email" sceglieremo "YES" (controllerà che lindirizzo sara scritto secondo il formato nome@dominio).

Per il campo telefono all'opzione "Placeholder" inseriremo un segnaposto come questo: "+39 999 9999999" e nel campo "Extra params" inseriremo la maschera di input come questa: "data-inputmask='mask' : '(+99) 999-9999999'" obbligando così l'utente ad inserire un numero di telefono con il prefisso internazionale e formattandolo secondo i nostri desideri.

Facciamo visualizzare un messaggio dopo l'invio del messaggio.

Non cè cosa più frustrante di non sapere cosa è successo dopo aver premuto il pulsante invia, eppure ci sono ancora molti siti che realizzati forse dai "Cuggini" non visualizzano niente dopo l'invio lasciandoci con il dubbio se il messaggio è stato inoltrato oppure no.

Inseriamo il nostro messaggio inserendo un elemento "Display message" nella zona "setup" dentro On submit e lasciandolo come ultimo elemento. Configurate l'elemento inserendo nel campo "Action Label" "messaggio" e nel campo "Message content" un testo di ringraziamento che rassicurerà chi avrà scritto il messaggio. Possiamo inoltre personalizzare in maniera dinamica il messaggio usando i nomi dei campi usati nel form, ad esempio:

 <div class="alert alert-success">
Gentile {nome} {cognome},<br />
il tuo messaggio è stato inviato con successo.<br />Ti contatteremo entro breve tempo al numero di telefono {telefono} oppure all'indirizzo email {email} indicati.<br />
iCagenda.it
</div>

Personalizzare la grafica delle email del nostro forms avanzato realizzato con chronoforms V5

Siamo arrivati quasi alla fine di questa lunga guida, adesso personalizzeremo un poco la grafica delle email che riceveranno l'amministratore e in copia l'utente che ha inviato il messaggio.

Portiamoci nel primo elemento email inserito nella zona SETUP in On load. Il campo che dovremo modificare è il campo "Email Template". Questo campo contiene il template dei testi che verranno inviati per email, di fatto è una tabella a 2 colonne con dentro riga per riga i nostri campi, quelli inseriti nella zona "DESIGN". Questa tabella viene prodotta automaticamente finchè il campo "Template generation" è impostato su "auto", ma adesso che ci accingiamo a personalizzare la grafica ed i testi, dobbiamo cambiare lo stato di "Template generation" da "auto" a "custom", altrimenti al salvataggio del nostro form perderemo tutte le modifiche effettuate.

Quindi cancellate il codice presente in questo campo ed inseriteci il codice sottostante. Si tratta di una grafica minimale che ognuno di voi potrà cambiare a proprio piacere. Sara possibile personalizzare il testo aggiungendo frasi e link.

Copiate lo stesso codice anche nell'elemento "email" relativo al mesaggio in copia per il mittente/scrivente

<style type="text/css">
body{
background-color:#f7f7f7;
}
table {
background-color:#ffffff;
border:1px solid #093;    
    }
tr td {
border-bottom:1px dashed #093;
color: #8f8f8f;
font-family:Verdana, Geneva, sans-serif;
font-size: 12px;    
    }</style>
<table align="center" width="500px">
<tr>
  <td colspan="2"><img src="http://www.tuosito.it/images/tua-immagine.png" /></td>
  </tr>
<tr><td width="25%">nome</td><td>{nome}</td></tr>
<tr><td width="25%">cognome</td><td>{cognome}</td></tr>
<tr><td width="25%">oggetto</td><td>{oggetto}</td></tr>
<tr><td width="25%">telefono</td><td>{telefono}</td></tr>
<tr><td width="25%">email</td><td>{email}</td></tr>
<tr><td width="25%">allegato</td><td>{allegato}</td></tr>
<tr><td width="25%">messprivacy</td><td>{messprivacy}</td></tr>
<tr><td width="25%">messaggio</td><td>{messaggio}</td></tr>
<tr><td width="25%">privacy</td><td>{privacy}</td></tr>
<tr><td width="25%"></td><td>{recaptcha}</td></tr>
</table>

Scarica il backup del form di contatto avanzato realizzato con chronoforms V5

Testiamo il form avanzato creato con chronoforms V5

Questo lunga guida termina qui, se avete qualche dubbio postate nei commenti, cercherò di rispondervi.

Se la guida vi è piaciuta e sopratutto vi è stata di utilità, potete ringraziarmi offrendomi un caffè o semplicemente cliccando su qualche banner.

offrimi un caffè

Commenti   

0 # Giovanni 2016-07-03 12:15
Non funziona il "multi allegati" Ho seguito la procedura ma mi arriva solo un allegato
0 # giusebos 2016-07-03 12:33
leggi questa discussione
http://forum.joomla.it/index.php/topic,259520.0.html
0 # Lorenzo Castellan 2016-10-01 11:45
Ciao, innanzitutto complementi per i tuoi tutorial, fatti molto bene! Ho una domanda, se volessi che nella email che arriva all'amministratore ci fosse anche il link al file spedito come potrei procedere?
Grazie.

lorenzo
0 # giusebos 2016-10-01 12:22
basta inserire il link nel template della mail
0 # Lorenzo Castellan 2016-10-01 12:25
Si si lo facevo! Ma poi ho capito, nel designer non inserivo, alla fine field name, il simbolo []...
Appena inserito tutti ii file sono arrivati in allegato!
Grazie!
0 # Davide_63 2016-10-09 15:43
Sono riuscito a creare un form seguendo la sua guida.

Adesso mi servirebbe sapere come posso collegare il relativo form ad una voce di menu del mio sito (esempio: Contatti), perche' purtroppo non riesco.
0 # giusebos 2016-10-09 16:43
basta che crei una voce di menù collegata al form, installando chronoforms nella gestione voci di menù si aggiungeranno le opzioni per questo componente.
Una alternativa potrebbe essere quella di inserire il form nei suoi tag dentro un articolo e linkare questo. I tag per questa ultima opzione (che io preferisco per ragioni SEO) sono:{chronoforms5}nome_tuo_forms{/chronoforms5}
0 # Salvatore 2016-11-29 09:57
Ottima Guida, ho fatto tutto come specificato nella guida ma la mail all'amministratore non arriva e a chi ha compilato il form arriva la mail con indirizzo . cosa sbaglio? grazie anticipatamente
0 # pasquale 2018-08-26 23:53
Salve
Per prima cosa complimenti per la guida.. notevole . lavoro eccellente.
Ho seguito passo passo e integrato due guide .. contatto con campi estesi di joomla.
con chronoform5 tutto funziona benissimo e mi ritrovo ovviamente in "utenti" i vari test di registrazione. rifatto tutto con chrono 6 ma sembra tutto funzionare per bene ma non scrive ne database . non mi da nessun errore ma propro non riesco a farlo funzionare. nel senso che non ritrovo nessun utente registrato.
Potete aiutarmi ??
0 # giusebos 2018-08-27 10:53
Citazione pasquale:
Salve
con chronoform5 tutto funziona benissimo e mi ritrovo ovviamente in "utenti" i vari test di registrazione

Purtroppo visto le nuove policy applicate dallo sviluppatore a chronoforms 6, parlo delle limitazioni imposte alla versione liberamente scaricabile e della scarsa assistenza nel loro forum anche per chi ha acquistato una licenza, mi sono fermato all'uso ed alle guide sulla versione 5. Quella di non scrivere nel database potrebbe essere una di queste limitazioni.
0 # pasquale 2018-08-27 11:37
Ci sono riuscitooooo
alla fin fine, come sempre, era una cosa abbastanza banale. Sono semplicemente cambiate le "chiamate" al database - nella versione 5 bastava scrivere il nome delle variabili ( tipo ..nome .. password..) ora bisogna usare la doppia parentesi graffa tipo {data:mome} {data:password} e così via
Grazie comunque per le eccellenti guide

Per pubblicare un commento devi registrarti