A few layouts to integrate Typeform.com into your Hugo static sites.
One big advantage over other options is that you don't have to expose your email address in your site config, or generated HTML. Plus, you can use Integrations with Typeform to route the form data to a ton of different places, like Google Docs, Mailchimp, Trello or Evernote.
Follow these steps to add a Typeform anywhere in your content.
First, copy layouts/shortcodes/typeform.html
to your Hugo site directory, in the same strucure.
cp layouts/shortcodes/typeform.html ../my-hugo-site/layouts/shortcodes/
Anywhere in your content, simply add the following shortcode:
{{< typeform FORM_ID USER_NAME HEIGHT WIDTH >}} # only FORM_ID is required
{{< typeform u6nTL7 myuser 800px 100% >}}
Follow these steps to add a Typeform as a page in your content.
First, copy layouts/partials/typeform.html
to your Hugo site directory, in the same strucure.
cp layouts/partials/typeform.html ../my-hugo-site/layouts/partials/
A Typeform page is just like a regular Hugo page. But it must include the field id
with the value typeform
.
# Inside content/yourfile.md
+++
title = "Contact"
id = "typeform"
+++
To enable the form in your page, just add your form ID and user name (optionally) in the config.toml
file. In addition, you can optionally configure the height/width.
# Inside config.toml
[params]
typeformid = "u6nTL7" # Required
typeformuser = "myuser" # Optional
typeformwidth = "100%" # Optional
typeformheight = "800px" # Optional