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共に使いやすかったです。