JamstackなサイトのフォームにはHyperFormがおすすめ

更新

ヘッドレスフォームサービス「HyperForm」がかなり良かったので紹介します。

まず結論から

  • HyperFormはヘッドレスフォームサービス
  • 使い方はシンプルで、必要な機能はだいたい揃っている
  • Jamstackなサイトのフォームとしておすすめ！

Jamstackなサイトでフォームはどう実装する？

Astro製のサイトにお問い合わせフォームを実装することになり、実装方法を検討しました。

色々選択肢はあると思います。ざっと以下のような感じでしょうか。

  1. フルスクラッチで実装
  2. Netlify Forms を利用
  3. Googleフォームをカスタマイズ
  4. フォームサービスを利用

しかし、どれも選択肢としては微妙です。

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のサイトのフォーム周りで悩んでいる方におすすめです！