Devi creare un modulo contatti per il tuo sito WordPress? Molto bene! Ogni sito web deve averne uno, così che le persone possano contattarti per i tuoi prodotti o servizi.
In questo articolo vediamo come fare e cosa usare per avere un modulo contatti installato e funzionante.
Perchè avere un modulo contatti?
Un form contatti ti da dei vantaggi in termini di sicurezze e funzionalità che la mail non può offrirti.
Creare un modulo contatti con Contact Form 7
Passiamo ora alla parte pratica e costruiamo il tuo modulo contatti con uno dei plugin più apprezzati: Contact Form 7.
Con più di 5 Milioni di download, risulta un plugin utilizzatissimo, supportato dagli sviluppatori, ben fatto e gratuito.
1# - Scarica e installa CF7
La prima cosa da fare è installare e attivare Contact Form 7.
Dal pannello di amministrazione
- Vai su Plugin -> Aggiungi nuovo
- Cerca Contact Form 7
- Installa e attiva
Se hai dubbi su cosa sia un plugin, o vuoi più dettagli su come installarlo e attivalo, leggi anche: Plugin di WordPress, cosa sono, a cosa servono e come installarli.
2# - Crea il modulo contatti
Dopo aver installato e attivato Contact Form 7, vedrai sul menu del pannello di amministrazione la voce Contatti -> Moduli di Contatto.
Accedi e troverai un modulo di default già creato, che puoi modificare a seconda delle tue esigenze.
Clicca su "Modulo di contatto 1" e accedi alla modifica del modulo.
Come prima cosa cambia il nome, vedrai che cambierà anche lo shortcode evidenziato in blu, subito sotto. Quel testo ti servirà più avanti per integrare il modulo nelle tue pagine.
Nota sull'HTML
I moduli di Contact Form 7 possono essere personalizzati tramite l'uso di HTML, questo però non implica che sia necessario conoscerlo per ottenere un modulo base e funzionante.
Passiamo ora a strutturare il form.
La creazione avviene attraverso l'uso di mail-tag precostituiti, ognuno dei quali rappresenta un campo.
Al click, il campo viene inserito nello spazio sottostante, dove sono già stati inseriti il nome, la mail, l'oggetto, l'area di testo per il messaggio e il pulsante di invio.
Se al form vuoi aggiungere per esempio, il numero di telefono, devi fare questi semplici passi:
- Copia le prime due righe, dal tag <label> al tag </label>
- Incollale nella posizione deve vuoi mettere il nuovo campo
- Cancella il testo appena incollato racchiuso nelle parentesi quadre (parentesi quadre comprese)
- Posiziona il cursore dove prima c'era il testo tra parentesi quadre
- Clicchi sul pulsantino "tel".
- Dai un nome al campo e scegli se è richiesto o meno
Il risultato dovrebbe essere qualcosa di simile a questo.
3# - Aggiungi il modulo ad un pagina
Per rendere visibile il modulo, per esempio nella pagina contatti, non devi fare altro che copiare lo shortcode evidenziato in blu, che trovi sotto il nome del modulo e incollarlo dove vuoi che venga visualizzato.
Lo stile dei campi, potrebbe cambiare in base al tema che stai usando ma può essere sempre personalizzato tramite i CSS.
4# - reCAPTCHA: Rendi sicuro il modulo
Nell'introduzione all'articolo, abbiamo detto che un modulo contatto riduce l'arrivo di mail SPAM ma purtroppo non elimina questa possibilità. Ci sono infatti, programmi chiamati robot e che, in automatico, compilano il modulo e inviano posta indesiderata.
Per rendere più sicuro il tuo form devi installare il reCAPTCHA di Google. reCAPTCHA è un servizio gratuito per proteggere il tuo sito web da spam e abusi.
Per integrarlo vai sul menu di amministrazione
- Contatti -> Integrazioni
- Vai su reCAPTCHA ed accedi con il tuo account google
- Segui la procedura e copia la chiave pubblica e privata
- Inseriscile tornando al punto 1
Come risultato avrai una spunta per verificare che chi sta compilando il form, sia effettivamente un essere umano. Se l'utente non ci clicca sopra, non può inviare la mail perché il click in questione, non può essere simulato dai robot.
Imposta la struttura delle Mail
Passiamo ora alle gestione della mail e alla sua formattazione. Ovviamente, non devi impostare nulla per far si che il plugin esegua l'invio, è tutto automatico.
Il tuo compito è strutturare la mail che ti arriverà dal form e se vuoi, strutturare anche la mail che arriverà allo scrivente dopo l'invio. Vediamo come fare.
Dalla modifica del modulo vai nella sezione Mail e compila i campi con i mail-tag come dall'immagine qui in basso.
Puoi abilitare anche la risposta automatica allo scrivente mettendo la spunta sul campo mail(2), che trovi in basso alla sezione mail. La logica di formattazione è la stessa che vedi nell'immagine in alto.
Personalizza i messaggi
Da questa sezione puoi personalizzare i messaggi, sia di conferma che di errore, che vengono mostrati dopo l'invio della mail.
Conclusioni
Siamo giunti alla fine dell'articolo su come creare un modulo contatti. Come promesso, se mi hai seguito passo passo, sicuramente hai il tuo form pronto e configurato.
Nel caso in cui ti risulti chiaro qualche passaggio, scrivimi qui sotto nei commenti e sarò felice di aiutarti.
