Netlify で Forms 機能を使用してお問い合わせフォームを作成する方法
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。
今回は前々回の記事「Zapier を使って Netlify のサイトに設置したフォームと Google スプレッドシートを連携させる」に関連して、 Netlify で Forms 機能を使い、お問い合わせフォームを作成する方法をまとめたいと思います。
Netlify の Forms 機能とは
Netlify には、サイトにフォームを設置した時、フォームにnetlify 属性または data-netlify="true" 属性が指定されていると、自動で送信機能をセットアップしてくれるという機能が用意されています。
これによりサーバサイドや JavaScript の追加の実装をすることなく、非常に簡単にお問い合わせフォームをサイト上に設置することが可能になります。
実際の実装
以下のように記述することで、自動的にフォームがセットアップされます。
<form name="contact" method="POST" data-netlify="true">
<p>
<label>Your Name: <input type="text" name="name" /></label>
</p>
<p>
<label>Your Email: <input type="email" name="email" /></label>
</p>
<p>
<label>Your Role: <select name="role[]" multiple>
<option value="leader">Leader</option>
<option value="follower">Follower</option>
</select></label>
</p>
<p>
<label>Message: <textarea name="message"></textarea></label>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>機能
投稿完了時に完了画面に遷移させる
form 要素の action に飛び先のURLを指定することで、任意の完了画面に遷移させることができます。
何も指定しない場合、 Netlify が生成した完了画面に遷移します。
<form name="contact" action="/contact/success/" method="POST" data-netlify="true">
<p>
<label>Your Name: <input type="text" name="name" /></label>
</p>
...
</form>投稿の確認
Netlify の管理コンソールで確認することができます。
また、管理画面のSettings > Forms > Form notifications から設定をすることでメール通知や Slack 通知を有効にすることも可能です。
複数のフォームを作成する
name 属性がフォームの識別子となっているため、name 属性の違うフォームを作ることで複数のフォームを作成することができます。
管理画面や通知、他サービスとの連携などでも別個のものとして扱われます。
<form name="contact" action="/contact/success/" method="POST" data-netlify="true">
<p>
<label>Your Name: <input type="text" name="name" /></label>
</p>
...
</form>
<form name="contact-recruit" action="/contact/success/" method="POST" data-netlify="true">
<p>
<label>Your Name: <input type="text" name="name" /></label>
</p>
...
</form>
注意点
フォームをクライアント側でレンダリングしている場合、非表示のフォームパーツを入れておく必要がある
(参考: How to Integrate Netlify’s Form Handling in a React App | Netlify)
Forms 機能を使用した場合、Netlify はビルドの完了時にサイトのHTMLを解析してフォームを有効にします。
そのため、 GatsbyJS などを使っていてフォームをクライアント側で JavaScript によりレンダリングしている場合、ビルドした時点ではフォームを見つけることが出来ず、機能が有効にならなくなってしまいます。
それを防ぐには<input type="hidden" name="form-name" value="contact" />という風に、name="form-name"を持ち、 value 属性が form 要素の name 属性と合致する値を持つ input 要素を入れておく必要があります。
<form name="contact" action="/contact/success/" method="POST" data-netlify="true">
<input type="hidden" name="form-name" value="contact" />
<p>
<label>Your Name: <input type="text" name="name" /></label>
</p>
...
</form>まとめ
今回は Netlify で Forms 機能を使う方法をまとめました。
Netlify を使用している方、使ってみたいと思っている方への参考にしていただけるとありがたいです。
Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています
Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。
現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい！
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください！
お問い合わせしてみる！関連リンク
