migliorare-user-experience-ux-per-siti-web

Contact Form 7 è uno dei plug-in più conosciuti per creare un form in WordPress.  Le sue caratteristiche permettono di:

  • Creare e gestire più moduli di contatto
  • Personalizzare facilmente i campi del modulo
  • Utilizzare un semplice markup per modificare il contenuto della mail
  • Inserire i moduli in qualsiasi pagina o articolo utilizzando uno Shortcode
  • il plugin supporta il filtro antispam di Akismet, l’invio basato su Ajax e CAPTCHA
  • possedere un sacco di estensioni di terze parti per aggiungere funzionalità aggiuntive

Vediamo ora come impostare Contact Form 7 sul tuo sito Web WordPress.

Come tutti i plugin il primo step è l’installazione. Semplicemente vai su PLUGIN >AGGIUNGI NUOVO e cerca sulla barra di ricerca dei plugin Contact Form 7. INSTALLA e ATTIVA il plugin. Una volta installato troverai il plugin nella dashboard di WordPress sulla nuova sezione CONTATTO.

Come creare un form in WordPress con Contact Form 7

Clicca su CONTATTO> MODULI DI CONTATTO. Qui vedrai il pannello di amministrazione centrale in cui puoi gestire i vari moduli di contatto che avrai creato.

Inizialmente troverai solo il modulo di contatto predefinito realizzato direttamente da Contact Form 7, etichettato come “Contact form 1″. Esso contiene tutti i campi necessari per un modulo di contatto di base. Questo form è pronto per l’uso e può essere già inserito in qualsiasi pagina e post del tuo sito web, se lo desideri (più avanti nell’articolo ti spiegherò come).

Per creare invece un tuo form con i campi di cui necessiti devi selezionare “Aggiungi nuovo” e assegnare un nome al nuovo modulo di contatto, quindi scorrere verso il basso fino al modulo creato.

Qui cliccando sul tuo form di contatto appena creato ti troverai nella tab MODULO dove potrai impostare il form come preferisci.
Il modello definisce i vari campi che verranno visualizzati nel modulo e le labels (etichette) visualizzate accanto a tali campi.
Per impostazione predefinita, Contact Form 7 aggiunge automaticamente dei campi ai nuovi form: nome, email, oggetto, messaggio e invio.

Probabilmente questi sono campi che vorrai mantenere nel tuo form essendo quelli base, tuttavia potresti voler aggiungere campi extra, a seconda delle esigenze del tuo sito. Per fare ciò, è possibile selezionare il pulsante appropriato, tra i vari che trovi soprai il modello, per generare il tag form corretto. Ad esempio, per aggiungere un campo URL, basta fare clic sul pulsante URL.

Per aggiungere un’etichetta al tuo campo, ti basta copiare l’HTML che accompagna un tag form dagli altri campi. Ad esempio, quando abbiamo fatto clic sul pulsante URL, Contact Form 7 ha pre-generato il tag form [url url-933]. Abbiamo quindi aggiunto l’HTML in più per l’etichetta, quindi il campo dell’URL alla fine dovrà essere ome gli altri, ossia:

[url url-933] </ label>

Ora, con lo stesso procedimento, puoi aggiungere tutti i campi aggiuntivi necessari per il modulo di contatto del tuo sito. Ricorda di fare clic su Salva nella parte inferiore della pagina quando hai finito.

Configurare la mail per ricevere le notifiche dei messaggi ricevuti dal form

Gli eventuali campi aggiunti al modulo di contatto non si riflettono automaticamente nelle impostazioni del modello di notifica e-mail. Una volta terminata la personalizzazione del form quindi devi passare alla tab MAIL dove troverai il modello per l’email che riceverai quando viene inviato un modulo di contatto.

Nel campo A (il destinatario del messaggio), verifica che l’indirizzo email sia corretto, poiché è qui che verrà inviata la corrispondenza di chi compila il tuo form. (Contact Form 7 di default aggiungerà l’e-mail che hai collegato al tuo sito web WordPress).

Scorri verso il basso fino alla sezione Corpo del messaggio e aggiungi i tag modulo aggiuntivi che hai generato per il tuo form. Ciò garantirà che quando riceverai un’e-mail tramite il modulo di contatto, visualizzerai tutte le informazioni che hai chiesto al mittente di condividere.

Per aggiungere un campo al modello di email, copia semplicemente il campo modulo dal modello. Puoi anche aggiungere un testo normale attorno ai tuoi campi.

Infine, una volta compilati a tuo piacimento i vari campi del modello mail, salva le modifiche a fondo pagina.

Inserire un form in una pagina o articolo del tuo sito WordPress

Ora che sai come configurare Contact Form 7, creare un modulo di contatto e modificare le impostazioni della posta rimane l’ultimo passaggio del processo: inserire il form in una pagina o un post sul tuo sito Web WordPress.

Seleziona Contatto> Moduli di contatto. Quindi copia lo shortcode accanto al form che vuoi aggiungere al tuo sito.

Poi, apri la pagina o il post in cui desideri inserire il modulo di contatto. Incolla lo shortcode nell’area di testo dell’editor classico di WordPress in cui desideri visualizzare il modulo di contatto. Se usi editor diversi dal classico, come Gutenberg o Fusion Builder ad esempio, usa lo snippet Code Block per aggiungere il tuo shortcode dove desideri.

Visualizza l’anteprima della pagina e, se sei soddisfatto dei risultati, fai clic su Pubblica. Una volta che il form è attivo, testalo per verificare che funzioni. La risposta del modulo di contatto deve essere inviata direttamente all’indirizzo e-mail specificato nelle impostazioni di posta. Se la tua casella di posta rimane vuota, controlla la posta indesiderata / spam prima di iniziare la risoluzione dei problemi.

Per quanto riguarda la personalizzazione grafica, se conosci l’html e css potrai personalizzare direttamente il form nella tab Modulo sul modello generale che hai creato, per quanto riguarda l’html e poi con il css andrai a modificare le varie classi o id che ti sei creato.
Come alternativa, se non conosci il linguaggio html e css, ci sono vari plugin add-on (molti gratuiti) per Contact Form 7 che permettono di personalizzare e ampliare le funzionalità di quest’ultimo.