Pubblicato il 30/05/12 - aggiornato il  | 16 commenti :

Come creare un modulo di contatto con Google Drive.

Come creare un modulo di contatto per ricevere messaggi email con Google Drive (Google Documenti) e ricevere immediatamente una notifica per una eventuale risposta.
Non è opportuno inserire il proprio indirizzo email in una pagina del blog perché i bot di spam potrebbero rilevarlo, metterlo in un database e inviarci tonnellate di email spazzatura. Devo però dire che questo fenomeno in questi ultimi tempi sta un po' segnando il passo e ho notato una certa diminuzione dei messaggi di spam o forse sarà perché ci sto più attento a condividere il mio indirizzo email.

E' però sempre consigliabile creare una pagina di contatto per interagire con i lettori in forma più privata. A tale proposito forse è meglio che faccia una precisazione. Il modulo di contatto di questo blog può essere usato dai lettori solo nel caso di messaggi che non possano essere postati nei commenti per questioni di privacy. Purtroppo ci sono alcuni casi isolati che ne abusano. Il risultato è che spesso con questo sistema non ottengono le risposte che si aspettano visto che i messaggi mi arrivano via email, li apro talvolta con il cellulare e quindi mi è difficile fare ricerche nel sito, linkare articoli o incollare codici.

Le pagine di contatto possono essere create usando alcuni ottimi servizi di cui mi sono occupato in passato come 123Contact Form e Kontactr. In questo articolo vedremo come sia possibile usare Google Drive (ex Google Documenti) per creare un modulo di contatto super personalizzato.

Dopo aver effettuato l'accesso a Google Drive si va su Crea > Modulo

creare-modulo-google-drive

Nella pagina che si apre dobbiamo inserire il nome da dare al modulo e la sua descrizione




nome-modulo-descrizione

I vari campi di domanda vanno riempiti con quello che deve vedere il lettore tipo "Il tuo nome", "Il tuo indirizzo email, "Il tuo sito web", ecc. Ciascun campo può essere reso obbligatorio mettendo la flag nell'apposito quadratino. Nel menù a discesa si può selezionare il tipo di domanda

modulo-contatto-google-drive

Per esempio può essere scelto Testo quando si richiede l'immissione del nome o della email mentre per il messaggio vero e proprio è opportuno scegliere Testo del paragrafo per avere uno spazio maggiore di inserimento. Per aggiungere una nuova domanda si può andare sulla destra e cliccare sull'icona di Duplica oppure si può andare in alto a sinistra su Aggiungi elemento

aggiungi-elemento-modulo

selezionandone il tipo dal menù a discesa. Andando su Tema possiamo selezionare uno dei 97 layout a nostra disposizione. Di default viene usato il tema Plain che è il più semplice.

Si può sempre rieditare ciascun campo cliccando sull'icona della matita o cancellarlo andando su quella del cestino. Quando si è terminata l'operazione si può andare in alto a destra su Salva e quindi su Altre Azioni > Incorpora per ottenere il codice dell'IFrame da incollare nel blog

incorporare-modulo-nel-blog

Il codice verrà visualizzato in una finestra popup e potrà essere incollato in una pagina statica del blog. Si va quindi nella Bacheca su Pagine > Nuova pagina > Pagina vuota,

modulo-contatto-pagina-statica

si clicca su HTML e si incolla il codice ottenuto da Google Drive. Prima di pubblicare la pagina è consigliabile andare su Anteprima per vedere l'aspetto del modulo nel layout del blog. E' possibile che debbano essere modificate le dimensioni per meglio adattarlo alla grafica del sito

dimensioni-modulo-contatto

Finalmente si va su Pubblica e si visualizzerà il modulo con il tema da noi scelto

modulo-google-drive-inserito-pagina-statica

Adesso non resta che creare un sistema di notifiche per permetterci di sapere immediatamente quando un lettore ci ha inviato un messaggio. Si torna su Google Drive e si clicca sul file del modulo di contatto. Si aprirà una pagina del formato di foglio elettronico che poi conterrà riga per riga tutti i dati dei messaggi che riceveremo. Si va su Strumenti > Regole di notifica

regole-notifica-modulo-google-drive 

e si imposta il modulo in modo da avere una notifica quando un "utente invia un modulo"

configurazione-notifiche-google-drive

e di essere avvisati immediatamente tramite email. Si va su Salva per terminare la configurazione. Per essere sicuri che il sistema funzioni inserite un vostro indirizzo email e un messaggio di prova. Nel mio test mi è arrivata la notifica dopo circa trenta secondi. Cliccando sul link della email che si riceve, si aprirà il foglio elettronico di Google Drive in cui sarà possibile conoscere il nome di chi ci ha contattato, il suo indirizzo email e il suo messaggio.

foglio-elettronico-modulo-contatto

Le colonne del foglio elettronico relativo al modulo di contatto possono essere ridimensionate per essere adattate al campo e con questo sistema si avrà un archivio completamente gestibile di tutti i messaggi che si sono ricevuti tramite il modulo di contatto creato con Google Drive.

Aggiornamento importante sul modulo di contatto creato con Google Drive: Di default il modulo viene creato senza opzioni di condivisione e quindi potrà essere visto solo dal proprietario. Ovviamente questo non consentirebbe di utilizzarlo da parte dei visitatori. Bisogna allora andare su Condividi in alto a destra quindi su Cambia e scegliere l'opzione Pubblica sul web in modo che possa essere visualizzato da chiunque abbia accesso a internet. 


Per essere sicuri che i visitatori vedranno correttamente il modulo, basta copiarne l'indirizzo dal "Link per condividere" e incollarlo in una scheda aperta con Modalità di Navigazione in incognito.



16 commenti :

  1. Ti segnalo anche un ottimo servizio offerto da h**p://www.jotform.com/.

    Lo uso da sempre sul mio Blog e mai un problema.

    Ciao Parsi. :)

    RispondiElimina
  2. Ciao Ernesto
    l'ho provato e devo dire che mi piace... ho solo un problema (come al solito) ho testato che le notifiche le manda(ovviamente) alla casella di posta gmail, c'è la possibilità di mandarle ad altro indirizzo in quanto io nn uso quella casella? io ho provato a cercare ma nn ho trovato il modo... :(

    RispondiElimina
  3. @LeNny
    Jotform lo avevo già recensito tempo fa
    http://www.ideepercomputeredinternet.com/2009/04/jotform-per-creare-moduli-da-inserire.html
    mi sono dimenticato di inserire il link del post nell'articolo :)

    @Pennywise
    Anche io non ho trovato alternative alle notifiche verso la email collegata a Google Drive. Comunque puoi sempre reindirizzare la email di Google Drive verso un altro account senza problemi
    http://www.ideepercomputeredinternet.com/2009/07/come-usare-un-solo-account-gmail-per.html
    Si può fare anche se come indirizzo principale usi Hotmail o un programma come Outlook.

    RispondiElimina
    Risposte
    1. ti ringrazio ho risolto inoltrando in automatico la posta da gmail a hotmail...

      Elimina
  4. @Caterina
    Leggi l'aggiornamento alla fine del post perché altrimenti nessuno visualizzerà il tuo modulo di contatto.

    RispondiElimina
  5. Grande Ernesto! bella funzione questa, grazie per avermi illuminato! :)

    RispondiElimina
  6. Ottimo post, io lo utilizzo per ricevere i curriculum. Una domanda: qualcuno è riuscito a trovare il modo di dare la possibilità di farsi inviare anche un allegato?

    RispondiElimina
  7. Grazie, in effetti sarebbe una funzione vecchia, ma per far allegare dei file in un'eventuale richiesta sarebbe utile!

    RispondiElimina
  8. @TobiaAlberti
    Su Blogger non si possono fare questo tipo di cose. Potresti sempre cercare un servizio apposito ma personalmente non ne conosco.

    RispondiElimina
  9. Come si fa a togliere quel "brutto" problema alla fine dell'invio del modulo? Una volta che invio il modulo e premo "submit" si vede la schermata col messaggio di avvenuta ricezione all'interno dell'iframe e non si "centra" al contenuto del blog. Questo è il mio blog:
    http://www.visionsocialmediamarketing.com - se qualcuno può aiutarmi lo ringrazio!

    RispondiElimina
    Risposte
    1. @# Probabile che dipenda dal tuo modello. Per centrare l'iframe puoi aggiungere una riga all'inizio e una riga alla fine cioè
      <div align="center"> prima del codice e </div> alla sua fine

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy