AIでWebサイトを作ったあと、「名前・メールアドレス・相談内容を送れるフォームを追加して」と頼めば、見た目だけなら数分で作れます。しかし、送信ボタンが動くことと、安全に問い合わせを受け取れることは別です。個人情報の保存、迷惑送信、メール不達、二重送信、入力エラーへの対応まで決めて、初めて業務で使えるフォームになります。
この記事では、プログラミング初心者や小規模事業者向けに、AI生成サイトへ問い合わせフォームを追加する手順を、方式選びから公開テストまで順番に解説します。特定サービスの機能や料金には依存せず、外注時にも使える確認基準をまとめました。
目次
結論：初心者は「保存しない小さなフォーム」から始める
最初の問い合わせフォームは、氏名、返信先メールアドレス、相談内容、同意チェック程度に絞ります。住所、生年月日、身分証、決済情報など、商談開始時点で不要な情報は集めません。
実装方式は次の順で検討してください。
- ホスティングやフォーム専用サービスの送信機能を利用する
- 自分のサーバーに送信APIを用意する
- 問い合わせをデータベースへ保存する
初心者がいきなりデータベース保存から始めると、閲覧権限、削除期限、漏えい時の影響まで管理対象が増えます。メール通知だけで運用できるなら、サーバーに内容を長期間残さない設計が安全です。
まず決める5項目
1. フォームの目的
「何でも相談」ではなく、見積もり依頼、資料請求、予約相談など、送信後に担当者が取る行動を1つ決めます。目的が曖昧だと入力項目が増え、完了率が下がります。
2. 本当に必要な入力項目
各項目について「この情報がないと初回返信できないか」を確認します。会社名や電話番号は便利でも、必須にすると個人客や比較検討中の人が離脱しやすくなります。必須と任意を分け、任意項目には理由を添えます。
3. 送信先と担当者
個人のメールではなく、問い合わせ専用アドレスや共有受信箱を使います。担当者が休んでも確認でき、退職時に引き継げる状態にします。
4. 保存場所と保存期間
メール、フォームサービス、データベースのどこに内容が残るかを図にします。保存するなら閲覧できる人と削除時期を決めます。「念のため永久保存」は避けてください。
5. 返信期限
送信完了画面に「通常2営業日以内」など現実的な目安を表示します。即時返信を約束できない場合、自動返信は受付確認にとどめます。
実装方式の選び方
| 方式 | 向くケース |
|---|---|
| フォーム専用サービス | 小規模サイト、早く公開したい |
| サーバーレス関数・送信API | 独自画面を保ちたい |
| WordPressプラグイン | WordPressサイト |
| 独自バックエンド | 会員情報や業務システムと連携 |
HTMLだけでは安全なメール送信は完結しません。メールサービスの秘密鍵をJavaScriptへ直接書くと、訪問者が取得できる可能性があります。秘密情報を必要とする処理はサーバー側で行います。
実装手順
手順1：入力項目とデータの流れを書く
紙やメモで「訪問者 → フォーム → 送信処理 → 通知先」を書き、途中で保存される場所を囲みます。外部サービスを使う場合、その事業者へ何が送られるかも確認します。
手順2：画面を作る
ラベルを入力欄の外に明示し、必須項目、入力例、エラーメッセージを用意します。プレースホルダーだけをラベル代わりにすると、入力後に項目名が見えなくなります。
スマートフォンで押しやすい送信ボタンにし、送信中は二度押しできない状態にします。エラー時は入力内容を可能な範囲で保持します。
手順3：サーバー側で検証する
ブラウザ側の必須チェックだけでは不十分です。送信処理側でも、文字数、メール形式、許可する項目、想定外の値を検証します。本文をそのままHTMLメールとして組み立てず、特殊文字を安全に処理します。
手順4：迷惑送信を抑える
短時間の連続送信を制限し、機械的な送信を判定する仕組みを検討します。ただし、読みにくい画像認証だけに頼ると、正規の利用者も離脱します。隠し項目、時間制限、レート制限などを組み合わせます。
手順5：成功と失敗を分けて表示する
成功時は受付完了と返信目安、失敗時は再送方法と代替連絡先を表示します。「送信しました」と表示したのに通知メールが届かない状態を避けるため、送信APIの成功応答を確認してから完了画面へ進めます。
手順6：ログを最小限にする
障害調査用ログへ問い合わせ本文やメールアドレスを丸ごと残さないでください。日時、処理結果、匿名化した識別子など、調査に必要な最小情報にします。
よくある失敗と直し方
APIキーをフロントエンドへ埋め込む
環境変数名を書いただけで安全になるわけではありません。ブラウザへ配信されるコードに展開されれば閲覧可能です。送信はサーバー側の処理を経由させ、キーを公開しません。
Fromに訪問者のメールアドレスを使う
なりすまし判定でメールが届きにくくなる場合があります。送信元は自分のドメインで管理するアドレスにし、訪問者のアドレスは返信先として扱います。
成功テストしか行わない
未入力、長文、誤ったメール形式、連打、ネット切断、送信サービス停止も試します。自分宛てに1回届いただけでは公開判定になりません。
問い合わせ内容を無期限で保存する
保存期間が長いほど漏えい時の影響が増えます。対応完了後に削除できる運用とし、バックアップ側の保持期間も確認します。
AIへ渡す実装プロンプト
あなたはWebフォームの実装担当です。
次の条件で、初心者が保守できる問い合わせフォームの設計案を作ってください。
サイト構成：
ホスティング環境：
使用できるサーバー側処理：
送信先メール：
必要な入力項目：
保存の要否と期間：
返信目安：
出力順：
1. データの流れ
2. 画面項目とエラー表示
3. サーバー側検証
4. 迷惑送信対策
5. 秘密情報の管理
6. 正常系・異常系テスト
7. 公開後の監視項目
APIキーをブラウザ側コードへ含めないでください。
存在しないサービス機能や料金は作らないでください。
不明点は実装せず質問として列挙してください。生成されたコードは、そのまま本番公開せず、環境に合わせてレビューします。個人情報や認証を扱う場合は、専門家の確認も検討してください。
公開前チェックリスト
- □ 必須項目を最小限にした
- □ プライバシーポリシーへのリンクがある
- □ 同意内容が具体的で、最初からチェックされていない
- □ APIキーやメール認証情報がブラウザへ出ていない
- □ サーバー側でも入力値を検証する
- □ 連続送信と迷惑送信の対策がある
- □ 成功、入力エラー、通信失敗をテストした
- □ PCとスマートフォンで操作した
- □ 送信先、返信先、自動返信を確認した
- □ 保存場所、閲覧者、削除期限が決まっている
- □ 通知が止まった場合の代替連絡先がある
公開後に確認すること
月1回は実際にテスト送信し、完了画面だけでなく受信まで確認します。迷惑メールフォルダ、送信エラー、利用上限、API費用も確認します。フォームを変更したときは、項目追加だけでなく通知文、プライバシーポリシー、保存先も更新します。
AIで作ったWebアプリを公開する手順とAPIキー・個人情報の安全対策を合わせて確認してください。公開後の定期点検はAIで作ったWebサイトの保守運用で整理できます。方式選びに迷う場合はAI制作とWordPressの比較も参考になります。
まとめ
問い合わせフォームは、入力欄を作る作業ではなく、個人情報を安全に受け取り、確実に担当者へ届ける仕組みです。初心者は項目と保存を最小化し、秘密情報をサーバー側へ置き、正常時と失敗時の両方をテストしてください。問い合わせが1件も失われない運用まで設計して、初めて売上につながるフォームになります。
関連記事
