PR本記事にはプロモーション（アフィリエイトリンク）が含まれる場合があります。
CONTENTS目次
「問い合わせフォームを自作したけど、送信ボタンを押しても本当に届いているのか不安…」——これ、まさに数週間前の私です。結論から言うと、SupabaseとResendという2つのツールを使えば、追加コストゼロ（無料枠内）で「データベースに保存しつつ、自分宛にメール通知も飛ぶ」実用的な問い合わせフォームが作れました。この記事では、プログラミング未経験の私がAIに手伝ってもらいながら、見た目だけの張りぼてフォームを実用フォームに改修した過程を、つまずいた点も含めて正直に共有します。
この記事でわかること
- 見た目だけの問い合わせフォームを、実際に受信できる形にする具体的な流れ
- SupabaseへのDB保存とResendのメール通知を「二段構え」にする理由
- 環境変数の設定ミスなど、初心者がハマりやすい落とし穴
最初のフォームは「完了画面が出るだけ」の張りぼてだった
正直に告白すると、私が最初に作ったサイトの問い合わせフォームは、完全な「張りぼて」でした。名前やメールアドレスの入力欄が並んでいて、見た目はそれっぽい。でも送信ボタンを押すと、ただ「送信が完了しました」という画面が出るだけ。実際には、その内容はどこにも保存されず、私にも一切届いていなかったんです。
これ、本当に危ないですよね。もし読者や見込みのお客さんが「仕事を依頼したいです」と送ってくれても、私は永遠に気づけない。機会損失どころか、信頼を失う原因になります。
プログラミング未経験の私にとって、「フォームを作る」＝「入力欄を並べる」だと思い込んでいたのが失敗でした。本当に大事なのは、入力された内容をどこかに届ける仕組みのほうです。この当たり前のことに、動くサイトを公開してからようやく気づいたのでした。
SupabaseでDB保存＋Resendでメール通知の二段構えにした
そこで、AIに「問い合わせフォームを実際に受信できるようにしたい」と相談しながら改修に取りかかりました。採用したのは、次の2つのツールです。
- Supabase（スーパベース）：入力内容を保存しておくデータベース。無料で使える範囲があります。
- Resend（リセンド）：メールを送るためのサービス。フォーム送信時に自分宛の通知メールを飛ばせます。
ポイントは、この2つを組み合わせて「二段構え」にしたことです。
- まず、送信された内容をSupabaseのデータベースにしっかり保存する（記録として必ず残す）
- 同時に、Resendを使って自分宛に「問い合わせが来ました」という通知メールを飛ばす
💡 ポイント： DB保存とメール通知を両方やっておくと、「メールを見落としても記録は残る」「記録を確認しなくてもメールで気づける」という、お互いを補い合う関係になります。
なぜ両方なのか。メール通知だけだと、うっかり見落としたり迷惑メールに入ったりすると気づけません。逆にDB保存だけだと、こまめに管理画面を開かないと気づけません。両方あることで、取りこぼしにくくなるわけです。問い合わせ 自作を考えている人には、この二段構えの発想をぜひおすすめしたいと思いました。
スパム対策：ハニーポットと連続送信制限を入れた
フォームを公開すると、避けて通れないのがスパム（迷惑な自動送信）です。ボット（自動でフォームを送りつけるプログラム）が大量にゴミ送信をしてくると、通知メールが埋もれてしまいます。そこで、AIに相談しながら2つの対策を入れました。
- ハニーポット（隠しフィールド）：人間の目には見えない入力欄をこっそり設置し、そこに何か入力されていたら「ボットの仕業」と判断して弾く仕組み。人間は見えないので触りませんが、機械的に全項目を埋めるボットだけが引っかかります。
- 連続送信制限：同じ人が短時間に何度も送信するのを制限する仕組み。
この「ハニーポット」という名前、初めて聞いたときは何のことかと思いましたが、「ボットだけが引っかかる罠」だと理解すると納得でした。人間の使い勝手を邪魔せずにボットだけをふるい落とせるのが良いところです。
⚠️ 注意： スパム対策を入れても、ゼロにできるわけではありません。あくまで「減らす」ための工夫だと考えておくと、過度な期待をせずに済みます。
このあたりは自分ひとりでは絶対に思いつかなかった部分で、AIに「フォームのスパム対策の定番を教えて」と聞きながら少しずつ実装していきました。
メール送信に失敗しても問い合わせを取りこぼさない設計にした
改修中に、AIとやり取りしながら「なるほど」と思った設計判断がありました。それは、メール送信に失敗しても、問い合わせ自体はデータベースに残すという考え方です。
メール送信は、外部サービス（Resend）を通す以上、たまに失敗する可能性があります。もし「メールが送れなかったからエラー画面を出す」という作りにしてしまうと、せっかく送ってくれた人には「送信できませんでした」と表示され、しかも内容もどこにも残らない——という最悪のパターンになりかねません。
そこで採用したのが次の流れです。
- 送信内容をまずSupabaseのDBに保存する（ここが最優先）
- その後にResendでメール通知を試みる
- もしメール通知が失敗しても、送信者には正常に「受付完了」を表示する
こうしておけば、メールが飛ばなくても内容はDBに残っているので、後から気づいて対応できるわけです。送信者に無用な不安を与えず、こちらも機会損失を防げる。地味ですが、実務ではとても大事な考え方だと感じました。
つまずき：テストは成功なのにDBに1件も残っていなかった
ここで、いちばん焦った失敗を正直に書いておきます。改修が終わってテスト送信をしたら、画面には「受付完了」と表示される。よし成功だ、と思ってSupabaseの管理画面を開いたら——1件も保存されていなかったんです。
「え、完了画面出てたのに、また張りぼてに戻ったの？」と本気で青ざめました。
原因を調べていくと、犯人は環境変数（かんきょうへんすう）の設定ミスでした。環境変数というのは、接続先の情報などを外に書き出しておく設定値のことです。私の場合、本番環境（実際に公開されている方）とプレビュー環境（公開前に確認する方）で、Supabaseへの接続設定が別々の値になっていたんです。そのため、テストしていた環境と、私が見ていた管理画面がそもそも別の場所を指していた、というわけでした。
⚠️ 注意： 「動いているように見えるのにデータが見当たらない」ときは、接続先の設定（環境変数）が環境ごとにバラバラになっていないかを疑ってみてください。私はここに気づくまで、かなり無駄に悩みました。
解決策はシンプルで、環境ごとに散らばっていた接続設定を一本化しただけです。これで無事、テスト送信がちゃんとDBに残るようになりました。ちなみにこの手の「動くけど中身が伴っていない」問題は、初期のサイトづくりでよく踏むようです。私の他の試行錯誤は運営者紹介（/about）にもまとめています。
費用は無料枠内でゼロだった
最後に、気になるお金の話です。今回使ったSupabaseとResendは、どちらも無料で使える範囲（無料枠）の中に収まり、追加コストはゼロでした。
もちろん、送信数やデータ量が増えていけば、いずれ有料プランが必要になる可能性はあります。ただ、副業や個人事業を立ち上げたばかりの段階で、月に何十件も問い合わせが殺到する、というのは現実的にはまだ先の話です。まずは無料枠で仕組みを作って動かしてみて、必要になったら考える——という進め方が、私のような未経験者には合っていると感じました。
Supabase フォームやResendを使った問い合わせフォームの自作は、「お金をかけずにまず一度きちんと動かしてみる」ことができる。この安心感は、最初の一歩を踏み出すうえでかなり大きかったです。
まとめ
見た目だけの張りぼて問い合わせフォームを、SupabaseへのDB保存とResendのメール通知という二段構えで実用化した実録でした。ハニーポットや連続送信制限でスパムを減らし、メール送信が失敗しても内容がDBに残る設計で取りこぼしを防ぎました。本番とプレビューで環境変数がバラバラだった設定ミスには焦りましたが、一本化で解決。費用は無料枠内でゼロでした。同じように「フォームは作ったけど本当に届いているか不安」という方の参考になればうれしいです。
FAQ
よくある質問
Qプログラミング未経験でも問い合わせフォームを自作できますか？
私自身がコード経験ゼロの会社員ですが、AIに相談しながら改修を進められました。ただし「一切つまずかず簡単にできた」わけではなく、環境変数の設定ミスなどで焦った場面もありました。試行錯誤する前提で取り組むのがおすすめです。
QSupabaseとResendはどちらか一方だけでもいいですか？
一方だけでも動かすことは可能です。ただ私は、メール通知の見落としやDB確認の手間を補い合うために「DB保存＋メール通知」の二段構えにしました。取りこぼしを減らしたいなら両方を組み合わせる発想が役立つと感じました。
Q無料枠だけでずっと運用できますか？
私の場合は現時点で無料枠内に収まり追加コストはゼロでした。ただし送信数やデータ量が増えれば有料プランが必要になる可能性はあります。詳しい上限は各サービスの最新情報をご自身で確認してください。