Hugoにフォームを追加/設置/設定する方法
What is Hugo?
Hugoとは
Hugoは、Go言語で書かれたオープンソースの静的サイトジェネレーターの一つです。ページ数が多くなっても非常に高速に動作することで有名です。Hugo公式サイトによると、そのビルド時間は1ms以下。ページ数が多くても、全体のビルドが1秒以下で終わることがほとんど、というパワフルさです。
記述方式はマークダウンを主とし、その他、htmlを書き込むことでマークダウンではなかなか難しい表現も可能になっています。ショートコードを設定することで、コードを使いまわしたり、独自のプリセットを用意したり、ということが容易に実現可能です。HTML以外での出力にも対応しており、JSONなど、好きな書式で出力できます。
Go言語に馴染みがない方も多いかもしれませんが、その処理速度から近年人気が高まっている言語でもあります。また、Hugoをサイト構築のジェネレーターとして使う限りは、高度なGo言語の知識は求められないため、Hugo公式サイトのドキュメント等を参照しながら記法について理解を深めれば、それほど学習コストも高くないと思います。
HugoはいわゆるSSG（静的サイトジェネレーター）のため、それ自体の機能を使ってフォームを設置することはできません。正確には、フォームのhtmlを記述することはできても、その送信内容を受け取り、動的に処理しメールを発信する、といったことはできません。そこで、外部のフォームサービスを利用するか、メールアドレスを記載するだけにするか、の二択になってしまいます。
Hugo x SSGform
Hugoにフォームを追加する方法
Hugoで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。
1. SSGformアカウントを作成する
メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。
2. SSGformマイページで、フォームを作成する
好きな名前をつけてフォームを管理することができます。ここでは例えば「Hugoサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。
3. Hugo側にフォームのhtmlを記述する
<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。（※URLはサンプルなので、このままコピペしても動きません）
<input type="text" name="お名前" required="required" />
<input type="email" name="メールアドレス" required="required" />
<textarea name="お問い合わせ内容" required="required"></textarea>
<button type="submit">送信する</button>
</form>
4. テスト送信して、完了です
あとはHugoのローカルサーバーから、またはデプロイした先でテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。
「Hugoを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なHugoライフを送ってください！
