Wp forms: inserire un form di contatto nel tuo sito in WordPress

Tempo di lettura: 6 minuti

Non so voi, ma io ogni volta che mi trovo nella situazione di dover prenotare un tavolo al ristorante, mandare una richiesta ad un’agenzia o semplicemente per contattare una nuova azienda preferisco sempre ricorrere al contatto online, ovvero al form di contatto o prenotazione che trovo nel sito o nell’apposita app.


Perché? Perché spesso, anzi spessissimo, mentre sto prenotando qualcosa online sto facendo un’altra cosa, a volte molte cose 😀


Ecco perché adoro i form di contatto e credo che per un sito web essere privo di un form semplice e chiaro da utilizzare sia decisamente una grave mancanza.


Ma, se non siamo degli sviluppatori PHP come facciamo ad inserire un form di contatto nel nostro sito in WordPress? La risposta è: con WPForms.


WPForms è uno dei plugin più scaricati ed utilizzati per creare bellissimo form in 5 min, ha ottime recensioni e più di 2 milioni di installazioni.

Come funziona? Vediamo passo passo come creare un form di contatto per il tuo sito in WordPress.


Prima di tutto, come abbiamo già visto per altri plugin indispensabili come Yoast o iThemes Security, dobbiamo scaricare, installare e attivare WPForms.

Anche se WPForms è un plugin gratuito, c’è da ricordare che ha moltissime sezioni utilissime e addon premium. In questo mini tutorial useremo comunque la versione free che già da sola è molto molto performante e completa.


Nella sezione Plugin clicca su Aggiungi Nuovo, poi cerca WPForms, clicca su Scarica e poi si Attiva.
Lo troverai nella tua dashboard all’interno della sidebar a sinistra ( vedi foto)

Ora spostati con il mouse nella voce WPForms e vedrai apparire un menu, clicca su Aggiungi nuovo (vedi foto)

Si aprirà questa schermata:

Quello che dovrai fare adesso è inserire il nome del tuo modulo nella barra in alto e selezionare un campo:

  • Modulo vuoto: per creare un form da zero
  • Semplice modulo di contatto, Modulo di iscrizione alla newsletter e Modulo per suggerimenti: ti permettono di utilizzare un layout già impostato e di modificarlo a tuo piacere.

Oggi utilizzeremo il primo campo, Modulo vuoto, iniziando da zero imparerai ad utilizzare al meglio questo plugin e a scoprirne le peculiarità.

Ok, dopo aver inserito il nome del modulo da creare, clicca su Modulo vuoto, vedrai questa dashboard:

Si presenta così:

  • a destra una sidebar con 5 sezioni: Impostazioni (la schermata precedente in cui possiamo scegliere il tipo di modulo che vogliamo), Campi (la schermata che vedi nella foto sopra, dove puoi inserire i campi, appunti, del form), Impostazioni, marketing e pagamenti;
  • al centro una dashboard divisa a metà, a sinistra il menu contestuale diverso per ogni sezione, e a destra l’anteprima del form che stai creando;
  • in alto troverai dei pulsanti: la x per uscire, il pulsante Salva e il pulsante Embed, che vedremo dopo aver creato il nostro form a cosa servirà.

Iniziamo ad inserire qualche campo:

Clicca su riga riga di testo, poi spostati nella riga che si è generata nell’anteprima a destra e cliccaci sopra. Si aprirà a destra una mini-menu dove poter cambiare l’etichetta, il placeholder, la lunghezza dei caratteri che andranno inseriti nell’input, etc. (vedi immagine sotto)

Dopo aver cambiato l’etichetta (puoi anche decidere di eliminarla se vuoi accedendo al sotto menu Opzioni avanzate) puoi decidere se renderla obbligatoria spuntando la casella Obbligatorio, appunto, e di inserire una descrizione che apparirà al di sotto del campo input.

All’interno delle opzioni avanzate puoi, anche:

  • ingrandire o rimpicciolire le dimensioni del campo
  • inserire un placeholder (apparirà all’interno del campo input e sparirà nel momento in cui l’utente inizierà a scrivere all’interno, può essere utilizzata per descrivere il campo stesso al posto dell’etichetta)
  • impostare una lunghezza di caratteri limite
  • impostare un valore predefinito assegnando al campo un valore prestabilito come nome, cognome, data, etc
  • assegnare una classe CSS per poter modificare in seguito manualmente lo stile del campo
  • modificare il layout (cliccando su mostra i layout) potrai impostare delle colonne e decidere in quale colonna o riga dovrà posizionarsi il campo che stai modificando
  • infine puoi modificare ed inserire una maschera di inserimento ovvero puoi decidere per esempio di far apparire delle parentesi o degli underscore quando l’utente inserisce lettere e numeri nell’input (visita questo link per approfondire le maschere: maschere)

Prova ora ad inserire un campo differente come una selezione multipla, un menu a tendina o una mail, vedrai che per inserire campi diversi basterà eseguire sempre gli stessi semplici passi:

  • clicca sul campo che vuoi inserire
  • clicca sul campo che si è generato nell’anteprima
  • modifica dal menu contestuale e salva

Facile, vero?

Bene, vediamo gli altri menu:

  • Marketing e Pagamenti: sono servizi premium che WPForms mette a disposizione previo acquisto del servizio, tra i quali possiamo trovare i famosi Stripe, PayPal, MailChimp, etc
  • Impostazioni (stranamente questo plugin ha due sezioni Impostazioni, la prima delle quali non è nient’altro che la sezione iniziale dalla quale siamo partiti per iniziare a creare il form, quindi ovviamente parlerò della seconda 🙂 ) presenta 3 voci nella versione gratis:
    • Generali: ci consente di cambiare il nome e descrizione del form, assegnare classi CSS, modificare il testo del pulsante Invia e del testo Invio in corso…, abilitare l’antispam HoneyPot (anche se io ti consiglio di usare i reCaptcha di Google), la compilazione automatica dei campi e AJAX (permette alla pagina di inviare i dati senza ricaricare l’URL)
    • Notifiche: dove possiamo (anzi dobbiamo) inserire la mail di destinazione del form e cambiare la struttura della mail che riceveremo al momento dell’invio dal form scegliendo tra gli smart tag cosa vogliamo inserire (smart tag: trasformano il testo in un collegamento ‘intelligente’)
    • Conferma: possiamo modificare il messaggio di ringraziamento o impostare un redirect al termine dell’invio del messaggio

Il più è fatto, siamo pronti a pubblicare il nostro form:

  • Clicca su salva in alto a destra
  • Poi su Embed

Apparirà una piccola finestra con uno shortcode, dovrai copiarlo.

Ora puoi uscire dalla dashboard di WPFroms (cliccando semplicemente sulla X in alto a destra).

Non ti manca che incollare lo shortcode all’interno della pagina in cui vorrai far apparire il form – per farlo ti basterà incollare lo shortcode copiato in precedenza all’interno di un blocco Gutenberg Shortcode, appunto – ed in gioco è fatto!

WPForms è uno dei plugin che non può mai mancare quando progetto e realizzo un sito web, un blog o un e-commerce in WordPress per la sua facilità di utilizzo, la sua velocità e la sua stabilità!

E tu, lo hai mai utilizzato per i tuoi siti web? Condividi qui sotto la tua esperienza con questo plugin, aiuterai la community di The Fantastica WP a saperne di più 😉

Ciao!

Lascia un commento

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