Salvare i dati di un form in 3… 2… 1

Il  nostro obiettivo è quello di recuperare una serie di dati attraverso un form (potrebbe essere tranquillamente un questionario online o qualcosa di simile) e poi mostrarli in forma tabellare aggregata in una pagina del nostro sito.

3. Scaricare Contact Form 7 e Contact Form DB

Scarichiamo e installiamo Contact Form 7 – plugin che semplifica di molto la creazione di un form di contatto – e Contact Form DB – plugin che salva nel database di WordPress le informazioni recuperate dal form. Dato che Contact Form DB è una estensione di Contact Form 7 non è necessario configurare alcunché; i due plugin si riconosceranno automaticamente.

2. Creare il form di contatto

Per creare il nostro nuovo form basta selezionare dal menu principale Contatti > Aggiungi nuovo.

Nella pagina che si apre andiamo ad impostare, per prima cosa, il titolo del form. Poniamo il caso di chiamarlo “La tua torta preferita” perché il nostro modulo di contatto è un questionario che chiede ai miei utenti qual’è il dolce che adorano.

Subito sotto al titolo vediamo un barra blu che contiene un codice (shortcode) da copiare ed incollare nella pagina del nostro sito che dovrà ospitare il form.

Nell’editor subito sotto abbiamo quattro linguette che ci consentono di:

• Modulo: costruire il nosto questionario
• Mail: impostare una mail da inviare a chi a compilato il modulo o a noi stessi
• Messaggi: comporre i messaggi informativi che aiutano l’utente nella compilazione
• Impostazioni aggiuntive: eseguire del codice personalizzato al momento dell’invio del form

Per gli scopi di questo esempio ci occuperemo solo della linguetta Modulo nella quale andremo ad inserire le informazioni richieste usando la sintassi propria di Contact Form 7 (ulteriori informazioni qui). Limitandoci al minimo sindacale ecco quanto richiederemo…

[text* nome placeholder=Il nuo nome]
[text* dolce placeholder=La tua torta preferita]
[submit "Invia"]

Inserito il tutto e cliccato su Salva, possiamo andare a copia-incollare lo shortcode presente nella barra blu in una qualsiasi pagina di WordPress per attivare il nostro modulo.

Abbiamo finito! Possiamo rilassarci e attendere che i nostri utenti ci facciano sapere i loro gusti 😉

P.S. Per disabilitare l’invio automatico delle mail ad ogni compilazione del form basta inserire nella linguetta Impostazioni aggiuntive questo parametro

demo_mode: on

1. Recuperare i dati con gli shortcode

Dall’area di amministrazione di WordPress è possibile visualizzare i dati del questionario selezionando dal menu principale la voce di primo livello Contact Form DB. Scegliendo dal menu a tendina in alto a sinistra la voce corrispondente al nome del nostro form vedremo caricarsi una tabella con i dati raccolti. Abbiamo anche informazioni aggiuntive sulla data di compilazione, sul nome dell’utente WordPress (se si è loggato al sito) e sull’IP di provenienza.

Come facciamo a recuperare questi dati e a mostrarli in una pagina del sito? Molto semplice!

Basta spostarsi sulla pagina Contact Form DB > Shortcode e creare uno shortcode personalizzato per recuperare le informazioni che ci interessano. Per farlo ci viene in aiuto una sorta di compositore automatico molto completo. Ecco cosa fare:

1. selezionare dal menu a tendina shortcode la voce cfdb-table
2. selezionare dalla linguetta Form il nome del modulo da cui recuperare i dati
3. selezionare dalla linguetta Colonne le informazioni da mostrare (è probabile che non ci interesserà mostrare l’IP di provenienza tra i risultati)
4. copiare il contenuto della riga gialla (lo shortcode generato da Contact Form DB) in una pagina di WordPress appositamente creata

Nel mio caso lo shortcode è questo (ho omesso le parentesi quadre per evitare che WordPress interpreti il codice):

cfdb-table form="La tua torta preferita" show="nome,dolce"

E la pagina in cui lo potete veder funzionare è questa.

Ci sono svariati filtri che potete scoprire paciugando con il composer di Contact Form DB e che ci consentono di mostrare solo determinate informazioni.

N.B. Per mostrare i dati estratti a tutti i visitatori del sito (e non solo agli utenti loggati) è necessario impostare in Contact Form DB > Options > Sicurezza la voce Può vedere i dati (via shortcode) al valore Chiunque.

La chicca finale

E se volessimo formattare in HTML il risultato dell’estrazione dei dati? Qua le cose si fanno interessanti ma anche leggermente più complicate. Tralascio la possibilità di usare cfdb-html invece di cfdb-table perché abbastanza limitante.

Quello che vi propongo è di estendere il comportamento degli shortcode di Contact Form DB andandone a creare uno personalizzato in functions.php. Questa scelta ci permette di formattare in modo esteticamente gradevole i nostri dati e di filtrarli prima di mostrarli (es. se odio la crostata posso impostare il mio shortcode in modo che ogni volta che viene recuperato un dato “crostata” nei risultati venga mostrato “che schifo”).

function get_pie($atts) {
    ob_start();
    require_once(ABSPATH . 'wp-content/plugins/contact-form-7-to-database-extension/CFDBFormIterator.php');
    $exp = new CFDBFormIterator();
    $exp->export('La tua torta preferita', $atts);
    while ($row = $exp->nextRow()) {
    extract($row);
    ?>
    <!-- inizio visualizzazione dati -->
    <h2><?php echo $nome ?></h2>
    <p>La tua torta preferita è: <?php echo $dolce ?></p>
    <!-- fine visualizzazione dati -->
    <?php
    }
    $html = ob_get_contents();
    ob_end_clean();
    return $html;
}
add_shortcode('torta', 'get_pie');

Con questo codice abbiamo creato uno shortcode torta che, richiamato da una qualsiasi pagina WordPress, mostrerà i dati formattati come indicato nella parte tra i due commenti. Possiamo accedere ai dati usando delle variabili con lo stesso nome che abbiamo dato ai campi del form (e che si possono vedere come intestazioni di colonna nella pagina Contact Form DB in area di amministrazione).

E voi che torta preferite?