Hugo に Google Form を埋め込む

荒川仁志

Hugo で作ったサイトに Google Form を埋め込んでお問い合わせフォームを作ることにした。

環境：Hugo（Stack テーマ）

（１）Google Form でお問い合わせフォームを作成する。

サイト埋め込み用のコードをコピーしておく。

（２）Hugo の hugo.toml に以下を追記し、Markdown 中での HTML を使えるようにする。

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

（３）contact.md というファイルを作成するとする。

１のコードを貼り付ける。

モバイルからのアクセスにも対応するよう、レスポンシブデザインにするにはコードの width を 100% にし、height 部分を削除する。これで iPhone 等でウィンドウ幅がはみ出したりしない。

以上で Hugo に Google Form のページを作れた。

参考：
Hugoサイトにお問い合わせフォームを設置する – Helve Tech Blog
https://helve-blog.com/posts/web-technology/hugo-contact-form/

Embedding Iframe in Hugo Site - Stack Overflow
https://stackoverflow.com/questions/68036749/embedding-iframe-in-hugo-site

【簡単】Googleフォームをレスポンシブ対応させて埋め込む方法は？ | formLab
https://form.run/media/contents/form-creation-tools/google-form-responsive-embed/


この記事が気に入ったらサポートをしてみませんか？