今回は、Netlify Formsで「お問い合わせ」を作る方法を解説していきます。
Netlify Formsを使用すると簡単に素早く、お問い合わせを作ることができます。

前提として、Netlifyにサイトをホスティングしている必要があります。Netlifyにデプロイする際に、Netilify BuildがHTMLを解析し、機能を追加してくれます。

Netlify Formsのドキュメントは、Forms setupから確認できます。

それでは、解説していきます。

2枚のHTMLを用意する

• 入力フォームのHTML
• 送信後に遷移するHTML

を用意します。

例として、/contact/index.vueと/contact/success.vueというVueファイルを作成しました。

├── contact
│   ├── index.vue
│   └── success.vue

/contact/index.vueのPOSTメソッドでNetlify Formsにリクエストを送信した後に、/contact/success.vueに遷移するように設定していきます。

入力フォームの作成

index.vueに以下のようなHTMLを追記します。

<form name="contact" method="POST" data-netlify="true" data-netlify-honeypot="bot-field" action="/contact/success">
  <input type="hidden" name="form-name" value="contact" />
  <input id="name" name="name" type="text" />
  <input id="email" name="email" type="email"/>
  <textarea id="message" name="message" />
  <button type="submit">送信</button>
</form>

<form>に、data-netlify="true"属性を追加すると、Netlifyが解析時にNetlify Formsを使用することを理解してくれます。

また、action属性で、送信後に遷移するHTMLを指定できます。
ここでは、先ほど作った/contact/successを指定しています。

/contact/successは送信したことを明示できるUIがいいでしょう。

送信されたテキストを確認する

送信されたフォームは、NetlifyのSite overviewから確認することができます。
※無効のメールアドレスの場合、フォームは送信されません。

メールアドレスに通知されるように設定する

Netlify Formsに送信されたフォームは、Slackやメールアドレスに送信することができます。

個人で開発しているのであればメールアドレスに、組織で開発しているのであればSlackが良いかもしれません。