Netlifyは、2014年に設立された静的サイトのホスティングサービスです。静的サイトのホスティングサービスとしては老舗の部類に入り、Gitサービスとの連携で自動デプロイができたり、デプロイ前のプレビューができたりと、非常に便利な機能が揃っています。また、Edge FunctionsやIdentityといった周辺機能にも力をいれており、Netlifyだけである程度のことは完結してしまう便利さが強みです。近年、周辺サービスとの協業や買収にも力を入れており、静的サイトジェネレーター側のWEBサイトでもNetlifyの記述を見かけることが多くなってきました。その存在感は今後も高まっていくことが予想されます。
フォームについてもNetlify Formsという機能が用意されており、簡単なコード変更で、フォームが自動的にNetlifyに送信されるようになり、内容の通知を受け取ることができます。このようにフォーム機能が組み込まれた静的サイトホスティングはいまだにNetlifyのみであり、ユニークな機能として支持されています。
一方で、2022年8月現在、国内や近い場所からコンテンツが配信されることはなく、どうしてもレイテンシが発生してしまいます。また、Netlify Formsは気軽に使える一方で設定の柔軟性はそれほど高くなく、もともと英語のサービスということもあり、日本語話者にはさらにハードルがあがってしまいます。
Netlifyをデプロイ先にしているけれどもNetlify Forms以上の機能性を求めるのであれば、外部フォームサービスの利用をお勧めします。日本語での細かい設定項目により、LP(ランディングページ)から本格的なWEBサイトまで、フォームにまつわるストレスを軽減できます。
Netlify公式サイトは以下をご参照ください。
» Netlify公式サイト
Netlifyで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。
メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。
好きな名前をつけてフォームを管理することができます。ここでは例えば「Netlifyサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。
Netlifyにデプロイするページのいずれかに、<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。(※URLはサンプルなので、このままコピペしても動きません)
あとはNetlifyにデプロイするジェネレーターのローカルサーバーから、またはNetlifyにデプロイした後に実際のURLでテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。
「Netlifyを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なNetlifyライフを送ってください!