はじめに #
本ブログはHugoで作成しています。 ブログ運用において、Googleフォームの問い合わせを設置しました。
Googleフォームであれば、実装が非常に楽ちんです。 ランニングコストもかからないので導入しやすいかと思います。
Cloudflare Workersで問い合わせフォームを実装している人もいるみたいなので、ゆくゆくはそっちに変えるかもしれませんが。
本ブログ記事では、Googleフォームを利用して、Hugoのウェブサイトに手軽に問い合わせページを作る方法をまとめます。
なぜCloudflare Workersではなく、今Googleフォームなのか（技術選定） #
近年、静的サイトジェネレーター（SSG）で作られたブログでは、Cloudflare Workers + microCMS + Turnstile（スパム対策）といったモダンな構成で問い合わせフォームを構築する手法が人気のようです。
私もCloudflare Workersでの問い合わせフォームの構築を検討しましたが、以下の理由から「まずはGoogleフォームでのスモールスタート」を選択しました。
- 開発コストの圧倒的な差：Workers構成の場合、TypeScriptでのコーディング、フレームワーク選定、外部API連携など、半日〜1日以上の作業時間が発生します。一方でGoogleフォームならGUIの操作だけで5分で完了します。
- 運用の容易さ：運用後に「項目を1つ追加したい」「プルダウンの選択肢を増やしたい」となった場合、コードを1行も触らずにGoogleの画面上だけで即座に変更が反映されます。
- 初期フェーズの優先順位：ブログ開設初期は、フォームの凝った作りに時間を割くよりも「まずは記事を書き、コンテンツを充実させること」に集中したかったため、導入・維持コストがゼロであるGoogleフォームが最適解だと判断しました。
1. Googleフォームの作成 #
まず、Googleフォームで以下の項目を作成します。 以下の項目で作成しました。
- お名前（記述式・必須）
- メールアドレス（記述式・必須）
- 件名（プルダウン・必須）
- お問い合わせ内容（段落・必須）
作成後、右上の三点リーダー（縦）ボタンから「埋め込みコード（< >）」を選択し、HTMLコードをコピーしておきます。
以下のような形でHTMLコードが表示されます。表示サイズも指定可能です。
- HTMLコードの表示画面
2. Hugoへの埋め込み #
Blowfishテーマでは、Markdown内に直接iframeを記述することでフォームを表示できます。
埋め込みコードの例（レスポンシブ対応版） #
以下のコードを記事内に貼り付けます。src の部分はご自身のフォームURLに差し替えてください。
デフォルトで発行されるコードのままだと、横幅（width="640"）が固定されているため、スマートフォンなどの画面幅が狭いデバイスで表示した際にデザインが崩れて（はみ出て）しまいます。
当初はそのままGoogleフォームで生成されたHTMLを貼っていたのですが、見返しは大事ですね⋯。
スマホで見たとき幅が揃うように width="100%" に書き換えて設置するよう変更しました。
# 埋め込みコード例
<div style="margin-top: 2rem; width: 100%; text-align: center;">
<iframe
src="[https://docs.google.com/forms/d/e/XXXXX/viewform?embedded=true](https://docs.google.com/forms/d/e/XXXXX/viewform?embedded=true)"
width="100%"
height="1060"
frameborder="0"
marginheight="0"
marginwidth="0"
style="max-width: 640px; border: none;">
読み込んでいます…
</iframe>
</div>3. 回答の確認と運用Tips #
Googleフォーム上で回答を確認可能です。 Googleフォームに書いてもらうと登録しているメールアドレスにも内容が通知されます。 Googleフォームに紐づいたGoogleスプレッドシートにも内容を記載されるので、 管理も容易かと思います。
さらに運用をスムーズにするために、以下の2つのポイントを押さえておくと便利です。
回答時のメール通知を確実に有効化する #
Googleフォームは、デフォルトの状態だと「回答があっても管理者に自動通知メールが飛ばない」仕様になっていることがあります。これを見落とすと問い合わせに気付けない原因になるため、フォームの「設定」タブ ＞ 「回答」から、メール通知を受け取る設定を必ずONにした方が良いでしょう。
高いスパム耐性 #
自前でフォームを実装する場合に頭を悩ませるのが「スパムメッセージへの対策」です。Googleフォームであれば、バックエンドでGoogleの強力なスパムフィルター（reCAPTCHAなど）が自動的に機能するため、素のHTMLフォームを設置するよりも遥かにスパム耐性が高く、安心してブログ運営を続けられます。
おわりに（アドセンス審査を見据えて） #
ブログに問い合わせフォームを設置することは、読者や企業からの連絡動線を確保するだけでなく、Googleアドセンスの審査を通過するための必須要件の一つでもあります。
問い合わせを通じて「メールアドレス（個人情報）」を取得することになるため、フォームの設置が完了したら、合わせてサイト内の「プライバシーポリシー」ページにも個人情報の取り扱いに関する文言を忘れずに追記しておきましょう。これを行うことで、サイトとしての信頼性がグッと高まります。
まずはこの手軽なGoogleフォームで運用を回しつつ、ブログが成長してきたらCloudflare Workers等への移行・カスタマイズに挑戦するかもしれません。 現状でも便利なのでしない可能性大ですが。
