Netlify Forms とは

流行りのホスティングサービス「Netlify」の動作するフォームを簡単に作れる機能のことです。

NetlifyはWebサイトを公開するためのサービスです。
最大限分かりやすく言うとすれば、すごく便利なレンタルサーバー。

Netlify Formsは、Netlifyの数ある便利機能のうちの1つです。

無料で使えるのか？

Netlify自体の料金

• 転送量: 月100GBまで無料
• ビルド: 月300分まで無料

なので基本的に無料で使えます。
カスタムドメインの設定や、SSL対応も無料で出来ます。

Netlify Formsの料金

• 送信された数: 月100件まで無料
• 送信されたファイルの合計容量: 月10MBまで無料

なので、小規模なら無料枠に収まりそうです。

https://www.netlify.com/pricing/

実装方法

具体的な実装の流れを簡潔に紹介します。

完全な静的サイトの場合

1. formタグにnetlifyを追加する

もしくは data-netlify="true" でも同様に動作します。

<form method="POST" netlify></form>

2. 入力要素にnameを追加する

複数選択可能なセレクトボックスやチェックボックスの場合は、おしりに[]を付けてあげます。

<label>お名前: <input type="text" name="name" /></label>
<label>email: <input type="email" name="email" /></label>
<label>好きな食べ物: <select name="food[]" multiple>
  <option value="apple">りんご</option>
  <option value="banana">ばなな</option>
</select></label>

以上です！
これらの実装を施したサイトをNetlifyにデプロイするだけで、管理画面から送信された内容を確認できます。

公式ドキュメント
https://docs.netlify.com/forms/setup/

Vue.jsを使っている場合

先ほどの手順に加えて、追加で対応が必要です。

1. 静的なHTMLにもformを設置する

Formsの機能を使うページであることをNetlifyに認識させるためだけに、最小限のformを設置します。
入力要素のname属性の値をVueで描画するものと揃えます。

<form name="contact" netlify netlify-honeypot="bot-field" hidden>
  <input type="text" name="name" />
  <input type="email" name="email" />
　<textarea name="message"></textarea>
</form>

もしくは、プリレンダリングのプラグインを使用する方法もあります。

2. form-nameを添えて自前でPOSTする

フォームに入力された内容と一緒に、form-nameを渡す必要があります。
form-nameには、formタグに指定したname属性の値を指定します。

これはaxiosで実装した例です。

methods: {
    encode (data) {
      return Object.keys(data)
        .map(
          key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`
        )
        .join('&')
    },
    handleSubmit () {
      const axiosConfig = {
        header: { 'Content-Type': 'application/x-www-form-urlencoded' }
      }
      this.axios
        .post(
          '/',
          this.encode({
            'form-name': 'contact',
            ...this.form
          }),
          axiosConfig
        )
    }
  }

公式ブログの解説記事
https://www.netlify.com/blog/2018/09/07/how-to-integrate-netlify-forms-in-a-vue-app/

Reactを使っている場合は、こちらを参照

管理画面の使い方

送信された内容を確認する

Netlifyにログイン > サイト名 > 上部のタブからFormsを選択

フォームから送信された内容はこのように表示されます。
CSV形式でのエクスポートにも対応。

通知を設定する

Site settings > Forms > Form notifications から設定可能です。

SlackやEmailだけでなくwebhookにも対応しているので、外部サービスのIFTTTやzapierを活用するとLINEやスプレッドシートに記録することも可能です。

メール通知の件名を変更する

nameがsubjectのinputタグを追加すると、valueに指定した値が件名になります。

<input type="hidden" name="subject" value="件名" />

さいごに

実務で使用する機会があったのですが、Netlify、NetlifyForms共に使いやすかったです。
実装中、テスト送信する度に月100件までの無料枠を消費するため、少し慎重になりました(笑)

最後まで読んでいただきありがとうございました！

Twitter
https://twitter.com/uotya