ウェブサイトにお問い合わせフォームを追加する方法（確実に届く設定）

動くお問い合わせフォームを作るには、名前、メール、メッセージの短いフォームを作り、サーバーのルートに送信します。そこで入力を検証し、メッセージをデータベースに保存してから、秘密の API キーを使ってメールプロバイダー経由で通知を送ります。ハニーポットの隠し欄とレート制限を追加すれば、ほとんどのスパムを止められます。成功メッセージは明確に表示し、公開したサイトで最初から最後までテストしてください。重要なのは、メールの前に保存することです。メール送信が失敗しても、問い合わせは手元に残ります。

選択肢

サイトにすでにバックエンドとデータベースがあるなら（AI アプリビルダーで作ったアプリはよくそうなっています）、最後の選択肢が最も確実で、問い合わせを自分の手元で確認できます。

良いお問い合わせフォームに必要なもの

• 項目はできるだけ少なく。 名前、メール、メッセージ。件名のドロップダウン（「営業」「サポート」「その他」）は、振り分けに使うときだけ追加します。
• 各項目の上に分かりやすいラベル。 入力すると消えるプレースホルダーだけに頼らない。
• 役立つ検証。 「有効なメールアドレスを入力してください」を項目の横に表示。
• 次に何が起こるかを示す成功画面。 「ありがとうございます。営業日1日以内にご返信します。」
• プライバシーの説明。 情報をどう使うかを書き、プライバシーポリシーへのリンクを付ける。
• 予備の連絡先。 メールアドレスや電話番号など、そちらを好む人のために。

プロンプトの例

基本のフォーム:

お問い合わせページに、名前、メール、メッセージ（すべて必須、メッセージは2,000文字まで）のお問い合わせフォームを追加してください。送信はサーバーのルートに行い、入力を検証してから contact_messages テーブルに受信時刻とともに保存します。成功メッセージは「送信しました。営業日1日以内にご返信します。」としてください。項目のエラーはそれぞれの欄の横に表示し、スマホでもきちんと使えるようにしてください。

メール通知:

お問い合わせが保存されたら、Resend を使って hello@example.com に通知メールを送ってください。API キーは RESEND_API_KEY にあります。返信先（reply-to）は送信者のメールアドレスにして、直接返信できるようにしてください。送信に失敗した場合は、保存したメッセージを残し、キーを表示せずにエラーをログに記録してください。

スパム対策:

お問い合わせフォームにスパム対策を追加してください。空のままであるべき隠しハニーポット欄、サーバー側で IP ごとに1時間あたり5件までの制限、リンクが3つを超えるメッセージは拒否してください。ハニーポットで送信されたものは、成功画面を表示しつつ静かに破棄してください。

受信箱:

問い合わせメッセージを新しい順に一覧表示する、パスワード保護された管理ページを追加してください。「対応済み」のチェックボックスと、未対応だけを表示するフィルターを付けてください。

手順

1. メッセージの届け先を決める。 誰が通知を受け取り、誰が返信するか。
2. フォームを作る。 上記の項目で、分かりやすいラベルとスマホに合う入力欄を備えたもの。メール欄はメールの入力タイプを使い、スマホに適切なキーボードを表示させます。
3. サーバーのルートを作る。 必須項目、メール形式、長さの上限を確認する。ブラウザだけの検証は決して信用しない。
4. まずデータベースに保存する。 アプリにデータベースを追加する方法をご覧ください。
5. メール送信プロバイダーを設定する。 アカウントを作り、送信ドメインを確認し、API キーをシークレットとして保管する。ドメインの設定（SPF、DKIM）の詳細はアプリからメールを送る方法にあります。
6. 保存の後で、サーバーから通知を送る。 送信元には確認済みのドメインを使い、返信先（reply-to）に訪問者のアドレスを設定する。訪問者のアドレスを「送信元」にしてはいけません。なりすましとして拒否される可能性が高いです。
7. 任意で訪問者に自動返信する。 ただし短くしましょう。スパムのアドレスへの自動返信は、送信者としての評判を傷つけることがあります。
8. スパム対策を追加する。 ハニーポット、レート制限、必要なら CAPTCHA 風の確認。
9. 公開したサイトでテストする。 送信し、データベースを確認し、受信箱と迷惑メールフォルダを確認し、返信をクリックする。

スパムを止める

お問い合わせフォームは、公開から数日でボットを引き寄せます。邪魔の少ない方法から順に、防御を重ねましょう。

1. ハニーポット欄。 人間からは見えない欄で、ボットは埋めてしまいます。本物の訪問者には何の負担もありません。
2. サーバー側のレート制限。 1つのアドレスが一定時間に送れるメッセージの数を制限します。
3. 内容のルール。 リンクが詰め込まれたメッセージや、メッセージ欄が空または極端に長いものを拒否します。
4. CAPTCHA 風の確認（Cloudflare Turnstile や Google reCAPTCHA など）。トークンはサーバーで検証する必要があります。ブラウザ上だけで動く確認は、回避されてしまいます。

よくある間違い

• 送信していないのに「送信しました！」と表示する。 サーバーの応答の前、あるいはそれに関係なく成功と表示してしまう。必ずサーバーの応答を待つこと。
• メールだけで、データベースがない。 1つのキーの設定ミスで、誰も気づかないまま何週間も問い合わせが消えてしまう。
• API キーをフロントエンドのコードに置く。 誰でもそれを使ってあなたとしてメールを送れてしまう。
• 送信ドメインが未確認。 通知が迷惑メールに入るか、まったく届かない。
• 訪問者のメールアドレスを「送信元」にする。 代わりに reply-to を使う。
• 長さの上限がない。 ボットが巨大な文章を貼り付けてくる。
• 公開サイトで一度もテストしない。 キーやドメインは、プレビューと本番で違うことが多い。

チェックリスト

• 見やすいラベルと分かりやすいエラーのある、短いフォーム
• サーバー側の検証と長さの上限
• すべてのメッセージがデータベースに保存される
• 確認済みのドメインから、reply-to を設定した通知メールが送られる
• メール API キーはサーバー側のシークレットにだけ保管
• ハニーポットとレート制限を設定
• 成功メッセージは、サーバーの確認の後にだけ表示
• プライバシーの説明がプライバシーポリシーにリンクしている
• 迷惑メールフォルダを含め、公開サイトで最初から最後までテスト済み

Mythex でのお問い合わせフォーム

Mythex では、全体をチャットから作れます。フォームとデータベースを同じプロンプトで依頼してください（または /database と入力）。送信内容が保存されるようにするためです。Mythex には組み込みのメール送信機能はないため、通知には Resend、SendGrid、Postmark などのプロバイダーを使い、/secrets かプロジェクト設定でそのキーを追加して、サーバーから送るようエージェントに依頼します（アプリからメールを送るをご覧ください）。頼る前に、プレビューでフォームに対して App Testing（/test）を実行し、公開してから公開 URL でテストしてください。

お問い合わせフォームは、多くの小規模ビジネスのウェブサイトやランディングページの重要な要素です。公開前にセキュリティチェックリストも確認してください。

よくある質問