HugoのウェブサイトでGoogleフォームを送信する
時折、Hugoベースのウェブサイトにフォームの送信機能を追加する必要があります。
毎月の第2金曜日ではなくても、それでも…
フォーム送信サービスの一般的なオプション
-
何らかのウェブフォーム送信サービスを使用する、 例えば https://getform.io（スタータープランで月額15.83ドル） または https://kwesforms.com（月額19ドル） または https://form-data.com（1,000回の送信あたり10ドル）。 無料で月額100回の送信が可能な代替手段もあります。 しかし、スパムから自分たちを守る必要があります。煩わしいreCapchaがあります。
-
Googleフォーム。簡単で使いやすいです。
以下は、HugoウェブサイトからGoogleフォームにフォームを送信する方法を設定する手順のリストです。
Googleフォームの設定
Googleフォームの設定ページにアクセスしてください： https://docs.google.com/forms/u/0/
「連絡先メール」「名前」「メッセージ」などのフィールドを持つウェブフォームを作成します。
画面の右上隅に「垂直の三つの点の丸いボタン」があります。 埋め込みHTMLをコピーしてください。以下のように見えるはずです：
<iframe src="https://docs.google.com/forms/d/e/qwesomenumbersandlettersqwe/viewform?embedded=true"
width="640" height="1142" frameborder="0" marginheight="0" marginwidth="0">読み込み中…</iframe>
Hugoウェブサイトの設定
rawhtml
rawhtmlショートコードが存在することを確認してください。
layouts/shortcodes/rawhtml.htmlファイルに以下を記入してください：
<!-- raw html -->
{{ .Inner }}
コンタクトページの作成
任意のページに追加できますが、まずは「contuct-us」ページで試してみましょう。
hugo new contact-us.md
このページの最後に、Googleからコピーした埋め込みHTMLを追加してください：
Hugoウェブサイトのコンタクトページをテストする
ローカルでHugoウェブサイトをテストするには：
hugo server -D
Hugoが以下のように表示されたら：
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
http://localhost:1313/contact-usにアクセスしてください。
送信がうまく動作するか、またはしないかを確認してください。
1人の送信者あたり1回の送信に限定する設定もあります。 これはGoogleログインが必要です。 この設定はデフォルトでONになっています。
そのため、この設定をオフにする必要があるかもしれません。
Googleフォームまたはスプレッドシートで送信されたフォームデータを確認する
送信ボタンをクリックした後、Googleフォームにアクセスしてください。
送信された詳細を確認してください。
またはGoogleスプレッドシートで：
私のウェブサイト上のお問い合わせページは、まさにこの方法を使用しています。
