Hugo と Netlify で構築したサイトにお問い合わせフォームをつける方法

こんにちは！ mnbd（@mnbbbbbd）です。

静的サイトジェネレーター「Hugo」とホスティングサービス「Netlify」で構築したサイトにお問い合わせフォームをつける方法を説明します。

Netlify のフォームサービスを利用しています。

無料から利用できますが、条件がありますの注意してください。

記事を読む前に
Netlify のフォームサービス
フォームのショートコード
markdown ファイルへ記述
フォーム内容の受け取りの流れ
1. Netlify のサイトで確認する
2. メールで通知を受ける設定手順
まとめ

記事を読む前に

以下の条件をご理解していただいている前提でご紹介させていただきます。

Hugo と Netlify でサイト構築ができている
Hugo に関する基本的な操作を理解している

Netlify のフォームサービス

Netlifyのフォームサービスには利用制限があります。

100通/月までは無料（2020/06/09現在）です。

フォームのショートコード

/layout/shortcodes/のディレクトリに「form.html」という名前で以下の内容のファイルを作成します。

<form name="contact" method="POST" data-netlify="true">
  <p>
    <label>お名前: <input type="text" name="name" /></label>   
  </p>
  <p>
    <label>E-Mail: <input type="email" name="email" /></label>
  </p>
  <p>
    <label>内容: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">送信</button>
  </p>
</form>

markdown ファイルへ記述

お問い合わせフォーム用の markdown ファイルを一つ作成してください。

---
title: "お問い合わせ"
date: 2020-06-09T11:45:13+09:00
draft: false
---
まなびシステムへのご連絡は以下のフォームよりお願いいたします。

内容によっては返信をご遠慮させていただく場合や諸事情により返信に時間がかかる場合がございますことをご了承ください。

{{< form >}}