Contact Form 7: moduli di contatto in WordPress

Creare un modulo di contatto personalizzato usando Contact Form 7

Abbiamo avuto l’idea giusta, scelto un bella grafica, curiamo i contenuti del nostro blog e adesso vogliamo una pagina Contatti che sià più di un semplice indirizzo email, col quale corriamo il rischio di ricevere un sacco di posta indesiderata.

Contact Form 7 è la soluzione giusta:  un plugin WordPress flessibile e facile da usare, e per di più è gratuito.

Questo plugin permette di creare un modulo di contatto altamente personalizzato, con la sicurezza del codice CAPTCHA (quella sequenza di lettere e/o numeri che prevengono lo spam). È uno dei plugin più usati,  viene sempre aggiornato velocemente per le versioni più recenti di WordPress ed è disponibile anche in Italiano.

Installare e attivare Contact Form 7

Come per tutti i plugin di WordPress i modi per installare Contact Form 7 sono due:
Dal pannello di amministrazione di WordPress:

  • Voce di menu Plugin > Cerca > Contact Form 7 > Installa adesso.
  • Terminata l’installazione correttamente (ci avverte un messaggio) scegliamo Attiva plugin

Dal repository dei plugin di WordPress:

  • Download del plugin Contact Form 7 (salviamo il file sul nostro computer)
  • Pannello di amministrazione > Voce di menu Plugin > Aggiungi nuovo > Caricare > (Scegliere il file dal nostro computer) Installa adesso.
  •  Attiva plugin

Personalmente preferisco il primo metodo per la sua rapidità.

N.B. : non c’è bisogno di scegliere la versione in Italiano, poichè questa è già inclusa nel plugin stesso e si attiverà in automatico se l’installazione di WordPress è stata fatta in italiano.

Creiamo il nostro modulo di contatto

Se siete buoni osservatori vi sarete accorti che tra le voci di menu dell’amministrazione è adesso comparsa la voce C F 7. Cliccando su di essa ci ritroveremo nel pannello di gestione del plugin. Gli sviluppatori del plugin hanno avuto pietà degli utenti e hanno predisposto un esempio che possiamo modificare o usare come spunto per il nostro modulo di contatto.

Analizziamo la schermata

Abbiamo scelto di modificare il modulo di esempio. Analizziamo la pagina che ci si presenta davanti.

 

Schermata Iniziale

  1. Titolo del modulo (in questo caso Modulo di Contatto 1): cliccando sul titolo è possibile modificarlo.
  2. Codice del modulo: il codice che dovrà essere copiato e incollato sulla nostra pagina Contatti (viene generato automaticamente).
  3. Genera tag: da questo menu a tendina sceglieremo le voci che inseriremo nel nostro modulo di contatto.
  4. Modulo: qui vengono visualizzate le voci che abbiamo scelto. Possiamo riordinarle e/o modificarle (vedremo come)

 Genera Tag:

  • Campo Testo: per inserire testo su una sola riga (Nome, Cognome, Nickname, Oggetto).
  • Email: per inserire l’indirizzo email del mittente.
  • URL:  per inserire un indirizzo web.
  • Telephone number: se volete che venga lasciato un numero di telefono (era chiaro, no? 🙂 )
  • Number (spinbox): genera un campo quantità; si usano “freccine” per aumentare o diminuire la quantità.  Attenzione: non funziona bene su tutti i browser!
  • Number (slider): genera un campo quantità, visualizzato come una barra con un cursore che viene spostato col mouse.
  • Data: per inserire una data. Il formato della data (gg/mm/aa) è modificabile.
  • Area di testo: per inserire un testo molto lungo, solitamente il messaggio che si vuole inviare.
  • Menu a cascata: viene generato un menu a tendina con voci selezionabili. E’ possibile decidere se far selezionare una o più voci contemporaneamente.
  • Caselle di verifica: anche chiamate checkbox. Vengono generate voci con la casella di spunta. Possono essere scelte più voci contemporaneamente
  • Radio Button: queste voci implicano una sola scelta tra più opzioni. Una scelta esclude tutte le altre.
  • Consenso: se richiediamo che chi compila il modulo rilasci un consenso. Attenzione: il consenso non viene generato automaticamente, dovremo mettere noi il testo o un link ad un testo
  • Quesito: potete creare una domanda a risposta certa (ad esempio il risultato di una somma). Potete usarlo in alternativa al codice CAPTCHA, ma il quesito non viene rigenerato automaticamente, perciò se rimane lo stesso a lungo potrebbe rivelarsi inefficace per proteggerci dallo spam.
  • CAPTCHA: genera una serie casuale di lettere e/o numeri che devono essere inseriti in un campo di testo per dimostrare che siamo esseri umani. Funziona in combinazione col plugin Really Simple CAPTCHA  che deve essere installato e attivato.
  • Upoload File: se volete permettere di allegare file. Possiamo decidere quali file sono accettati
  • Pulsante di invio: da non dimenticare! Se non lo mettete come fa la gente a mandarvi la mail? 🙂

Modulo:

Schermata Modulo contact form 7

L’area Modulo del “Modulo di contatto 1” si presenta con alcune voci già inserite. A dispetto di quel che sembra quando scegliamo una delle voci del menu Genera Tag non verranno inserite così ben ordinate e formattate, ma dovremo fare delle modifiche (niente di spaventoso!)

Aggiungiamo una voce al nostro modulo di contatto

Per capire come funziona l’inserimento di una voce facciamo un esempio concreto. Aggiungiamo al nostro modulo di contatto il campo URL, richiedendo però un indirizzo Facebook. Questo sarà un campo Opzionale.

Vediamo insieme le varie impostazioni che si presentano:

Schermata Genera Tag

 

  • Campi obbligatori? : qui ci viene chiesto se vogliamo che questo dato del modulo sia obbligatorio. L’utente sarà obbligato a riempire questo campo, altrimenti un messaggio di errore lo avvertirà. Nel nostro caso è opzionale perciò non lo spuntiamo.
  • Nome: il nome che vogliamo dare a questo campo. Possiamo lasciare quello che ci viene proposto dal modulo (numerico) oppure definirlo noi. Suggeriamo di definirlo, perchè così è più facile riconoscerlo, sopratutto quando dovremo preparare la mail di ricezione o il modulo di contatto ha molte voci
  • id: funzione avanzata, possiamo assegnare un id al nostro campo se  volessimo che determinate funzioni siano collegate a un determinato id.
  • class: funzione avanzata. Potremmo decidere di assegnare una classe CSS specifica solo per questo campo, diversa da tutto il resto del nostro sito.
  • size: possiamo indicare quanto il campo si debba vedere lungo.
  • maxlength: possiamo decidere che può essere inserito un numero massimo di caratteri.
  • Akismet: funzione avanzata, si ricollega al plugin Akismet (antispam)
  • Valore predefinito: in combinazione con la spunta sulla voce “Usa questo testo come placeholder” permette di visualizzare un testo predefinito all’interno del campo.
  • Copia questo codice ed incollalo nel modulo a sinistra: il cuore del nostro esempio. Come ci viene richiesto copiamo e incolliamo il codice nel campo modulo a sinistra (facile no?)
  • Ed inserisci questo codice nei campi mail qui sotto: una volta che il modulo di contatto sarà compilato e inviato dall’utente, riceveremo una email. Se non inseriamo questi codici, la nostra mail arriverà vuota, per cui ricordatevi di aggiungerli (spiegato più avanti).

Come vedete una volta incollato il codice nel campo modulo abbiamo solamente la “scritta” [url facebook].

Schermata Url Facebook

Se la lasciassimo così nel nostro modulo vedremmo solo una casella vuota senza nessuna indicazione su che cosa venga richiesto. Dobbiamo aggiungere alcune informazioni usando il codice html.

<p>Url Facebook<br/>
[url facebook]</p> 

Cosa abbiamo scritto usando il codice html:

  • <p>: indica al browser che si sta aprendo un paragrafo di testo
  • Url Facebook: il testo del nostro paragrafo
  • <br/>: indica al browser che vogliamo che quello che viene dopo vada “a capo” rispetto al testo che abbiamo scritto.  Se desiderassimo che il campo da compilare fosse in linea con il testo questo codice non va inserito.
  • [url facebook]: il codice che abbiamo copiato in precedenza e che creerà il campo dove inserire i dati.
  • </p>: indichiamo al browser che il paragrafo è finito

Questo è il risultato finale:

Schermata Contatti

Prepariamo l’email di ricezione

Abbiamo visto durante l’inserimento del campo URL Facebook che ci viene richiesto di inserire i codici delle  varie voci anche nell’area dedicata alla ricezione della mail. E’ un procedimento che va fatto man mano che costruiamo il nostro modulo di contatto, ma per comprenderlo meglio è meglio analizzarlo a parte. Vediamo quest’area.

Schermata Mail

  1. Mail
    • A: inserire l’indirizzo email sul quale si vuole ricevere il messaggio
    • Da: qui va inserito il codice generato dal Tag Email. Verrà indicata l’email del mittente
    • Oggetto: inserire il codice generato dal Tag Area di Testo che nel nostro esempio è stato chiamato “your-subject”.
    • Intestazioni aggiuntive: funzione avanzata. Se desideriamo che l’email venga inviata in Cc o in Bcc ad altri indirizzi email. Se non siete sicuri di come fare e volete che la mail venga inviata anche ad un altro destinatario vi consiglio di usare Mail 2
    • File allegati: nel caso avessimo permesso ai nostri utenti di inviarci dei file allegati qui va incollato il codice generato dal Tag Upload File
    • Utilizza contenuti in HTML: funzione avanzata, se desideriamo ricevere una mail con caratteristiche di impaginazione come una pagina web
  2.  Corpo del messaggio: questo è il testo del messaggio vero e proprio. Come per il campo Modulo, qui dobbiamo inserire noi una parte del testo oltre ad incollare i codici generati dai vari Tag, per capire cosa stiamo leggendo.  Possiamo volere che le indicazioni di email e oggetto siano ripetute nel testo del messaggio, ma è un’opzione. Come vedete abbiamo inserito il codice per visualizzare l’indirizzo Facebook richiesto, come suggerito durante la preparazione del Tag URL. Abbiamo inoltre aggiunto un “piede” alla nostra email che indica da quale sito e da quale pagina del sito arriva la mail, utile se si hanno più siti o più pagine che contengono moduli di contatto.
  3. Mail 2: come accennato prima qui è possibile scelgiere una seconda mail di destinazione (magari per un collaboratore) e decidere quali saranno i campi da poter visualizzare. Si apre una schermata identica a Mail.

Messaggi

Infine possiamo impostare il testo che verrà visualizzato una volta che l’utente avrà inviato il modulo di contatto. Facciamo sapere se l’operazione è andata a buon fine o meno e quali azioni intraprendere in quest’ultimo caso.

Schermata Messaggi

Abbiamo finito?

La preparazione è stata lunga da spiegare, sarà molto più veloce da fare, ma abbiamo davvero finito adesso? No ovviamente, vi siete fatti le domande più importanti?

Ho salvato? Può sembrare una banalità, ma a volte il nostro lavoro viene sprecato solo perchè non si è salvato. In alto a destra della nostra pagina c’è il pulsante Salva. Non dimenticatelo!

Ho inserito il codice per visualizzare il modulo nella mia pagina? Come abbiamo visto all’inizio di questo tutorial in testa alla nostra pagina di preparazione è riportato il codice da inserire nella pagina dove vogliamo che venga visualizzato il modulo di contatto, perciò DOPO AVER SALVATO copiamo il codice, creiamo la pagina Contatti ed incolliamo il codice.

Schermata code

Finito! 🙂

NOTA

Questo post riceve moltissimi commenti,  e quelli con richieste specifiche di consulenza non vengono pubblicati. Non possiamo fornire consulenza dettagliata su ogni difficoltà. Per risolvere i problemi potete:

52 commenti su “Contact Form 7: moduli di contatto in WordPress”

  1. Grazie!!!!!!!!!! Intanto l’ho installato e più tardi mi metto all’opera seguendo passo passo la tua guida!!! :-)Utilissimo articolo e molto dettagliato!!!!

  2. Scusa ma il campo data in fase di ricezione delle mail mi viene con il formato yyyy/mm/gg.

    come posso impostarlo nel formato europeo gg/mm/yyyy

    Saluti
    Giacomo

    • Supponendo che ti dia proprio fastidio il formato yyyy/mm/gg :), c’è bisogno di modificare un pochino il campo da inserire nella mail.
      Ipotizziamo che tu abbia chiamato il tuo campo Data: “prova-data” , il plugin ti dice quindi di inserire nella mail il codice [prova-data], devi modificarlo con [_format_prova-data “d M y”]. Fammi sapere se funziona.

      Saluti. Gloria

  3. Si’ , certo. Come ho indicato nel post esiste la voce Mail2 dove poter inserire un altro indirizzo

  4. Credi sia possibile inserire un menu a cascata per scegliere a quale indirizzo inviare l’email. Mi spiego. Ho due sedi e quindi la necessità di chiedere all’utente quale sede contattare e di conseguenza arriverà l’email a quella sede. E’ possibile con contact form 7? grazie

  5. Ciao Francesca, la risposta è: sì 🙂

    Vediamo come: per prima cosa devi aggiungere il menu a tendina con la scelta della sede nel campo Modulo (nel punto della pagina in cui preferisci) inserendo questo comando

    Scegli sede [select your-recipient "SEDE 1 | sede1@example.com" "SEDE 2| sede2@example.com" ]

    tenendo presente che il mio è solo un esempio e devi inserire i tuoi dati.

    La seconda cosa da fare è modificare l’indirizzo di destinazione del campo Mail. Al momento c’è segnato solo un indirizzo mail, tipo example@example.com. Devi cancellarlo completamente e al suo posto scrivere

    [your-recipient]

    così il programma riconosce l’indirizzo email selezionato nel menu a tendina e invia la mail al destinatario prescelto.

    Buon lavoro e fammi sapere se funziona! 😉

  6. Ciao Gloria vorrei creare una pagina in cui chiedo agli utenti che effettuano il login di compilare una serie di domande e di caricare dei file quindi avevo pensato di utilizzare “contact form 7” però mi servirebbe dare la possibilità agli utenti di compilare le domande anche in diversi momenti quindi anche in un successivo accesso al sito e vorrei che sapessero fin dove hanno già risposto. Se inserisco diverse contact form una dopo l’altra si creano diversi database e questo non mi permette di riunire i dati di una persona in un unico database quindi mi è scomodo. Inoltre gli utenti non saprebbero fin dove hanno risposto e quindi potrebbero sbagliare e rispondere nuovamente a qualche domanda. Mi puoi suggerire una soluzione?anche un altro plugin se necessario. grazie

  7. Ciao Stefy, mi sembra che per la tua richiesta Contact Form 7 non sia la soluzione più adatta.
    Credo tu abbia bisogno di una consulenza professionale. Ti suggerisco di contattare Nexnova (i proprietari di questo blog) a questo indirizzo: http://nexnova.net/contattaci/
    Sono sicura che sapranno aiutarti a trovare la soluzione giusta per la tua richiesta. Buona giornata

  8. Ciao Stefy, ho creato il mio modulo di contatto con possibilità di allegare file, sul sito è visualizzato corettamente e funziona bene ma io nella mia mail non ricevo l’allegato, mi appare solo il nome del file.
    Grazie e buona giornata

  9. Ciao Valentina, suppongo che la domanda fosse per me (mi chiamo Gloria)! 🙂
    Il tuo problema può dipendere da molti fattori, hai ricontrollato di aver impostato tutto correttamente? Se il problema persiste, come già consigliato a Stefy, ti consiglio una consulenza professionale. Buona giornata

  10. ciao ho letto il tuo articolo che trovo interessante , sto usando il plugin Contact Form 7 e vorrei modificare il modulo contatti creato, mettendo , nel form di contatto , due campi sulla stessa riga , esempio :
    Cognome Nome

    puoi aiutarmi??

  11. come va a livello sicurezza?? c’è un controllo su quello che viene inviato al server nei vari campi? per evitare di portarci dentro codice che genera spai??? avete qualche info
    Grazie.

    Pierpaolo

    • Non so che cosa sia “codice che genera spai”, comunque il codice del plugin è open source, quindi lo puoi analizzare tranquillamente. Se vuoi vedere che cosa invia, anche senza analizzare il codice puoi usare tool di analisi del traffico, come Fiddler o Wireshark.

  12. Salve Gloria, avevo pubblicato un quesito ma non lo vedo più- Ho inserito il plugin e fatto passo passo in base alle tue info il mio modulo. Però quando vado nella pagina, sia in anteprima che in definitiva, vedo tutto ma non posso scrivere nei campi. Ho abilitato i commenti nella pagina ma non è cambiato nulla. Help please! Fabio

    • Ciao Fabio, il tuo quesito non è andato perso, ma era in attesa di moderazione. Basta avere un po’ di pazienza. 😉
      Purtroppo non so come aiutarti. Non avendo mai incontrato il tuo problema, non ho un presupposto per ipotizzarne le cause. Possono essere una o mille, ma questo diventa campo dei professionisti (come già consigliato per altre questioni).
      In bocca al lupo

  13. scusate la mia domanda da nabbo ma se ho istallato WP in locale non può mandare l’email nel momento in cui clicco INVIA vero?

  14. Utilissima guida, sarebbe bello se ci potrestidare qualche dritta per modificare un po l’aspetto grafico (molto spartano) tipo colore testo, colore dello sfondo del modulo. grazie

    • Ciao dentronapoli, grazie di aver trovato utile la guida. La parte di modifica dell’aspetto grafico del form si addentra in un territorio più tecnico, per il quale bisogna già avere delle conoscenze di base. Al momento non è in programma, ma tutto può succedere 🙂
      Un saluto

  15. Ciao!..È possibile inserire lo stesso form in più pagine facendo poi in modo che nella mail di contatto esca in automatico il link della pagina dal quale è stata inviata la richiesta di informazioni?

    • Ciao Riccardo, così come hai posto tu la domanda la risposta è No. Questo non significa che non si possa usare un po’ di fantasia! 🙂
      Per esempio puoi duplicare il form. Al nuovo form viene assegnato un nuovo identificativo; nella zona riservata alla ricezione della mail (essendo modificabile) puoi inserire i riferimenti della pagina di origine (ad es. Form della pagina contatti, Form della pagina richiedi informazioni, ecc). Nelle relative pagine incolli il codice del form corrispondente e, voilà, hai risolto!

      • Ti ringrazio tanto per la risp! Effettivamente quella del duplicare è la soluzione che già adottavo, ma ora le pagine iniziano a diventare tante (cosa che non avevo previsto) e non volevo creare cosí tanti form…..forse dovrei optare per un altro plugin….

      • Un utente, Gp Webdesign, mi ha fatto scoprire che ciò di cui avevo bisogno si può fare anche con contact form 7, basta intallare l’estensione “Contact Form 7 – Dynamic Text Extension”, è veramente facile e potente e ti permette di inserire dei campi che si generano dinamicamente (ad esempio con il nome o l’url della pagina)….magari a qualcuno potrà tornare utile! 😉 ciaooo

        • Ciao Riccardo, grazie dell’info.
          Per tua conoscenza con “Contact Form 7 – Dynamic Text Extension” è possibile impostare un campo a tendina che in base alla scelta effettuata genera altri campi diversi tra loro.
          Esempio: scelgo dal campo a tendina A quindi sotto si genera all’istante un campo con C mentre se dal campoa tendina scelgo B si genra all’istante una finestra C.

      • Ciao, io non uso Contact Form da molto (ora uso GravityForms, a pagamento ma assolutamente fantastico), ma ricordo che in contact form c’erano gli Special mail tags per inserire dati aggiuntivi – come appunto il titolo del post – nell’email spedita. Questa la pagina con gli shortcodes: http://contactform7.com/special-mail-tags/ – se qualcuno può confermare o smentire che funzionano ancora, è un’informazione utile: potrebbe evitare di installare un plugin aggiuntivo (l’utilissimo Dynamic Text Extension suggerito da Riccardo).

  16. Ciao a tutti! Vorrei sapere da qualche pagina del mio sito arriva la richiesta di contatto tramite il form. Come faccio a saperlo?

  17. Scusate riformulo la domanda..come faccio a sapere da quale pagina del mio sito è arrivata la richiesta di contatto? Ho ilo stesso form in diverse pagine…grazie

  18. Salve,
    vorrei inserire anche io un form di contatto ma non ho proprio capito come fare. Ho scaricato Contact Form 7 ma dal pannello del mio blog non compare in nessun posto la voce plug-in. Non so se il form è valido per tutte le tipologie di blog, oppure se prima bisogna registrare il proprio dominio per avere accesso a questa funzione. Nonostante sia ancora proprio ignorante su tutti i meccanismi di wp, ho girato ogni singolo meandro del pannello a sinistra ma, a parte le solite voci (come segue: bacheca, negozio, articoli,media, link, pagine, commenti, riscontro, aspetto, utenti, strumenti, impostazioni) della barra di sinistra non ho trovato assolutamente quel che disperatamente cerco.
    Per tanto chiedo la cortesia a chi di voi fosse disponibile, di spiegarmi passo passo come poter inserire il form.

    Grazie,
    A.

  19. Ciao mi trovo bene con Contact Form ma non riesco a rispondere a due mie esigenze:
    1-aggiungere il modulo di contatto in fondo ad ogni pagina per tutta la larghezza della pagina senza dover riportare il codice ogni volta. Dunque senza utilizzare i widget. Lo stesso modo di come avviene il collocamento dei tasti social di molti plugin.

    2-Far prelevare al form l’url dal quale è stata mandata la richiesta per capire a cosa è interessato chi ci ha contattato. (spesso le richieste da chi compila un form sono molto generiche). Per fare ciò si potrebbe creare un form ad hoc per ogni pagina ma capirete che è un processo troppo macchinoso per chi vuole creare molti articoli o pagine.

    • ciao luca! per la tua prima esigenza basta modificare il file page.php aggiungendo nel punto che preferisci questo codice

      inserendo ovviamente lo shortcode del tuo modulo di contatto;

      Per la seconda esigenza basta leggere nei commenti lasciati precendentemente, dove io e Nestore (un altro utente) proponiamo 2 soluzioni (io personalmente ho risolto cn il mio metodo, ma nn ho testato il suo)

  20. ciao Gloria,

    ho creato il form e un menù a tendina. Vorrei che scegliendo due opzioni del menù (in totale sono 4 allo stato attuale) si generassero altre due campi (che invece non devono vedersi per le altre opzioni.
    Credi sia possibile?

    grazie in anticipo,
    stefano

  21. Ciao Gloria, complimenti per la chiarezza delle risposte e la disponibilità.
    Vorrei sapere se sai indicarmi un modo per risolvere il mio problema: fatta una scelta da un menù a tendina vorrei che si generassero due ulteriori campi per una due delle quattro risposte possibili. Crei sia possibile?.
    grazie, stefano

    • Ciao Alessia, le checkbox sono una delle voci del campo Genera Tag, come spiegato nell’articolo. Non l’hai trovata?

  22. Ottima guida
    chiedo cortesemente se è possibile inserire un sub form.
    CIioè (sevo inserire dei corsi realizzati in un form, ma non so quanti sono i corsi degli utenti, alcuni utenti hanno fatto 3 corsi, altri 1 corso, altri 5 corsi.
    Grazie in anticipo

  23. Ciao Gloria, sto utilizzando Contact Form 7 per creare un form. Vorrei sapere se è possibile far “aprire a cascata” una domanda se alla domanda precedente è stata data una particolare risposta. Ad esempio se alla domanda: “Vuoi acquistare questo prodotto?” con risposte possibili a tendina ‘si’ o ‘no’ scelgono ‘si’, allora si deve aprire un’altra domanda oltre a quelle già presenti altrimenti possono continuare con la compilazione del form normalmente.
    Si può fare con Contact form 7 e se si come?

  24. Buongiorno! Ottimo Articolo!
    Volevo chiedere un suggerimento: se dovessi inserire nel mio sito una sorta di form di autovalutazione, nel quale alla fine del form gli utenti inviano le informazioni e ricevono immediatamente un feedback in base alle singole info inserite, avete qualche plugin da suggerirmi…o secondo voi posso utilizzare in qualche modo contact form7?…spero di essere riuscita a spiegarmi decentemente… 😀

    Grazie mille ancora di tutto
    Federica

I commenti sono chiusi.