Inserisci il modulo Google in un sito web Hugo

A volte è necessario aggiungere un invio di modulo al proprio sito web basato su Hugo.

Indice

Non ogni secondo venerdì, ma comunque… Abbiamo due approcci principali

‘postman consegnando la posta’

Opzioni comuni per i servizi di invio form

  1. Utilizzare un servizio di invio form web, come https://getform.io ($15.83/mese per il piano Start) o https://kwesforms.com (19/mese), o https://form-data.com ($10/1k invii). Esistono alcune alternative con circa 100 invii gratuiti al mese. Ma comunque, è necessario proteggersi dallo spam. Vedere l’annoyante reCapcha.

  2. Google Forms. Semplice e facile da usare.

Ecco l’elenco dei passaggi per configurare l’invio di form da un sito web Hugo a Google Forms.

Configurare il form su Google

Vai alla pagina di configurazione di Google Forms: https://docs.google.com/forms/u/0/

Crea un webform con alcuni campi come

  • Email di contatto
  • Nome
  • Messaggio

Configurazione del form Google per l’invio da un sito web generato da Hugo

Poi, nell’angolo in alto a destra dello schermo, c’è un pulsante triple punti verticali rotondo. Copia l’HTML di incorporamento, dovrebbe essere simile a questo:

<iframe src="https://docs.google.com/forms/d/e/qwesomenumbersandlettersqwe/viewform?embedded=true"
width="640" height="1142" frameborder="0" marginheight="0" marginwidth="0">Caricamento...</iframe>

Menu contestuale di Google Forms

Configurazione del sito web Hugo

rawhtml

Assicurati di avere il shortcode rawhtml.

Nel file layouts/shortcodes/rawhtml.html

<!-- raw html -->
{{ .Inner }}

Creare la pagina di contatto

Puoi aggiungere questo a qualsiasi pagina, ma proviamo prima sulla pagina contattaci

hugo new contact-us.md

Aggiungi alla fine di questa pagina l’HTML incorporato che hai copiato da Google:

rawhtml su un sito web Hugo

Testare la pagina di contatto del sito web Hugo

Per testare il sito web Hugo localmente:

hugo server -D

Dopo che Hugo dice standard

Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Vai a: http://localhost:1313/contact-us

e vedi se funziona l’invio o no

testo alternativo

Esiste anche un’impostazione del form che limita 1 invio per mittente. Che richiede un login Google. E questa impostazione è attiva per default.

Potresti quindi volerla disattivare.

Vedere i dati dei form inviati su Google Forms o fogli di calcolo

Dopo aver cliccato su “invia”, vai a Google Forms

e vedrai i dettagli inviati.

testo alternativo

o su Google Fogli di calcolo:

testo alternativo

Una pagina contattami sul mio sito web utilizza esattamente questo metodo.