Creare moduli con Contact Form 7 - porteapertesulweb.it · Creare moduli con Contact Form 7 Il...

Creare moduli con Contact Form 7

Il plugin per Wordpress di Takayuki Miyoshi

Appunti di Andrea Smith

Questo manuale, realizzato da Andrea Smith con il contributo di Christian Ghellere, Marco Milesi e Paolo Mauri, è distribuito con Licenza Creative Attribuzione Non commerciale 4.0 Internazionale

http://creativecommons.org/licenses/by-nc/4.0/legalcode#languages

Indice degli argomenti

Introduzione__________________________________________________________________________3

Installazione dei plugins______________________________________________________________3

Creazione del modulo contatti________________________________________________________4

Creazione di moduli più o meno complessi___________________________________________11

Impostazione dell’e-mail_____________________________________________________________14

Contact Form DB____________________________________________________________________17

Altri moduli_________________________________________________________________________19



Introduzione

Creare moduli da compilare online è un’esigenza particolarmente sentita, anche per favorire la

semplificazione amministrativa col passaggio dal sistema cartaceo a quello della segreteria

digitale.

Il plugin CF 7 può costituire un’alternativa valida poiché permette anche la creazione di

moduli piuttosto complessi, l’indirizzo di posta elettronica al quale far pervenire il modulo può

essere liberamente impostato e, quindi, può essere indicata la casella di posta certificata

ufficiale dell’istituzione scolastica, che viene, di regola, gestita dal protocollo informatico.

Applicazione che provvede all’assegnazione del protocollo e dà seguito all’istruzione e alla

gestione dei documenti.

Peraltro, i moduli sono esportabili/importabili attraverso il menù strumenti di wordpress con

files xml e, quindi, adottando i necessari adattamenti quanto meno negli indirizzi di posta

elettronica utilizzati, possono essere messi a disposizione della Comunità.

Il plugin Contact Form 7 – di Takayuki Miyoshi -, integrato con Contact Form DB – di Michael

Simpson – consente la registrazione dei dati acquisiti nel database e l’esportazione, tra l’altro,

in formato xlsx, ods, csv, html, nonché la visualizzazione sotto forma di tabella in una pagina o

post del sito con short code personalizzabili.

Inoltre, utilizzando il plugin “Contact Form 7 modules” – di Katz Web Services, Inc. - con

“Hidden Fields” nel form possono essere aggiunti dei campi nascosti con i quali effettuare

anche dei controlli di sicurezza.



Installazione dei plugins

Per installare i plugins, dal pannello di amministrazione, bisogna selezionare “aggiungi nuovo” dal menu plugin; nel box di ricerca scrivere Contact Form 7 e dare invio.

Installare il plugin di Takayuki Miyoshi ed attivarlo

Ripetere l’operazione per “Contact Form 7 Modules” di Katz Web Services, Inc. e “Contact Form

DB” di Michael Simpson.



Creazione del modulo contatti

Per creare il modulo contatti, dal menu Cf7 si seleziona “Aggiungi nuovo”; appena visualizzata la pagina del nuovo form, la prima operazione da effettuare sarà quella di assegnare il titolo sostituendo la voce “Senza titolo” presente di default, quindi, bisogna lavorare sui campi del modulo.

In automatico vengono proposti quattro campi e un pulsante, sufficienti, in linea di massima, per un modulo di contatto semplice.

I campi predisposti sono:

nome, email, oggetto, messaggio e il pulsante “invia”.

Per modificare il testo visibile sulla pagina basta sostituire le voci all’interno del tag e .

Altri campi si possono creare utilizzando il generatore di tag, che presenta numerose opzioni:

text: campo di testo semplice che l’utente potrà usare per digitare informazioni; email: campo reimpostato per indirizzi di posta elettronica; URL: campo reimpostato per indirizzi web; telefono: campo che riconosce solo valori numerici; numero: genera un campo quantità “Spinbox”- si usano “freccine” per aumentare o

diminuire la quantità – o un campo quantità”Slider” - visualizzato come una barra con un

cursore che viene spostato col mouse; data: campo data (attenzione supporta solo il formato aaaa-mm-gg); textarea: box area di testo dove l’utente può inserire un messaggio; Drop-down menu: menu a tendina con voci selezionabili; check boxes: selezione di caselle; radio buttons: pulsanti di opzione; acceptance: pulsante di accettazione;

hidden: campo nascosto; quiz: inserimento di domande e risposte per la verifica dell’utente, che deve rispondere con

un calcolo matematico; reCAPCHA: widget per la verifica dell’utente; file: consente di allegare un file; submit: pulsante per l’invio del modulo.

Nelle varie opzioni è possibile selezionare l’eventuale obbligatorietà del campo da compilare.

Il tag inserito deve essere preceduto da “” e chiuso con “”.

Se si desidera che il campo creato abbia un titolo, dopo bisogna digitare il testo, farlo seguire da e andare a capo.

Nella predisposizione del modulo contatti, può tornare utile inserire il campo “conferma” dell’indirizzo e-mail indicato dal mittente. Per fare ciò, nel form, dopo il campo

E-mail: [email* your-email]

bisogna inserire

Confirm email: [email* your-email-confirm]

Nel file functions.php bisogna inserire questo codice:

add_filter( 'wpcf7_validate_email*', 'custom_email_confirmation_validation_filter', 20, 2 );

function custom_email_confirmation_validation_filter( $result, $tag ) {

$tag = new WPCF7_Shortcode( $tag );

if ( 'your-email-confirm' == $tag->name ) {

$your_email = isset( $_POST['your-email'] ) ? trim( $_POST['your-email'] ) : '';

$your_email_confirm = isset( $_POST['your-email-confirm'] ) ? trim( $_POST['your-email-confirm'] ) : '';

if ( $your_email != $your_email_confirm ) {

$result->invalidate( $tag, "Controllare che le caselle di posta elettronica coincidano" );

}

}

return $result;

}



Una volta predisposto il modulo, bisogna impostare la “Mail”, tenendo presente che nella parte iniziale della pagina vengono indicati i tag presenti nel modulo ed utilizzabili nella mail:

nel campo “To” bisogna inserire l’indirizzo di posta elettronica al quale deve essere inviato il

modulo (è possibile indicare più indirizzi di posta); nel campo “From” viene inserito il tag [your-name] e l’indirizzo di posta attraverso il quale

viene inviato il modulo (quello di wordpress del sito); nel campo “Oggetto” viene inserito il tag [your-subject], ma è personalizzabile;



nel campo “Additional Headers” viene proposta la risposta al mittente del modulo (Reply-

To: [your-email]) nel campo “Message Body” vengono proposti i vari campi del mittente, indirizzo di posta e

il messaggio inviato, ma è possibile personalizzare il contenuto, così come la chiusura

proposta della mail stessa.

Selezionando “Mail (2)”, è possibile organizzare un risponditore automatico per inviare un messaggio di notifica e/ di cortesia.

Anche qui vengono riportati i tag del modulo utilizzabili e i vari contenuti sono personalizzabili.



Come operazione finale, bisogna verificare i “Messaggi” e vedere come personalizzarli in funzione del contenuto del modulo predisposto.

Dopo aver salvato il lavoro, bisogna copiare lo shortcode del modulo

e incollarlo in una pagina o post da pubblicare nel sito.



Creazione di moduli più o meno complessi

Col plugin Cf 7 è possibile creare moduli anche complessi da compilare online, per favorire la semplificazione amministrativa, col passaggio dal sistema cartaceo a quello della segreteria digitale.

L’indirizzo di posta elettronica al quale far pervenire il modulo può essere liberamente impostato e, quindi, può essere indicata la casella di posta certificata ufficiale dell’istituzione scolastica, che viene, di regola, gestita dal protocollo informatico. Applicazione che provvede all’assegnazione del protocollo e dà seguito all’istruzione e alla gestione dei documenti.

Peraltro, i moduli sono esportabili/importabili attraverso il menù strumenti di wordpress con files xml e, quindi, adottando i necessari adattamenti quanto meno negli indirizzi di posta elettronica utilizzati, possono essere messi a disposizione della Comunità.

A titolo esemplificativo viene proposto il modulo di richiesta di congedo per malattia.

Il primo passo, così come operiamo quando dobbiamo creare un documento da associare con “stampa unione”, sarà quello di impostare la nota che andrà ad ospitare i campi corrispondenti alle variabili da registrare.

La nota, molto semplice prevede l’inserimento del cognome e nome del richiedente, la scuola di servizio, il numero dei giorni richiesti, la data di decorrenza, la casella di posta elettronica, il cognome e nome del richiedente (quale sottoscrizione) e la data.

Adesso, dal menù di Cf7, bisogna selezionare “Aggiungi nuovo” e aggiungere il titolo del form. Come corpo di default del modulo viene proposto quello classico del “contatto”, quindi cancellare tutto ad esclusione del pulsante invia [submit "Invia"] e incollare nelle righe soprastanti la nota predisposta.

Con qualche ritocco di html, si può giustificare il destinatario e sistemare il paragrafo per l’oggetto.

A seguire:

la prima variabile è il mittente, pertanto, utilizzare il tag text, specificando il nome “mittente”; predisporre, col drop-down menù (sempreché l’istituto amministri più sedi associate)

l’elenco delle scuole dalle quali effettuare la selezione. Anche in questo caso dare il nome

per una facile individuazione tra i diversi tag attivati; selezionare il tag “number”, dare il nome e scegliere l’opzione Spinbox; attivare il tag “date”, dare il nome, ricordandosi che il formato accettato è “aaaa-mm-gg” e,

quindi, è opportuno trasferire questa informazione all’utente che compila il form; per l’indirizzo utilizzare ancora il tag text; per l’indicazione della posta elettronica utilizzare il tag email; per la firma il tag da utilizzare è ancora “text”; concludere col tag “date” per la data del documento.

Al termine di questa fase di lavoro il modulo si presenterà così:

Adesso, si possono creare dei campi obbligatori che si popoleranno con dati che richiedono l’autenticazione dell’utente, ma che saranno nascosti nel front end attraverso le funzionalità del plugin “Contact Form 7 modules”.

I dati che non saranno resi visibili all’utente sono:

nome utente registrato, utilizzando il seguente codice:

[text* nome-utente default:user_first_name] cognome utente registrato, utilizzando il seguente codice: [text* cognome-utente default:user_last_name]



User collegato, utilizzando il seguente codice:

[text* utente default:user_display_name] E.mail registrata dell’utente collegato, utilizzando il seguente codice:

[email* email-referente default:user_email]

Una volta generati detti codici, col generatore di tag (text) o copiati e incollati nel modulo, attraverso il tag “hidden” si procederà a renderli invisibili. I codici sono i seguenti:

[hidden hidden-nome-utente] [hidden hidden-cognome-utente] [hidden hidden-user-collegato] [hidden hidden-mail-utente]

Va da sé che i campi andranno compresi nei necessari tag e .

Nel modulo di esempio i campi nascosti, esposti per completezza di informazione ma non necessariamente da utilizzare nella loro totalità, sono stati inseriti in testa al corpo del form:

Considerato che il contenuto della pagina o del post in cui verrà inserito lo short code del form

dovrebbe essere visibile solo ad utenti loggati, potrebbe non essere utilizzato l’hidden per gli

estremi anagrafici dell’utente, cosicché il modulo già in automatico presenti i predetti dati. Questa è

la soluzione preferita da Christian Ghellere, il quale ha dato un grosso contributo in ordine

all’impostazione e al funzionamento di Cf 7, nonché alle verifiche della validità delle soluzioni

utilizzate.

Il modulo è così visualizzato sul sito:

Impostazione dell’e-mail

Adesso bisogna impostare l’e-mail per la trasmissione dei dati e l’eventuale notifica al mittente.

Vediamo le impostazioni date:

To: è inserita la casella di posta alla quale viene inviato il modulo (possono essere inseriti

più caselle di posta elettronica); From: l’indirizzo di invio del modulo è preceduto dagli estremi del mittente del modulo; Oggetto: non viene inserito il tag ma il contenuto del modulo; Additional Headers: è precisata l’e-mail dell’utente per l’eventuale riscontro;



Corpo del messaggio (Message Body): Il corpo del messaggio è personalizzato con

qualche stringa di codice html ed è suddiviso in due sezioni: la prima contiene in una

cornice i dati di riferimento e di controllo sull’utente che compila il modulo; la seconda,

invece, la domanda di concessione del congedo per malattia.

Selezionando Mail (2), si può impostare l’invio di una e-mail di notifica al mittente del

modulo. Vediamo come: To: è indicata l’e-mail dell’user collegato, a prescindere dagli estremi anagrafici indicati e

dell’e-mail specificata nel modulo. E questo per motivi di sicurezza e di certezza della

volontà dell’utente registrato; From: è inserita l’informazione del sito web che effettua la notifica; Oggetto: è inserita la descrizione dell’istanza inviata; Additional Headers: è specificato l’indirizzo al quale è possibile replicare;



Message Body (Corpo del messaggio): contiene copia della domanda inviata quale

conferma

che genera questa mail per l’utente:



Contact Form DB

Con questo plugin i dati dei vari moduli vengono registrati e sono esportabili e l tempo stesso

pubblicati in una pagina o un post del sito sotto forma di tabella.

Selezionare Contact Form DB e il modulo d’interesse, per visualizzare il data base. I dati possono

essere esportati nei formati specificati nell’apposito dropdown menu.

È possibile pubblicare sul sito i dati acquisiti nel database, perché utili agli utenti (elenco fornitori,

elenco progetti presentati, etc.) costruendo il corrispondente short code:



dal menu Contact Form DB selezionare “Short code” e, quindi, il modulo d’interesse; dalla sezione short code scegliere [cfdb-table] dalla sezione “Quali campi/ mostrare” selezionare uno alla volta i campi da visualizzare e

con il tasto >> trasferirli nel campo successivo.

Man mano che i campi vengono aggiunti, lo shortcode integra nuovi elementi. Quando il

campi/colonne saranno stati tutti aggiunti, bisogna evidenziare lo short code generato (incorniciato

in blu nell’immagine sotto riportata), cliccarlo col tasto destro del mouse e scegliere “copia” dal

menu a tendina che viene visualizzato.

Creare un nuovo post o una nuova pagina e, dopo aver inserito il titolo, incollare nel corso della

pagina/post lo short code.



che viene così visualizzato

Altri moduli

Con Contact Form 7 possono essere creati, in linea di massima, quasi tutti i moduli utili per l’attività

scolastica, anche di una certa complessità. Paolo Mauri, che ha suscitato in me interesse per

questo plugin e mi ha fornito un essenziale supporto per l’approfondimento, ha creato, ad

esempio, un modulo per l’acquisizione dei progetti del POF che giustifica la mia affermazione

possibilistica. Ne propongo alcune videate.



Creare moduli con Contact Form 7 - porteapertesulweb.it · Creare moduli con Contact Form 7 Il...

Documents

Transcript of Creare moduli con Contact Form 7 - porteapertesulweb.it · Creare moduli con Contact Form 7 Il...