JamstackなサイトのフォームにはHyperFormがおすすめ
タグ:
ヘッドレスフォームサービス「HyperForm」がかなり良かったので紹介します。
まず結論から
- HyperFormはヘッドレスフォームサービス
- 使い方はシンプルで、必要な機能はだいたい揃っている
- Jamstackなサイトのフォームとしておすすめ!
Jamstackなサイトでフォームはどう実装する?
Astro製のサイトにお問い合わせフォームを実装することになり、実装方法を検討しました。
色々選択肢はあると思います。ざっと以下のような感じでしょうか。
- フルスクラッチで実装
- Netlify Forms を利用
- Googleフォームをカスタマイズ
- フォームサービスを利用
しかし、どれも選択肢としては微妙です。
1の フルスクラッチで実装 は手間がかかりすぎるので却下。
2の Netlify Forms を利用 はホスティングにNetlifyを利用しているなら第一候補になります。シンプルなフォームでよければ、Netlify Formsで十分でしょう。ただし、ホスティングにNetlifyを利用していなければ使えません。今回はホスティングにCloudflare Pagesを利用しているので、Netlify Formsは採用できませんでした。
3の Google フォームをカスタマイズ は、フロント側は自由な見た目で実装し、データ送信先としてのみGoogleフォームを利用するという方法です。一見すると最強ではと思われますが、Googleフォームの仕様が変更された際にフォームが壊れるかもしれないという致命的なデメリットがあります。公開期間が短期間のサイトのフォームとして採用するならまあギリギリ許容範囲かな、と思いますが、一般的な企業サイト等で利用するのはさすがに怖いですね。
4の フォームサービスを利用 は、formrun のようなフォームサービスを利用する方法です。フォームサービスはformrun以外にも色々あります。formrunに関して言えば、高機能でリッチなフォームを作成でき、送信されたデータの管理までできてしまうのですが、価格が高いです(2023年7月23日時点で有料プランの最低価格が税抜き3,880円)。そこまでの機能はいらないから、もう少しリーズナブルなフォームサービスがあればなあと思います。機能的には文句なしですが価格面で折り合いがつかず、採用は見送りとなりました。
そこそこの機能で、そこそこの低価格で、フロント側を自由にカスタマイズできる、そんな都合の良いフォームがないだろうか…。
HyperForm ならそれができる
ありました。
それが日本製のヘッドレスフォームサービス HyperForm です!
HyperForm のここがすごい
- カスタムURLにフォームの入力内容をPOSTするだけで、送信内容をよしなに保存してくれる
- ヘッドレスなのでフォームのフロント画面は開発者が自由にカスタマイズできる
- フォームのためにサーバー側の処理を用意する必要がなく、Jamstackと相性が良い
- reCAPTCHAの搭載はもちろん、自動返信メールや送信完了ページへのリダイレクト、Slack通知もできる
- シンプルでわかりやすい管理画面
- 有料プランの価格は税込み1,078円!安い!
機能面・価格面ともに素晴らしいです。これぞ求めていたフォーム!満足しすぎて、料金が倍になっても使い続けると思います笑。
個人的にはカスタムURLにフォームの入力内容をPOSTするだけで送信できるというのが嬉しいです。これのおかげでフォームの送信をJSでコントロールできるので、送信前のバリデーションや送信完了後の処理を簡単に設定できます。
改善してほしいところ
一方、部分的に改善してほしいところもあります。
- 自動返信メールの文面を管理者宛・フォーム送信者宛で別々に設定できるようにしたい
- Slack通知の文面をカスタマイズできるようにしたい
あくまで改善したらいいな程度の要望で、全体的な満足度は非常に高いです!
まとめ
この記事ではヘッドレスフォームサービスの HyperForm を紹介しました。実際に使用してみて、ヘッドレスフォームはJamstackと相性が良く、開発効率と開発者体験の両方を高めてくれるものだと思いました。JamstackやSPAのサイトのフォーム周りで悩んでいる方におすすめです!