Netlify Formsでお問い合わせを作る方法

created 2020/10/19updated 2021/03/27

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

前提として、Netlifyにサイトをホスティングしている必要があります。Netlifyにデプロイする際に、Netilify BuildがHTMLを解析し、機能を追加してくれます。
Netlify Formsのドキュメントは、Forms setupから確認できます。

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

2枚のHTMLを用意する

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

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

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

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

入力フォームの作成

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

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

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

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

Forms Notification

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