Come creare e modificare un form con contact form 7

Contact Form 7 è il plugin ideale per creare moduli di contatto? Sei nel posto giusto: qui troverai tutte le istruzioni per creare e personalizzare moduli di contatto belli e funzionali.

Contact Form 7 è in assoluto il plugin più popolare (e secondo me anche il migliore) per creare form di contatto.

Per installarlo, accedi alla tua Bacheca WordPress, quindi naviga in Plugin > Aggiungi nuovo e nel campo di ricerca digita il nome del plugin.

Seleziona quello che ha come autore Takayuki Miyoshi, installalo ed attivalo. Fatto questo, apparirà alla sinistra della tua bacheca la voce Contact.

Creare il tuo modulo di contatto con Contact Form 7

Per iniziare ad usare Contact Form 7 e creare il tuo primo modulo di contatto, muovi il cursore sopra la voce Contact e seleziona Add New; quindi, scegli la lingua che vuoi utilizzare (se usi WordPress in italiano, questa sarà automaticamente la lingua di default) e prosegui alla schermata successiva. Qui, potrai iniziare a configurare il modulo di contatto vero e proprio.

Per prima cosa, assegna un titolo al form sostituendo la voce Senza titolo. Quindi, inizia a lavorare sui campi del modulo.

L’impostazione di default prevede 4 campi ed un pulsante, che nella maggior parte dei casi saranno sufficienti per un semplice form di contatto; questi sono: Nome, Email, Oggetto, Messaggio, e il pulsante Invia. Se desideri modificare il testo visualizzato sulla pagina, puoi semplicemente sostituire la scritta che trovi all’interno dei tag <p> e <br />.

Se i campi default di Contact Form 7 non sono sufficienti, potrai crearne altri personalizzati attraverso i pulsanti posizionati sopra il form. Alcuni di essi sono:

  • Text, nel quale l’utente potrà digitare informazioni sotto forma di testo semplice;
  • Email, per inserire un indirizzo email;
  • URL, per gli indirizzi web;
  • Tel, in cui inserire solo valori numerici;
  • Drop-down menu, ossia il menu a tendina con voci selezionabili;
  • CAPTCHA, per inserire un CAPTCHA che l’utente dovrà risolvere prima di inviare il form;
  • Submit button, cioè il pulsante per l’invio del modulo.

Ciascuno di questi campi ha delle proprietà specifiche che puoi configurare.

Per aggiungere un nuovo campo, seleziona una voce dalla lista che trovi sopra il form e posizionala dove preferisci rispetto alle voci già presenti. Vedrai un codice simile ad uno shortcode che puoi personalizzare. Dovrai inserire <p> prima del tag e </p> dopo.

Se vuoi inserire un titolo per il campo, scrivilo immediatamente dopo <p>. Per inserire un ritorno a capo dopo il titolo, scrivi <br />.

Approfondisco il discorso sull’uso di questi tag, per suddividere paragrafi e inserire interruzioni di riga, nel video corso HTML di base. Ti consiglio di seguirlo per poter affrontare al meglio piccole modifiche su WordPress di questo tipo.

Configurare le opzioni di notifica di Contact Form 7

Quando hai finito di configurare il modulo di contatto, dovrai indicare l’indirizzo email al quale desideri ricevere i messaggi.

Vai sulla seconda tab Mail; qui, nel campo intitolato To inserisci il tuo indirizzo di posta elettronica.

Nel campo From, sarà inserito automaticamente il tag [your-name] <[your-email]>, che indica l’indirizzo email inserito dall’utente; in quello “Subject” invece [your-subject], cioè, l’oggetto del messaggio.

Puoi personalizzare il corpo del messaggio lavorando sul box Message Body, inserendo tutti i tag che ti servono di quelli utilizzati nel tuo modulo di contatto, in modo da ricevere notifiche che contengono tutte le informazioni di cui hai bisogno.

Tab di configurazione mail Contact form 7

Se trovi difficoltà nella configurazione del tuo messaggio, contattaci per email e ti chiariremo ogni dubbio.

(Nota: se desideri personalizzare il messaggio di notifica aggiungendo tag personalizzati, assicurati di includere tra le parentesi quadre solo le 2 parole separate dal trattino; escludendo, quindi, la prima voce di sinistra – come text, email, textarea che è invece inclusa nei tag utilizzati per configurare il form vero e proprio)

Puoi anche aggiungere un secondo indirizzo email al quale ricevere le notifiche di contatto, compilando il campo Mail (2) nello stesso modo di quello precedente. Questo campo è utilizzato in genere come risponditore automatico, ma puoi usarlo come vuoi. Mail (2) viene inviata solo se Mail è stata inviata correttamente.

La sezione Additional headers ti permette, invece, di inserire i campi Cc, Bcc o Reply-To. Puoi usare un tuo indirizzo oppure un tag del form. Scrivine uno per riga in questo modo:

Cc: mia@email.it
Reply-To: [your-email]

Inserire i messaggi di risposta

La successiva tab della configurazione del modulo Contact Form 7, chiamata Messages, ti permette di inserire i messaggi automatici che appariranno al momento di invio del form.

Qui ci sono molti campi, personalizzabili per ogni eventualità. Per esempio, se un form contiene un errore non potrà essere inviato ma apparirà il messaggio che hai inserito.

Tab di modifica messaggi Contact form 7

Lavorare su questa sezione è molto facile: semplicemente, modifica il testo a tuo piacimento.

Impostazioni aggiuntive

L’ultima tab Additional settings permette di aggiungere dei codici per ottenere delle funzioni particolari, come permettere solo agli utenti loggati di poter inviare dei messaggi.

Quando hai finito di lavorare su tutti i campi, clicca Save; il tuo contact form sarà salvato e potrai inserirlo sulle tue pagine.

Aggiungere moduli di contatto nelle pagine e articoli

Salvato il form, sarà generato uno shortcode che potrai incollare su qualunque pagina o articolo tu voglia far apparire il modulo di contatto.

Semplicemente, inserisci lo shortcode e aggiorna la pagina; il contact form sarà subito visibile.

Inserire un modulo di contatto sulla sidebar

Sempre utilizzando lo stesso shortcode, potrai inserire il modulo di contatto che hai creato anche nella sidebar. Semplicemente, inserisci un widget di testo semplice ed incolla in esso lo shortcode.

Gestire i moduli di contatto salvati

In qualunque momento, puoi visualizzare e modificare tutti i moduli di contatto andando su Contact > Contact Forms.

Conclusione

In questa guida su Contact Form 7 hai imparato come creare un form di contatto, personalizzarne i campi ed inserirlo sia su post e pagina, che sulla sidebar.

Faccelo sapere nei commenti.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

×

Assistenza WhatsApp!

Per informazioni, assistenza e richiesta appuntamenti clicca sotto o manda una email a info@vitalianoalbertidesign.it

×