Submit Google Form in Hugo Website

Sometimes you need to add a form submission to your hugo - based website.

Page content

Not every second Friday, but still… We have two mainstream approaches

‘postman delivering mail’

Common options for form submit services

  1. Use some kind of webform submission service, like https://getform.io ($15.83/month for Start plan) or https://kwesforms.com (19/month), or https://form-data.com ($10/1k submits). There are some alternatives with like free 100 submits per month. But still - need to protect yourselves from spam. See some annoying reCapcha.

  2. Google forms. Nice and easy.

Here is list of step how to configure submitting forms from Hugo website to Google forms.

Setup the form on Google

Go to google form configuration page: https://docs.google.com/forms/u/0/

Create a webform with some fields like

  • Contact email
  • Name
  • Message

Google form config for submitting from a hugo generated website

Then on the top-right corner of the screen there is a vertical tripledots round button. Copy Embed HTML, it should be looking similar to this one:

<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 forms context menu

Hugo website config

rawhtml

Make sure you have rawhtml shortcode.

In the file layouts/shortcodes/rawhtml.html

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

Create contact page

You can add this to any page, but lets try on contuct-us page first

hugo new contact-us.md

Add to the end of this page the embedded html you copied from google:

rawhtml on hugo website

Test your hugo website contact page

To test hugo website locally:

hugo server -D

After Hugo says 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

goto: http://localhost:1313/contact-us

and see this from submission works. or not

alt text

There is also a form setting limiting 1 submit per submitter. Which is requiring a gogle login. And this setting is ON bu default.

So you might want to turn it off.

See your sumbitted forms data on google forms or spreadsheets

After you clicked submit - go to google forms

and see the sumbitted details.

alt text

or on google spreadsheet:

alt text

A contact me page on my website is using exactly this method.