Introduzione

Prima di spiegarti come creare un contact form con Google per il tuo sito web, faccio una premessa doverosa perché è una soluzione creativa che ho dovuto implementare in una determinata situazione.

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 
• 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 queste spese per cui mi sono dovuto mettere alla ricerca di una soluzione gratuita. Ne esistono 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.

Creare un contact form con Google per il tuo sito web

Per creare un contact form con Google per il tuo sito web la prima cosa da fare è creare un questionario a questo link e cliccare su Crea un nuovo modulo vuoto (dovete avere un account google):

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:

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('form_html');
    var activerange = SpreadsheetApp.getActiveSheet().getActiveRange();
    var row = activerange.getValues()[0];
    htmlBody.nome = row[1];
    htmlBody.cognome = row[2];
    htmlBody.email = row[2];
    htmlBody.messaggio = row[3];
    htmlBody.body = row[4];
    
    MailApp.sendEmail({
        to: "**************@gmail.com",
        subject: "Nuovo contatto dal sito",
        htmlBody: htmlBody
    })
}

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

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Nome : <? =Nome ?>
    Cognome : <? =Cognome ?>
    Email : <? =Email ?>
    Messaggio : <? =Messaggio ?>
  </body>
</html>

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.

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.

Il codice JS va leggermente modificato

$('#bootstrapForm').submit(function (event) {
    event.preventDefault()
    var extraData = {}
    $('#bootstrapForm').ajaxSubmit({
        url: "https://docs.google.com/forms/d/e/1FAIpQLSeDbWVYwD9m8iv6GqgcHumwFQ4bVOgUFRonAnOJAfMeMWOk3A/formResponse",
        data: $("#bootstrapForm").serialize(),
        dataType: 'jsonp',  // This won't really work. It's just to use a GET instead of a POST to allow cookies from different domain.
        statusCode: {
            0: function(o) {
                console.log(0), console.log(o)
            },
            200: function(o) {
                console.log(200), console.log(o)
            },
            403: function(o) {
                console.log(403), console.log(o)
            },
            404: function(o) {
                console.log(404), console.log(o)
            }
        },
        error: function () {
            // Submit of form should be successful but JSONP callback will fail because Google Forms
            // does not support it, so this is handled as a failure.
            alert('Form Submitted. Thanks.')
            // You can also redirect the user to a custom thank-you page:
            // window.location = 'http://www.mydomain.com/thankyoupage.html'
        }
    })
})

Demo

A questo link potete vedere una demo del form

Abbiamo visto come creare un contact form con Google per il tuo sito web, per qualsiasi domanda potete usare i commenti o scrivermi per email. Buon divertimento!