自分のポートフォリオサイトをNext.jsで作ったとき、お問い合わせフォームも用意しました。
名前とメールアドレス、問い合わせ内容を入力して、送信ボタンを押す。
見た目だけなら、ごく普通のフォームです。
ところが、実際に動くものを作ろうとすると、思っていた以上に考えることがありました。
フォームって、こんなに大掛かりなものだったっけ？
途中で、そんなことを思ってしまいました。笑
入力欄を作っただけでは終わらない
まずは、フォームの見た目を作ります。
入力欄を並べて、ラベルを付けて、送信ボタンを配置する。
ここまでは、いつものWeb制作とそれほど変わりません。
でも、お問い合わせフォームは、入力した内容を実際に送信できなければ意味がありません。
そこで、入力内容のチェックや送信処理を実装していきました。
必須項目が入力されているか。
メールアドレスの形式は正しいか。
送信に失敗したときは、どう表示するか。
Next.jsではAPIを使った送信処理も必要です。
一つひとつは理解できるのですが、組み合わせていくと、なかなかの作業量になります。
そして、これで完成かと思ったところから、さらに話が広がっていきました。
スパム対策も必要だった
お問い合わせフォームを公開すると、当然ながら誰でもアクセスできます。
それは、本来の目的でもあります。
でも、誰でも使えるということは、スパム送信などに悪用される可能性もあるということです。
今回のフォームでは、ハニーポットという仕組みを取り入れました。
通常の利用者には入力させない項目を用意し、そこに値が入っていた場合は、不正な自動送信の可能性があると判断する方法です。
ただし、これだけですべてのスパムを防げるわけではありません。
さらに調べていくと、送信回数を制限するレートリミットや、Cloudflare Turnstileのようなボット対策も検討する必要があるとわかりました。
なるほど。
フォームひとつでも、公開するとなると考えることがずいぶん多いんですね。
JavaScriptが動かない場合は？
もうひとつ気になったのが、JavaScriptが無効になっている場合の動作です。
普段、自分がWebサイトを使うときには、JavaScriptを無効にすることはほとんどありません。
でも、フォームの実装を確認していると、JavaScriptが動かない場合の送信処理についても考える必要が出てきました。
ブラウザ側の入力チェックだけに頼っていては、不十分です。
送信されたデータは、サーバー側でも検証する必要があります。
見た目が整っていて、普通に操作すれば問題なく動く。
それだけでは、公開するWebサイトとして十分とは限らないのです。
SNSのDMでもいいのでは？
実は、途中で少し迷いました。
自分のポートフォリオサイトなのだから、お問い合わせはSNSのDMでもいいのではないか、と。
今回のサイトは、積極的に仕事を受注するための営業サイトではなく、自分の制作物や日々の記録をまとめる場所として作っています。
お問い合わせが頻繁に来ることを想定しているわけでもありません。
それなのに、フォームの実装だけでこんなに考えることがある。
少し大掛かりすぎるのではないかと思ったのです。
ただ、SNSを使うなら、それはそれでアカウントを整えたり、メッセージを管理したりする必要があります。
結局、すでに作り始めていたフォームの実装を進めることにしました。
送信テストをして、実際にメールが届いたときは、やっぱり嬉しかったです。
小さな機能にも、裏側がある
Web制作の仕事を長く続けていても、新しい技術で作ってみると、改めて気づくことがあります。
お問い合わせフォームは、そのひとつでした。
普段は何気なく使っている機能でも、裏側にはさまざまな処理があります。
入力内容の確認、データの送信、エラーへの対応、セキュリティ対策。
利用する人には、その仕組みを意識させない方がいいのでしょう。
普通に入力できて、普通に送信できる。
それが理想です。
でも、その「普通」を実現するためには、意外といろいろなことを考えなければなりません。
最近はAIを使ってコードを書く機会も増えました。
実装そのものは、以前よりずっと速くなっています。
それでも、何が必要なのかを理解して、どこまで対応するべきかを考えることは、やっぱり大切なのだと思います。
それにしても、お問い合わせフォーム。
名前とメールアドレスと本文だけなのに。
見た目のシンプルさと、裏側の仕事量が全然釣り合っていません。笑