HyperFormを使って爆速でブログのお問い合わせ機能をつくる
HyperFormを使ったブログのお問い合わせ機能の作り方をご紹介します。
2024/07/17ブログのお問い合わせ機能を作る場合意外と考えることが多いです。
- お問い合わせ情報をどこに保存するか
- お問い合わせの通知はどこにするか
- 自動返信メールをどのように実装するか
- サンクスページは表示するか
- スパム対策をどうするか
などなど。
基本的にブログはRead Onlyな機能ですが、お問い合わせはユーザーのインタラクションを伴うために考慮する点が多くなります。
今回はスピードを重視したお問い合わせフォームの実装方法としてHyperFormを使った方法をご紹介します。
ちなみに、当ブログのお問い合わせページもHyperFormで実装しています。
HyperFormとは
公式サイトから引用すると、
formタグのaction属性にURLをセットするだけで、データの管理や自動返信メールの送信などができる、ヘッドレスフォームサービスです。
とあり、ヘッドレスフォームサービスとしては認知度が高い印象です。
価格は、累計100件までは無料で、それ以降は有料プランへの加入が必要になります。
サンプルコード
Next.js(v.14)での実装は以下のようになります。(他フレームワークでも大きくは変わりません)
export default async function Page() {
return (
<form method="post" action="https://hyperform.jp/api/[id]">
<input type="text" name="name" placeholder="お名前">
<input type="email" name="email" placeholder="メールアドレス">
<input type="file" name="file">
<button type="submit">送信</button>
</form>
);
}たったこれだけです。
formのinput属性や数、スタイルはカスタマイズ可能なのでご自身の要望に応じたフィールドを追加してください。
注意点
HyperFormのアクションURLは外部に公開されるためそのままだと他ユーザーも使うことができてしまいます。ダッシュボードの設定にてフォームの送信元ドメインを制限することができるのでこの設定は必ず実施することをお勧めします。
まとめ
お問い合わせ機能を爆速で作る選択肢としてHyperFormをご紹介しました。
リッチなフィードバック機能やカスタマイズ性、お問い合わせ件数が増えた場合は別の選択肢も視野に入れつつ、最初の段階ではとてもコスパの良い選択になると思うのでぜひお試しください。