icagenda guide e tutorial per joomla

chronoforms V5: form di contatto avanzato

chronoforms V5: form di contatto avanzato

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:

Realizziamo un form di contatto avanzato con chronoforms V5

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},
il tuo messaggio è stato inviato con successo.
Ti contatteremo entro breve tempo al numero
di telefono {telefono}
oppure all'indirizzo email {email} indicati.</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

{phocadownload view=file|id=16|target=s}

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è