Qualsiasi sia il sito internet che stai creando puoi avere la neccessità di creare form di contatto in WordPress e, la soluzione migliore per farlo è utilizzare il plugin gratuito Contact Form 7. Il plugin gratuito sviluppato da ti permette di creare facilmente infinite tipologie di form di contatto da utilizzare all’interno del tuo sito web.
Hai bisogno di creare form di contatto in WordPress che prevedano l’invio di documenti allegati o la scelta di una data? Con Contact Form 7 puoi farlo. Vuoi creare form di contatto in WordPress che abbia una logica condizionale e che in base ad una determinata azione mostri uno specifico campo? Con Contact Form 7 puoi ovviamente farlo.
Vediamo insieme come utilizzare al meglio Contact Form 7 e come personalizzarlo per creare form di contatto in WordPress.
Creare form di contatto in WordPress : Contact Form 7 Guida
Una volta installato il plugin da Plugin > Aggiungi Nuovo > Contact Form 7 puoi vedere che l’estensione crea una nuova voce di menu all’interno del backend del tuo sito web chiamata “Contatto”. Questa sarà la voce di menu che dovrai utilizzare per andare a creare e gestire i moduli di contatto per il tuo sito web.
Di defoult il plugin crea, in fase di installazione un modulo chiamato “Modulo di Contatto” che puoi utilizzare per inizare a muovere i primi passi o, se non hai neccessità di apportare modifiche, utilizzarlo direttamente all’interno del tuo sito.
Se invece vuoi “fare sul serio” per creare un form di contatto da zero dovrà cliccare su Contatto > Aggiungi Nuovo e da cui iniziare a creare il tuo form di contatto utilizzando gli elementi proposti (nome, telefono, email etc).
All’interno dei moduli di contatto creati con Contact Form 7 puoi fare liberamente uso di codice HTML per personalizzare il tuo form di contatto. Puoi usare div, tag, inserire classi, creare tabelle e molto altro.
Aggiungere un nuovo campo in un form Contact Form 7
Per aggiungere un nuovo campo all’interno del tuo form di contatto è piuttosto facile. Ti basta infatti cliccare sopra il rettangolo del campo interessato, ad esempio “testo” e, una volta cliccato, ti si aprirà una schermata dove poter inserire tutte le indicazioni realtive al campo (nome, se richiesto etc) e cliccare su “inserisci tag”. Se per alcuni campi ci sono degli elementi che variano è anche vero che ci sono delle impostazioni che sono univoche per qualsiasi campo immesso e sono:
- Tipo di Campo: se il campo è richiesto ovvero se l’utente è obbligato alla sua compilazione per poter procedere con l’invio del form;
- Nome: il nome che andiamo a dare al campo che è anche il nome che useremo per richiamare il contenuto da mostrare nella mail da inviare all’admin del sito;
- Valore predefinito: se vogliamo impostare un placeholder, ovvero un testo predefinito all’interno del campo;
- Attributo ID/ Attributo Classe: se vogliamo definire una classe/ID al campo per poterlo poi personalizzare con i CSS;
Puoi aggiungere tutti i campi che desideri fino ad ottenere il form di cui hai bisogno e che meglio si adatta alle tue neccessità.
Come detto puoi fare libero uso del codice HTML all’interno dei moduli di contatto creati con Contact Form 7 e, buona abitudine, è farne uso per suddividere i vari campi in paragrafi (usando il tag <p> </p>) esattamente come accade nel form di esempio “Modulo di Contatto”.
Etichette per i campi in Contact Form 7
Per poter “istruire” il visitatore su cosa deve essere inserito in ogni campo puoi fare uso o delle etichette o andare ad inserire un placeholder.
Se vuoi inserire un etichetta/titolo prima del campo puoi inserire un tag in questa maniera (dove l’asterisco accanto al tipo di campo sta ad indicare l’obbligatorietà dello stesso).
|
1 2 |
<p>Inserisci qui il tuo nome * [text* nome] </p> |
Come ti spiegavo puoi anche fare uso dei placeholder per andare ad “istruire” l’utente. In questo modo il tag dovrà essere così composto
|
1 |
<p>[text* nome "Inserisci qui il tuo nome"]</p> |
Invio della mail al destinatario
Una volta che avrai creato il tuo form di contatto nella tab “Modulo” dovrai spostarti nella configurazione della tab “Mail”. Da qui infatti è fondamentale impostare l’indirizzo mail alla quale doranno essere recapitati tutti i messaggi inviati e cosa dovra contenere la mail che il sistema invia.
Devi verificare che nel campo A , sia settato l’indirizzo email corretto ovvero quello al quale il plugin invierà la corrispondenza di ogni modulo di contatto. (Il plugin Contact Form 7 di default aggiungerà l’indirizzo e-mail che è collegata al tuo sito web).
Scorri verso il basso fino alla sezione Corpo del messaggio e aggiungi i tag che hai generato e utilizzato nel tuo modulo (quelli che hai inserito nel passo precedente). Questo è fondamentale e serve che quando riceverai un’email tramite il modulo di contatto, tutte le informazioni compilate dal mittente siano inoltrate nella mail al destinatario. Se non ricordi quali siano i tag in uso all’interno del tuo form di contatto il plugin ti viene in aiuto proponendoti una lista di quelli effettivamente in uso sotto la voce “Mail” (Nei campi seguenti, puoi utilizzare questi mail-tag:)
Puoi anche andare a personalizzare il corpo del messaggio andando ad inserire del testo personalizzato che può magari aiutare il destinatario e meglio capire a cosa siano riferiti i dati ricevuti. Un esempio di form mail per il destinatario potrebbe essere questo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Da: [your-name] Recapiti di Contatto del cliente: Mail: [your-email] Cellulare: [tel] Oggetto: [your-subject] Richiesta del Cliente: [your-message] -- Questa e-mail è stata inviata da un modulo di contatto su Ecommerce con Wordpress (http://www.vendereconwp.it) |
Contact Form 7 e i messaggi di cortesia
Le ultime impostazioni da settare sono quelle che trovi nella tab Messaggi in cui è possibile personalizzare i messaggi che appaiono all’utente in determinate condizioni (errore di invio del messaggio, messaggio inviato con successo, campo obbligatorio non compilato etc).
Di defoult Contact Form 7 ci propone delle frasi di cortesia che puoi, a tuoi piacimento modificare.
Impostazioni aggiuntive in Contact Form 7
L’ultima tab di setting che trovi in fase di creazione di un modulo di contatto in WordPress è quella relativa alle impostazioni avanzate che andrai ad utilizzare solo in certe situazioni. Se per esempio vuoi far si che solo gli utenti loggati al tuo sito internet abbiano la possibilità di visualizzare il form di contatto che stai creando dovrai andare ad inserire questa stringa di codice nelle impostazioni aggiuntive del form
|
1 |
subscribers_only: true |
Estendere le funzionalità di Contact Form 7
Il plugin Contact Form 7 è davvero potentissimo perchè ti permette di creare infinite combinazioni di moduli di contatto che possono spaziare dalla semplice email di richiesta informazioni ad un form di prenotazione evento con pagamento tramite PayPal o all’invio di documentazione a seguito di un percorso guidato con logica condizionale.
Per poter personalizzare e ottenere al massimo dai tuoi form di contatto devi però far ricorso ad estensioni esterne che vanno appunto ad ampliare la funzionalità di Contact Form 7.
Eccoti una serie di estensioni che potresti trovare utili per il tuo sito web:
Datepicker per Contact Form 7 : per aggiungere un calendario ai tuoi form di contatto
Conditional Fields for Contact Form 7 : potentissima estensione per creare form con logica condizionale (se l’utente seleziona la casella A allora mostra il campo B)
PayPal & Stripe Addon : per aggiungere un elemento di pagamento al tuo form di contatto
I prodotti che ti consiglio
