lunedì 6 giugno 2016

Come creare un form di contatti su wordpress

Oggi vediamo come creare un semplice form di contatti su wordpress tramite il plugin Form Maker.

form contatti wordpress

Installiamo ed attiviamo il plugin Form Maker.
https://web-dorado.com/it/products/wordpress-form.html

Questo componente è gratuito se si utilizzano le funzioni base, mentre diventa a pagamento per poterlo usare al 100% delle sue funzionalità.
Per un semplice form di contatti è comunque più che sufficiente la versione free.

Dopo aver attivato Form Maker, lo troveremo nel menù di sinistra del pannello di amministrazione di wordpress.
Clicchiamo dunque su Form Maker e poi su Manager.

Il plugin mostrerà un po' di form già esistenti, ma noi per fare una prova, creiamone uno nuovo cliccando su Add new.

Come creare un form di contatti su wordpress

Nella pagina che si aprirà, inseriamo il titolo del form (title) e scegliamo il tema (theme) , poi clicchiamo sul bottone Add a new field per aggiungere un nuovo campo al nostro form dei contatti.

add a new field

Si aprirà una finestra dove avremo le seguenti opzioni:
  • Custom HTML
  • Text input
  • Multiple Choice    
  • Single Choice
  • Survey Tools    
  • Time and Date
  • Select Box    
  • File Upload
  • Section Break    
  • Page Break
  • Map    
  • Payment
  • Captcha    
  • Button

Scegliamo un Text input e lasciamo spuntato Simple text, compiliamo il campo Field label mettendoci il nome del campo del form (ad esempio il Nome), spuntiamo la voce Required per rendere obbligatorio il campo, infine clicchiamo su Save.

nuovo campo form

Ripetiamo l'operazione per tutti i campi necessari.
Nel nostro esempio creiamo un campo Nome, un campo Cognome, ed un campo Email.
Per il campo email, che è sempre Text input, selezioniamo come Field type E-mail, in modo da avere un campo di tipo email con tutti i controlli del caso.

Una volta inseriti tutti i campi del nostro form, andiami in Form options.
In general options assicuriamoci che il form sia pubblicato (published), poi se vogliamo, abilitatiamo Save data per salvare nel database i dati inseriti dagli utenti.

Andiamo poi in email options, spuntiamo Send email e nella voce Email to send submissions to mettiamo l'indirizzo email di chi deve ricevere i dati del form contatti wordpress.
Scegliamo un eventuale email from (o lasciamo che il from sia la mail di chi compila il form), mettiamo eventuali CC o BCC, poi compiliamo il titolo della mail (subject) ed eventualmente personalizziamo anche il corpo della mail (Custom Text in Email For Administrator).

personalizza email

Se vogliamo mandare anche una email di conferma all'utente che compila il form, personalizziamo la sezione Email to User, spuntando Send to E-mail e compilando tutti i campi necessari.

La sezione Actions after submission consente invece di personalizzare la pagina di riepilogo dopo l'invio del form, scegliendo tra le seguenti opzioni:
  • Stay on Form: l'utente rimane nel form e riceve un messaggio di conferma a video sopra di esso
  • Post: l'utente finisce in un post
  • Page: l'utente finisce in una pagina
  • Custom Text: l'utente vede un testo di conferma personalizzato
  • URL: l'utente finisce in un url esterno

Vediamo infine la sezione Mysql mapping, che consente di salvare i dati nel form in un database mysql.
Prima di tutto occorre creare preventivamente la tabella sql da phpmyadmin.
Nel mio caso ho creato la tabella nel db di wordpress chiamandola wp_contatti, creando dei campi di tipo varchar: nome, cognome, email, id.
Poi, in Form maker, basta cliccare su Add query e su Connection type scegliere local (se il db è in locale) e poi cliccare su Connect.
Selezionare la tabella (select a table) creata in precedenza su phpmyadmin, poi andare a mappare i singoli campi della tabella mysql con quelli del form.
Infine, cliccare su Generate query e su Save.

salvare dati nel db

Così facendo avremo mappato il nostro form di contatti wordpress alla nostra tabella mysql, ed ogni volta che un utente compilerà il form, i dati inseriti oltre a venire spediti via email, verranno salvati nel nostro database mysql.

Se con il form abbiamo finito, clicchiamo su Save per memorizzare tutte le modifiche.

Vediamo infine come inserire il nostro form contatti dentro una pagina o un post wordpress.
Tornaimo su Form Maker nella sezione Manager per vedere l'elenco dei form esistenti.
Affianco al nome del nostro form (nel mio caso si chiama Contatti) ci sarà lo shortcode da inserire dentro i post o in una pagina wordpress, che nel mio caso è:
[Form id="10"]

Se non sai come usare gli shortcode leggi qui.

Se avrai fatto tutto correttamente, ora sul tuo sito wordpress avrai una bellissima pagina dei contatti :)


Piaciuto l'articolo? Lascia un commento!

EmoticonEmoticon