Skicka in Google Formulär på Hugo-webbplats

Ibland måste du lägga till en formulärinlämning på din Hugo-baserade webbplats.

Sidinnehåll

Inte varannan fredag, men ändå… Vi har två huvudmetoder

brevbärare som levererar post

Vanliga alternativ för formulärskickningstjänster

  1. Använd någon form av webbformulärsskickningstjänst, som https://getform.io ($15,83/månad för Start-plan) eller https://kwesforms.com (19/månad), eller https://form-data.com ($10/1k skickningar). Det finns några alternativ med till exempel 100 gratis skickningar per månad. Men ändå - du måste skydda dig mot spam. Se några irriterande reCapcha.

  2. Google-formulär. Enkelt och bra.

Här är en lista över steg för att konfigurera skicka formulär från Hugo-webbplats till Google-formulär.

Konfigurera formuläret i Google

Gå till Google-formulär konfigurationssidan: https://docs.google.com/forms/u/0/

Skapa ett webbformulär med några fält som

  • Kontaktmail
  • Namn
  • Meddelande

Google-formulärskonfiguration för skickning från en Hugo-genererad webbplats

Därefter i det övre högra hörnet på skärmen finns en knapp med tre vertikala punkter i en cirkel. Kopiera inbäddad HTML, den bör se ut ungefär så här:

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

Google-formulärmeny

Hugo-webbplatskonfiguration

rawhtml

Se till att du har rawhtml kortkod.

I filen layouts/shortcodes/rawhtml.html

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

Skapa kontaktssida

Du kan lägga till detta på vilken sida som helst, men låt oss prova på kontakta-oss-sidan först

hugo new contact-us.md

Lägg till slutet av denna sida den inbäddade HTML:n du kopierade från Google:

rawhtml på Hugo-webbplats

Testa din Hugo-webbplats kontaktssida

För att testa Hugo-webbplatsen lokalt:

hugo server -D

Efter att Hugo säger 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

gå till: http://localhost:1313/contact-us

och se om skickningen fungerar eller inte

alt text

Det finns också en formulärinställning som begränsar 1 skickning per avsändare. Detta kräver en Google-inloggning. Och denna inställning är PÅ som standard.

Du kanske vill stänga av den.

Se dina skickade formulärdata i Google-formulär eller kalkylblad

Efter att du har klickat på skicka - gå till Google-formulär

och se de skickade detaljerna.

alt text

eller i Google kalkylblad:

alt text

En kontakta mig-sida på min webbplats använder exakt denna metod.

Användbara länkar