Come creare un contact form con Google form

Recentemente sono passato alla combo Jekyll + Netlify per rilasciare siti statici. Tra i vantaggi di questo approccio:

  • facile da sviluppare e flessibile
  • tempo di caricamento super veloce
  • architettura scalabile
  • hosting affidabile
  • sicuro

Problema

Netlify permette di creare un contact form html funzionante semplicemente usando i tag che trovate nella loro documentazione. L’ho provato nella versione gratuita ed è un ottimo servizio. Superati circa 100 contatti al mese, automaticamente viene fatto l’upgrade ad un abbonamento a consumo. Non sempre però c’è la disponibilità da parte del cliente a pagare mensilmente per ricevere delle email dal proprio sito.
Esistono diversi servizi di terze parti per la creazione di contact form: https://www.formstack.com o https://www.jotform.com per citarne alcuni. Questi servizi hanno dei limiti che possono essere sbloccati sottoscrivendo un abbonamento mensile.

Molti clienti non hanno però un traffico di utenti tale da giustificare tali spese per cui mi sono dovuto mettere alla ricerca di una soluzione smart e gratuita. Di soluzioni ce ne sarebbero molte, ad esempio potrei utilizzare PHPMailer e creare un mio servizio di spedizione email ma per farlo devo caricare il pacchetto su un server e poi gestire il servizio, il che richiede tempo e risorse.

Soluzione

Ho scelto quindi di utilizzare Google Form per la creazione di un questionario da usare come contact form e Google Spreadsheet per archiviare le risposte e inviare una mail all’amministratore ogni volta che qualcuno compila il form sul suo sito.

Creazione di un questionario

Come creare un contact form con Google Form la prima cosa da fare è creare un questionario a questo link e cliccare su Crea un nuovo modulo vuoto (dovete avere un account google):

La schermata principale di Google Form consente di scegliere tra diversi template. A noi interessa un template vuoto perché i campi verranno stilizzati sul nostro sito.

Un volta definiti i campi del nostro questionario, possiamo cliccare su Risposte, menu opzioni con tre pallini in alto a destra e poi su Seleziona destinazione per la risposta. Questo ci consentirà di salvare le risposte su un Foglio di calcolo. Si aprirà un menù con due opzioni, scegliete la prima e assegnate un nome al foglio di lavoro. Cliccate su Crea.

Il foglio di lavoro è stato creato e collegato al questionario. Per visualizzarlo, posizionatevi di nuovo sul tab Risposte e cliccate sull’icona di Google Spreadsheet.

Invio delle email

Quello che dobbiamo fare è avvisare l’amministratore del sito ogni volta che qualcuno compila il form sul nostro sito (come integrarlo lo vediamo più avanti). Per farlo utilizzeremo App Scripts, una piattaforma di scripting sviluppata da Google.

Dal nostro foglio di calcolo con le risposte, clicchiamo su Strumenti → Editor di script

Si aprirà l’editor di script collegato a quel foglio di calcolo:

L’editor di script di Google

Il nostro script è composto da due componenti

  • Codice.gs – È dove avviene l’invio della mail
  • form_html – È dove formattiamo l’email

Il codice ve lo copio qui sotto, è molto semplice: si tratta di prendere la riga che viene attivata quando il foglio si aggiorna ad ogni nuovo contatto, e da quella riga prendere i dati che ci interessa inviare per email. Poi utilizzeremo la classe MailApp e il metodo sendEmail per inviare la mail. Ecco il codice, potete copiare e incollarlo modificando la mail del destinatario e i campi da utilizzare.

function onFormSubmit(e) {
  var htmlBody = HtmlService.createTemplateFromFile('html_form');  
  var activerange = SpreadsheetApp.getActiveSheet().getActiveRange();
  var row = activerange.getValues()[0];


  htmlBody.name = row[1];
  htmlBody.azienda = row[2];
  htmlBody.mail = row[2];
  htmlBody.servizio = row[3];
  htmlBody.body = row[4];
  var email_html = htmlBody.evaluate().getContent();
  
  MailApp.sendEmail({to: "myemail@gmail.com",subject: "Nuovo contatto dal sito",htmlBody: email_html})
}

Per creare il template della mail, cliccate su File → Nuovo → File html e dategli un nome (ricordate che deve essere uguale al nome che passate alla variabile htmlBody (riga 2).

Il template lo potete formattare come volete, i campi dinamici della mail dovete scriverli con gli stessi nomi che avete utilizzato nello script precedente e sono quelli racchiusi dai tag

Una volta formattato il template, salvate e posizionatevi su Codice.gs e cliccate sul tasto Play: questo servirà a fornire i permessi necessari allo script per inviare la mail. Ricordate che se fare delle modifiche dovete cliccare di nuovo sul tasto Play.

Creazione di un attivatore

Ora collegatevi sulla dashboard di Google App Scripts e selezionate dal vostro progetto la voce Attivatori

Dalla pagina degli Attivatori, cliccate sul pulsante Aggiungi attivatore

Selezionate dal menu Seleziona il tipo di evento, la voce All’invio del modulo e poi su Salva. Le altre impostazioni potete lasciarle di Default, ma assicuratevi che siano come quelle che vedete in schermata.

Fatto. Ora il nostro contact form è configurato. Manca la parte più importante, integrarlo nel nostro sito web.

Come trasformare il Form di Google in un form html

Quello che va fatto è cercare nel codice html del questionario, i nomi dei campi e riprodurli nella nostra pagina html, il processo è abbastanza semplice ma per comodità vi consiglio questo strumento davvero utilissimo: vi basta copiare il link di anteprima del vostro form e il sito vi genererà il codice da copiare / incollare nella vostra pagina web. L’anteprima del form la potete vedere cliccando sull’icona a forma di occhio in alto a destra del vostro questionario. Il link di anteprima ha questa forma:

https://docs.google.com/forms/d/e/1FAIpQLSeaozKyLDOdh4FF_eCjXdhM3e_8LCfS3vs0PdpasrdOKYzVMQ/viewform

Una volta copiato il link dell’anteprima, incollatelo su questo sito web e poi cliccate su Get the Html

Vi basterà copiare / incollare il codice html e il codice js nella pagina html del vostro sito per vedere il vostro contact form funzionante.

Credo di non aver tralasciato nulla in questa guida, per qualsiasi domanda potete usare i commenti o scrivermi per email. Buon divertimento!

Pubblicato da Roberto Di Marco

Sviluppatore di temi e plugin per Wordpress. Ho una laurea in Psicologia, che mi ha spinto ad interessarmi agli aspetti legati all'usabilità e all'esperienza d'uso dei prodotti digitali.