【Netlify Forms】使い方や実装手順、Vue.jsで使用する方法まで

# Netlify Forms とは

流行りのホスティングサービス「[Netlify](https://www.netlify.com/)」の動作するフォームを簡単に作れる機能のことです。

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

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

## 無料で使えるのか？

### Netlify自体の料金

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

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

<img width="880" alt="Netlifyの料金表" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349873/cb178d02-1472-7e2a-fdc1-937767bbe650.png">

### Netlify Formsの料金

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

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

https://www.netlify.com/pricing/
<img width="880" alt="Netlify Formsの料金表" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349873/f05af6a8-d845-2fbc-ba78-bb04c9886f57.png">

# 実装方法

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

## 完全な静的サイトの場合

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

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

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

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

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

```html 
<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で描画するものと揃えます。

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

もしくは、プリレンダリングの[プラグイン](https://github.com/chrisvfritz/prerender-spa-plugin/)を使用する方法もあります。

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

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

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

```js
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を使っている場合は、[こちら](https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/)を参照

# 管理画面の使い方

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

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

フォームから送信された内容はこのように表示されます。
CSV形式でのエクスポートにも対応。
![netlify_form1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349873/b6b67251-a388-39ab-6371-1008af50c7f0.png)

## 通知を設定する

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

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

<img width="443" alt="ss2020-07-09-003320@2x.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349873/24487e09-91a9-ef78-a3cd-c75b06757960.png">

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

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

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

# さいごに

実務で使用する機会があったのですが、Netlify、NetlifyForms共に使いやすかったです。