Che il tuo sito web sia un e-commerce, un blog oppure un semplicissimo sito vetrina è obiettivo comune raccogliere feedback e segnalazioni dai tuoi visitatori. Per fare in modo che questo accada è necessario implementare un form di contatto nel tuo sito web. Spesso situati nelle apposite pagine “Contatti”, essi sono un ottimo strumento per far si che i tuoi utenti si sentano coinvolti a condividere con te il proprio pensiero. Altre volte invece i moduli di contatto sono utilizzati ai fini di ricevere un preventivo o più in generale per esigenze di business e quindi aumentare le conversioni.
Tempo fa scrivemmo un articolo dove raccoglievamo 5 plugin per creare un contact form su WordPress. A distanza di 6 anni torniamo a parlarne approfondendo l’argomento attraverso il plugin che più ci sentiamo di consigliarvi per inserire un modulo di contatto nel vostro sito ovvero Contact Form 7. Con più di 5 milioni di installazioni attive (nel momento in cui è stato scritto questo articolo), un ottimo grado di personalizzazione e una larga compatibilità con servizi terzi, Contact Form 7 è sicuramente la soluzione gratuita più adatta!
Installare il Plugin su WordPress
Il primo passo è naturalmente installare il plugin. Puoi scaricarlo dal repository ufficiale su WordPress.org o cercarlo direttamente nella dashboard di WordPress. Per fare ciò, nella dashboard di WordPress, seleziona Plugin → Aggiungi nuovo plug-in dal menu.
Quindi digita Contact Form 7 nella funzione di ricerca. Una volta visualizzato Contact Form 7, fare clic su Installa → Attiva. Una volta attivato, puoi trovare le funzionalità del plugin nella nuova area Contatti della dashboard di WordPress.
Com’è fatto un modulo su Contact Form 7
Quando Contact Form 7 viene installato per la prima volta, crea automaticamente un modulo di esempio. Prima di iniziare a creare un modulo di contatto personalizzato, diamo prima un’occhiata al modulo di esempio per avere un’idea migliore di come funziona Contact Form 7. Fare clic su Modulo di contatto 1 per visualizzare le impostazioni del modulo.
La pagina “Modifica modulo di contatto” è suddivisa in quattro sezioni:
- Modulo: personalizza il tuo modello di modulo di contatto HTML con una varietà di opzioni di campo come “testo”, “email”, “caselle di controllo”, ecc. Puoi anche scrivere HTML personalizzato nella casella di personalizzazione del modulo.
- Mail: configura e personalizza il messaggio che riceverai quando un utente invia una richiesta tramite il form di contatto.
- Messaggi: personalizza i messaggi visualizzati dopo azioni specifiche. Ad esempio, puoi impostare un messaggio univoco da visualizzare dopo che qualcuno ha inviato un modulo di contatto.
- Impostazioni aggiuntive: specifica gli snippet per abilitare funzionalità aggiuntive come la modalità solo abbonati, la modalità demo e il salto della posta.
Creazione di un modulo di contatto personalizzato
Puoi creare un nuovo form andando su Contatti → Moduli di contatto, fai clic su Aggiungi nuovo e inserisci il nome del tuo nuovo modulo. Dopo aver fatto questo, noterai che il plug-in ha creato automaticamente alcuni campi modulo di base come nome, e-mail, oggetto e messaggio.
Nella maggior parte dei casi, probabilmente vorrai mantenere questi campi e magari aggiungerne altri a seconda delle tue esigenze. Per aggiungere un nuovo campo, scegli tra i tag disponibili nella parte superiore del pannello dell’editor dei moduli. Parlo di questi:
- Testo: crea un tag modulo per una singola riga di testo. I campi di testo sono utili per nomi, cognomi e altri frammenti di testo che non richiedono più righe.
- Email: crea un tag modulo per un indirizzo e-mail.
- URL: crea un tag modulo per un URL.
- Tel: crea un tag modulo per un numero di telefono.
- Numero: crea un tag modulo per un numero. A differenza dei campi di immissione “testo” o “area di testo”, i campi “numero” consentono solo cifre numeriche.
- Data: crea un tag modulo per una data.
- Area di testo: crea un tag modulo per un’area di testo. A differenza del normale campo di immissione “testo”, un campo “area di testo” consente più righe di testo. Sono ideali per inserire il corpo del messaggio.
- Menu a discesa: crea un tag modulo per un menu a discesa.
- Caselle di controllo: crea un tag modulo per le caselle di controllo.
- Pulsanti di opzione: crea un tag modulo per i pulsanti di opzione.
- Accettazione: crea un tag modulo per una casella di controllo di accettazione.
- Quiz: crea un tag modulo per una coppia domanda-risposta.
- File: crea un tag modulo per un campo di caricamento file.
- Invia: crea un tag modulo per un pulsante di invio.
In questa guida ti mostreremo, come esempio, l’aggiunta di un campo di numero di telefono al nostro form. Per inserirlo, fare clic sul tag tel. Apparirà immediatamente un popup:
Queste ovviamente variano in base al tag che avete scelto. In questo caso, per il campo telefono, è possibile lasciare il Nome, il Valore predefinito, l’attributo ID e l’attributo Classe. Selezionare l’opzione Campo obbligatorio e quindi fare clic su Inserisci tag.
Ecco cosa sta succedendo lì:
- <label> e </label> indicano al plugin dove inizia e dove finisce il nuovo campo.
- tel* indica che abbiamo a che fare con un campo di numero di telefono.
- tel-717 è l’ID univoco del campo. Avvertimento; nel tuo caso, quel numero sarà diverso, unico per il tuo modulo e campo specifico.
- Phone no. è solo il pezzo di testo che vogliamo mettere accanto al campo del modulo stesso. Questo è solo un esempio. Puoi fare il tuo come preferisci.
IMPORTANTE: Salva il modulo.
Puoi ovviamente aggiungere più campi con l’aiuto di altri tag nel tuo modulo. A tal proposito, suggerisco di leggere la documentazione ufficiale per saperne di più sui tag disponibili e su come usarli. Adesso in teoria, potresti già implementare il form tramite lo shortcode del modulo (numero identificativo del singolo modulo che trovi subito sotto il nome dello stesso) ma prima vediamo come completare la configurazione del plugin.
Ultime configurazioni in Contact Form 7
Ora che il tuo modulo è pronto, è il momento di personalizzare ciò che accade dopo che qualcuno ha provato a contattarti utilizzandolo. Questo è un passaggio importante perché se le e-mail non sono configurate correttamente, non sarai avvisato quando qualcuno compila il modulo e di conseguenza non riceverai nessun dato dai tuoi utenti.
Puoi trovare le impostazioni e-mail nella scheda Posta situata proprio accanto all’editor del modulo:
Di seguito troverai una rapida carrellata di tutte le opzioni disponibili nella sezione delle impostazioni Mail su Contact Form 7:
- A: In questa opzione, dovrai inserire il tuo indirizzo email. Come impostazione predefinita, Contact Form 7 utilizza l’e-mail dell’amministratore del sito.
- Da: Specifica il mittente della mail. Una buona pratica è inserire il nome del tuo sito.
- Oggetto: Qui è dove puoi personalizzare l’oggetto del messaggio e-mail che riceverai.
- Altri destinatari: Con questa opzione, puoi aggiungere i destinatari Cc o Ccn alla mail. Dai un’occhiata a questa guida per imparare.
- Corpo del messaggio: Il più delle volte, non avrai bisogno di pasticciare con questo a meno che tu non voglia includere qualcosa di veramente specifico nel corpo dell’e-mail.
- File allegati: Nel caso in cui tu abbia aggiunto un campo di caricamento file al modulo, assicurati di includere qui il tag del file.
- Mail (2): Qui è dove puoi impostare un’e-mail di risposta automatica alla persona che ti ha contattato tramite il modulo. Questa può essere una funzione utile se stai utilizzando il modulo per scopi di marketing o desideri confermare alla persona che hai ricevuto la sua email.
👉 Sentiti libero di sperimentare questa funzione, ma non la tratteremo in questo articolo poiché è un po’ più avanzata.
Pubblicazione del Modulo di Contatto
Già accennato in precedenza, vediamo insieme come pubblicare il modulo di contatto appena creato nel tuo sito wordpress e assicuriamoci che tutti i tuoi visitatori possano vederlo. Dalla Dashboard seleziona Contatto → Moduli di contatto. Quindi copia lo shortcode accanto al modulo che desideri aggiungere al tuo sito:
Successivamente, apri la pagina o il post in cui desideri inserire il modulo di contatto. Incolla lo shortcode nell’area di testo dell’editor dei post in cui desideri visualizzare il modulo di contatto.
Visualizza l’anteprima della pagina e, se sei soddisfatto dei risultati, fai clic su Pubblica. Una volta che il modulo di contatto è attivo, testalo per verificare che funzioni. La risposta del modulo di contatto deve essere inviata direttamente all’indirizzo e-mail specificato nelle impostazioni della Mail. Se la tua casella di posta rimane vuota, controlla la posta indesiderata/spam prima di iniziare la risoluzione dei problemi.
Con ciò, siamo giunti alla fine di come impostare Contact Form 7
Conclusioni
C’è una ottima ragione per decretare Contact Form 7 come il miglior plug-in per moduli di contatto su WordPress: può essere utilizzato per creare qualsiasi cosa! Dai form più base, ai quiz di domande e risposte, ai moduli complessi che supportano ad file allegati. In più, viene fornito con il supporto reCAPTCHA integrato per proteggere il tuo modulo di contatto dagli spammer.
Continua a seguirci per altre guide, tutorial e novità sul mondo WordPress.
