Aiki x Developer

netlify

実装時間5分:Netlifyのbuilt-inフォームの導入方法

June 1st, 2019

netlify-logo

どうもー、ドイツ在住フルスタック & フロントエンドエンジニアのArisaです。 ドイツでも夏日になってきて、バルコニーでのんびりと過ごす時間が多くなってきました。

さて、つい昨日、このブログ&ポートフォリオサイトをパブリックに公開したのですが、Netlifyの恩恵にあやかりまくっています。

CMSとして採用したContentfulも気に入っていますし、このサイトの開発でのハウツーももう少し詳しく書きたいと思っていたので、いくつかの記事に分けて紹介していきます。

今回は、Netlifyでのフォーム実装について💡

Netlify Formsとは

一言で言うとビルトイン フォーム ハンドラー。

もう少し噛み砕いて言うと、あらかじめNetlify側で用意してくれているハンドリングを、決まりに従って呼び出せば、あっという間にきちんと機能するフォームが手元のサイトに構築できる優れもの。

Netlifyは、エンジニア向けドキュメントも、割としっかりしていて、フォーム実装用のDocsも用意されています。

これに従って実装をしていけば、スタイルを除いたフォームの機能実装が、ものの3~5分でできちゃいます✨

私もNetlifyのNetlify Formsのドキュメントを見て実装しました。

Netlify Forms: https://www.netlify.com/docs/form-handling/

結構バリエーションの多い開発環境での選択肢を与えてくれているので、ご自身のフレームワークやライブラリーに合わせて実装可能です。

私はGatsbyメインで開発したので、Static Site Generatorsを使用した環境での実装で構築してます。

実装してみる

JSXをドキュメントにそって書く

APIを引っ張ってきたり、JSやReactのコードでひねる必要はなく、シンプルにドキュメントにあるHTML/JSXをコピペして、自分の環境用に編集するだけのシンプルな実装。

私の場合は「名前」「メールアドレス」「メッセージ」の項目を用意したかったので、formタグでの属性ほど気をつけておいて、あとは必要な3つの項目を付け加えただけです。

Netlify Formsで最低限必要なformタグの属性は以下の3つ。

name="contact" method="POST" data-netlify="true"

少し古めの記事だと、属性の名前が違ったり、フォーム提出後にThank youのポップアップが出ると見せているチュートリアル動画もあるけれど、2019年6月現在では上記がDocsにある記述。

これさえ守っていればきちんと動作するフォームが実装できるので、とてもお手軽です。

でもスパムにも備えておきたいので、これだけではなく、Netlify Formsが用意してくれているスパム対策も実装しておきます。 これも指定された属性を引っ張ってくるだけです。

スパム対策をする

Docsにあるコードをまずは見た方が早いので、参考までに載せます。

netlify-doc-source

新しい属性がformタグに加わっていることに注目💡

このnetlify-honeypotと言う属性が、ボットにしか認識できないフォーム記入事項をトラップとして置いてくれるので、ボット以外は記入しないでねという記述をスパムボット用のインプット欄に書いています。

一瞬ユーザー目線で見ると「ん?記入しないでってどう言うこと?」となりますが、それが気になる人はキャプチャもNetlify Formsは用意してくれているので、Docsからそちらを採用してもいいかもしれません。

上記のNetlifyの公式ドキュメントを参考にした私のこのサイトでのフォーム構造は以下です。

netlify-form-customized

属性ほど気をつけて、あとは好きな項目を自分で増やしています。

Gatsbyでハマるポイント:フォーム送信されない問題

ただ、Netlifyそのままのコードだけでは、Gatsbyのようなスタティックなサイトはフォームはうまく送信されませんでした。

作っておいた404ページがある人は一瞬それが表示されて、Netlifyのダッシュボードではフォームの送信が届いていないと出ます。

結構スタティックなサイトで構築をしている場合はこの問題が多いらしく、Netlifyの公式ブログにもちゃんと対策が書いてありました。

私のこのサイトのフォームコードにもありますが、以下のようにhiddenのインプットを追加するだけです。

Netlify Blog: https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#form-handling-with-static-site-generators

tips-for-statics

少し気をつけないといけないのが、このhiddenのinput、value属性の値が、formタグのname属性と一緒でないと認識してくれないので、ここは揃えた方が良いです。

ここが違うとうまくいかなかったというエンジニアの人の記事もいくつか見かけたので、GatsbyでNetlify Formsがうまくいかないと言う人は、hiddenのinputタグにある、value属性の値と、formタグのname属性の値が同じかチェックするといいかもです💡

この点が解決すると、Netlifyのダッシュボードでもきちんとフォーム送信されましたと表示もされますし、メッセージ内容や、メールアドレス、名前など、自分が指定したフォームのコンテンツが返っているのが確認できます。

Netlifyのダッシュボードでは、以下のように確認します。(Netlifyのアカウントを持っていることがもちろん前提です)

netlify-form1netlify-form2

formタグのname属性の値が、ダッシュボード上に表示されるので、上記のコードだと「contact」になります。

さらに便利なことに、このフォーム、なんと通知機能もついています。

通知設定

フォームが来ても通知がなければ気がつきにくいですよね。

Netlify Formsではありがたいことに、ダッシュボードでいくつかクリックをすれば指定のメールにフォーム送信受け取り内容が通知されるように設定が簡単にできます。

先ほどの上記「Forms」のメニューを選んでいる状態で「Settings and usage」のボタンが画面中央にあるので、クリックすると以下の画面に行くので、「Add notification」を選択。

netlify-form3

そうするとメール以外にも、Slackやwebhookでも通知設定できるのが見えますが、今回はシンプルにメールでいきます。

あとは通知を希望するメールアドレスを記入したらOk!

これで通知機能までついたフォームが実装できました✨

スタイルは自分で好みに変更可能です。 通常のGatsbyでのスタイル編集と変わりません。

ただ、このままだとフォームを送信してくれた人は、フォーム送信完了ページにはリダイレクトされません。 以前はデフォルトであったようですが、今はないので、自分で作ります。

作ると言っても、formタグにaction属性を追加して、そこにフォーム送信完了ページへのパスを書いて、フォーム送信完了ページをそのほかのページと同様に作ったら完成です。

私の場合は `/success` と言うページを作成してそこにコードを書いて、ローカルで確認するにはローカルホストのURLの後に `/success` をつけて反映の確認をして、サクッと終わりました。

まとめ

機能の実装だけだと、わずか3~5分で実装が完了し、スタイルもフォーム送信ページを追加しても、トータル15分ほどで全て完了してしまうスピード感、素晴らしいですね✨

若干デフォルトで入れておいてほしい機能などもありますが、それでもバグだらけのWordpressプラグインContactForm7では到底及ばない開発のしやすさです。

Netlifyを選んだ理由は、今の所ドメイン代だけで済んでしまうと言うのが大きかったのですが、コンタクトフォームに関しても私としてはかなり便利だなという印象で、お得感があります。

ただ月100件以上問い合わせがある場合は、有料プランとなってしまうので注意が必要ですが、個人や小規模の運営であれば申し分ないと思います。

と言うわけで、今回はこのサイト開発での一部であるフォーム導入についてでした。

参考になれば幸いです。

では

ちゅーす