Embed your typeform on Hugo sites


Hugo is a static website generator written in Go, and is becoming a popular option for bloggers who want to reduce complexity and cost.
Adding a typeform to your Hugo site is as easy as you would expect with a static site. Whether you run a blog or ecommerce website your typeform will help you to reach a wider audience.

You will need:

  • A typeform you want to embed
  • Hugo installed on your system

For help getting started with Hugo please visit their site for more information.

If you’re comfortable adding a new page or content to your site then head straight to the repository for the HTML files and necessary code. Prefer step by step instructions? Keep reading!

How to embed a typeform on a Hugo site


1. Click on the link below and go through the readme.md file for further information

https://github.com/Typeform/hugo-typeform

2. You can choose between two embedding options –

  • Use a shortcode to add a typeform anywhere in your content
  • Use a partial template to add a typeform as a page in your content

3. Using a partial template:

You will need to copy ‘layouts/partials/typeform.html’ to your Hugo site directory, in the same structure.

For example:

cp layouts/partials/typeform.html ../my-hugo-site/layouts/partials/

A typeform page is just like a regular Hugo page however you must include the field ‘id’ with the value ‘typeform’.

toml

# Inside content/yourfile.md

+++

title = “Contact”

id = “typeform”

+++”

To enable the form in your page, just add your form ID and user name (optional) in the ‘config.toml’ file. In addition, you can also configure the height and width.

toml

# Inside config.toml

[params]

typeformid = “u6nTL7” # Required

typeformuser = “beardyman” # Optional

typeformwidth = “100%” # Optional

typeformheight = “800px” # Optional”

4. Using the shortcode

You will need to copy the ‘layouts/shortcodes/typeform.html’ to your Hugo site directory, in the same structure.

For example:

cp layouts/shortcodes/typeform.html ../my-hugo-site/layouts/shortcodes/

Now, add the following shortcode to your content:

{{< typeform FORM_ID USER_NAME HEIGHT WIDTH >}}

An example of this would look like:

{{< typeform u6nTL7 beardyman 800px 100% >}}


Only the form_ID is required, but if you want to add your User_Name you can find that at the beginning of your typeform URL:

https://beardyman.typeform.com/to/zvlr4L

Embedding typeforms on Hugo Sites

Was this article helpful?
Thanks!