Google Form indienen in een Hugo-website

Soms moet u een formulierindiening toevoegen aan uw hugo-gebaseerde website.

Inhoud

Niet elke tweede vrijdag, maar toch… We hebben twee mainstream aanpakken

‘postbode die post bezorgt’

Algemene opties voor formulier submit diensten

  1. Gebruik een soort webformulier submit dienst, zoals https://getform.io ($15.83 per maand voor Start plan) of https://kwesforms.com (19 per maand), of https://form-data.com ($10/1k submits). Er zijn enkele alternatieven met gratis 100 submits per maand. Maar toch - je moet jezelf beschermen tegen spam. Zie de vervelende reCapcha.

  2. Google vormen. Mooi en makkelijk.

Hier is een lijst van stappen hoe je kunt configureren formulieren indienen vanuit een Hugo website naar Google vormen.

Stel het formulier in op Google

Ga naar de configuratiepagina van Google vormen: https://docs.google.com/forms/u/0/

Maak een webformulier aan met enkele velden zoals

  • Contact e-mail
  • Naam
  • Bericht

Google vormen configuratie voor het indienen van formulieren vanuit een Hugo gegenereerde website

Dan op de rechterbovenhoek van het scherm is er een verticale driepuntige ronde knop. Kopieer de ingebedde HTML, het zou er ongeveer zo uitzien:

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

Google vormen context menu

Hugo website configuratie

rawhtml

Zorg ervoor dat je de rawhtml shortcode hebt.

In het bestand layouts/shortcodes/rawhtml.html

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

Maak een contactpagina aan

Je kunt dit toevoegen aan elke pagina, maar laten we het eerst proberen op de contact-onze pagina

hugo new contact-us.md

Voeg aan het einde van deze pagina de ingebedde HTML toe die je hebt gekopieerd van Google:

rawhtml op Hugo website

Test je Hugo website contactpagina

Om je Hugo website lokaal te testen:

hugo server -D

Na dat Hugo zegt:

Omgeving: "ontwikkeling"
Pagina's worden vanaf schijf geserveerd
Wordt uitgevoerd in Fast Render Mode. Voor volledige rebuilds bij wijziging: hugo server --disableFastRender
Webserver beschikbaar op http://localhost:1313/ (bindadres 127.0.0.1)
Druk op Ctrl+C om te stoppen

ga naar: http://localhost:1313/contact-us

en zie of het formulier werkt of niet

alternatieve tekst

Er is ook een formulierinstelling die beperkt tot 1 submit per indiener. Wat een Google login vereist. En deze instelling is standaard aan.

Dus je zou deze mogelijk willen uitschakelen.

Bekijk je ingediende formulierdata op Google vormen of spreadsheets

Na dat je op submit hebt geklikt - ga naar Google vormen

en zie de ingediende details.

alternatieve tekst

of op Google spreadsheet:

alternatieve tekst

Een contact me pagina op mijn website gebruikt precies deze methode.