Creare moduli con Contact Form 7

Transcript

1 Creare moduli con Contact Form 7 Il plugin per Wordpress di Takayuki Miyoshi Appunti di Andrea Smith

2 Indice degli argomenti Introduzione 3 Installazione dei plugins 3 Creazione del modulo contatti 4 Creazione di moduli più o meno complessi 11 Impostazione dell 14 Contact Form DB 17 Altri moduli 19

3 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.

4 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.

5 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, , 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; 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;

6 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.

7 Nella predisposizione del modulo contatti, può tornare utile inserire il campo conferma dell indirizzo indicato dal mittente. Per fare ciò, nel form, dopo il campo [ * your- ] bisogna inserire Confirm [ * your- -confirm] Nel file functions.php bisogna inserire questo codice : add_filter( 'wpcf7_validate_ *', 'custom_ _confirmation_validation_filter', 20, 2 ); function custom_ _confirmation_validation_filter( $result, $tag ) { $tag = new WPCF7_Shortcode( $tag ); if ( 'your- -confirm' == $tag->name ) { $your_ = isset( $_POST['your- '] )? trim( $_POST['your- '] ) : ''; $your_ _confirm = isset( $_POST['your- -confirm'] )? trim( $_POST['your- -confirm'] ) : ''; if ( $your_ != $your_ _confirm ) { $result->invalidate( $tag, "Controllare che le caselle di posta elettronica coincidano" ); } } return $result; }

8 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;

9 nel campo Additional Headers viene proposta la risposta al mittente del modulo (Reply- To: [your- ]) 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.

10 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.

11 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.

12 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 ; 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]

13 User collegato, utilizzando il seguente codice: [text* utente default:user_display_name] E.mail registrata dell utente collegato, utilizzando il seguente codice: [ * -referente default:user_ ] 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:

14 Impostazione dell Adesso bisogna impostare l 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 dell utente per l eventuale riscontro;

15 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 di notifica al mittente del modulo. Vediamo come: To: è indicata l dell user collegato, a prescindere dagli estremi anagrafici indicati e dell 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;

16 Message Body (Corpo del messaggio): contiene copia della domanda inviata quale conferma che genera questa mail per l utente:

17 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:

18 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.

19 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.

20