ホームページに問い合わせフォームを作成する方法

問い合わせフォームは、閲覧者がブラウザー上で入力した内容を、管理者へ通知したり管理画面へ保存したりする機能です。一般的には、入力、必要に応じた確認、送信、完了という順に進みます。

送信内容の扱い方は仕組みによって異なります。

• 指定したメールアドレスだけへ通知する
• 外部フォームサービスの管理画面へ保存する
• WordPressなどの管理画面へ保存する
• 顧客管理システムやチャットへ連携する

「通知メールが届くこと」と「送信データが安全に保存されること」は別です。どこに保存され、誰が閲覧でき、いつ削除されるかを確認します。

主なメリット

• 営業時間外でも受け付けられる
• 必要な情報を同じ形式で集めやすい
• 用件ごとに担当者や通知先を分けられる
• 電話で聞き間違えやすい氏名・メールアドレスを文字で受け取れる
• 受付完了や返信時期を画面と自動返信で案内できる
• 送信数や用件を集計し、案内ページの改善に利用できる

ホームページ作成ツールの標準機能を使う

ノーコードのホームページ作成ツールには、フォーム部品が用意されている場合があります。ページ作成と同じ管理画面で設定しやすく、サーバー側の処理を自分で開発せずに済みます。

利用前に、項目の種類、月間送信数、保存期間、通知先、自動返信、データ出力、迷惑送信対策、有料プランの条件を確認します。無料プランではフォーム数や受付件数に制限がある場合があります。

一般的な企業・事業サイトでは、次の項目から必要なものだけを選びます。

項目	必須にするかの考え方	注意点
氏名	個別に返信するなら検討	読み方が必要な場合だけ、ふりがなを追加
メールアドレス	メール返信するなら必須	入力例を示し、形式を確認
電話番号	電話連絡が必要な場合だけ	ハイフンの有無を過度に制限しない
会社名・屋号	法人向けでは検討	個人からも受けるなら任意にする
問い合わせ種別	担当分けに役立つ	選択肢を増やしすぎない
問い合わせ内容	基本的に必要	入力できない機密・個人情報も案内
希望連絡方法・時間	対応できる場合に追加	必ず希望どおりになると誤解させない
同意確認	取り扱いの確認に使用	プライバシーポリシーへのリンクを示す

必須項目は、受付と返信に本当に必要な範囲へ絞ります。マーケティングに使うかもしれないという理由だけで、住所、年齢、役職などを必須にしないようにします。

入力画面

各入力欄には、何を入力するか分かるラベルを付けます。入力欄の中だけに薄い文字で説明を置くと、入力を始めた後に意味が分からなくなるため、項目名は欄の外にも表示します。

必須・任意を明示し、メールアドレスや日付などは入力例を示します。送信前に必要な文字数、使用できる形式、入力してはいけない情報が分かるようにします。

• 1列を基本にし、スマートフォンで左右へ移動させない
• 項目名と入力欄の対応を明確にする
• 必須と任意を文字でも示す
• 適切なキーボードが開く入力形式を使う
• エラー箇所と理由を項目の近くへ表示する
• エラー後も正しい入力内容を残す
• 色だけでエラーや必須を伝えない
• ボタンを「送信」「内容を確認」など具体的な名称にする
• キーボードだけでも項目を順に操作できるようにする
• 送信中、成功、失敗の状態を分かるようにする

W3Cのフォームに関する解説では、入力欄のラベル、必要な形式や必須項目の説明、送信結果やエラーの通知などが重要な要素として示されています。デザインの見た目だけでなく、入力途中で迷わず修正できるかを実際の端末で確かめます。

自動返信メールでは、受付日時、受け付けた用件、返信の目安、心当たりがない場合の案内を示します。フォームへ入力された内容をすべて返信すると、機密情報がメールに残るため、何を含めるかを検討します。

管理者向け通知には、担当分けに必要な情報と管理画面への案内を含めます。個人のメールアドレスだけへ通知せず、担当変更時に引き継げる共有先や受付台帳を用意すると見落としを減らせます。

次の状態を定期的にテストします。

• 利用者へ自動返信が届く
• 管理者へ通知が届く
• 送信内容が文字化けしていない
• 返信先を取り違えない
• 迷惑メールフォルダーや受信拒否の影響を把握できる
• 通知が届かなくても管理画面などで受付を確認できる

フォーム通知の送信元アドレスや認証設定が不適切だと、メールが届きにくくなることがあります。ホームページ用メールアドレスの作り方もあわせて確認してください。

公開フォームには、広告、機械的な大量送信、攻撃を目的とした文字列が届くことがあります。複数の対策を組み合わせます。

• 送信回数や頻度を制限する
• 人による操作かを確認する仕組みを使う
• 不自然な入力や既知の迷惑送信を判定する
• 同じ内容の連続送信を抑える
• 管理画面とプラグインを更新する
• 異常な増加を検知できるようにする

対策を厳しくしすぎると、画像認証を利用しにくい人や通信環境によって正規の送信まで妨げます。利用しやすさと防御の両方をテストし、必要なら別の連絡手段を用意します。

問い合わせで氏名や連絡先を受け取るなら、何のために利用するかを決め、必要な範囲だけ収集します。フォーム付近からプライバシーポリシーを確認できるようにし、実際の取り扱いと表示を一致させます。

設置前に次を整理します。

• 取得する項目と利用目的
• 保存される場所と保存期間
• 閲覧・返信できる担当者
• 外部フォーム、メール、顧客管理などの委託先
• データの出力、訂正、削除の方法
• 誤送信、漏えい、退職時の対応
• 営業案内など別目的で利用する場合の扱い

チェックボックスを置くだけで管理が終わるわけではありません。管理画面の権限、ダウンロードした表計算ファイル、転送されたメール、バックアップなど、複製されたデータも含めて管理します。

フォームを設置するページだけでなく、サイト全体をHTTPSで配信します。入力内容は画面上の文字数や形式を確認するだけでなく、サーバー側でも検証します。

特に次の点を制作・運用担当者へ確認しましょう。

• 入力値をそのまま画面、メール、データベースへ処理しない
• メールの宛先やヘッダーを利用者の入力だけで決めない
• 管理画面を多要素認証や個別アカウントで保護する
• ソフトウェア、プラグイン、ライブラリを更新する
• エラー画面へ内部情報を表示しない
• 添付ファイルの種類、容量、保存、公開を制限する
• ログへ不要な個人情報や機密情報を残さない
• 障害や不正送信が起きた場合の停止・連絡手順を決める

IPAは、安全なウェブサイトの実装方法と、メールヘッダー・インジェクションなどの脆弱性対策を公開しています。独自開発では「画面上でエラーにならない」だけで安全と判断せず、実装者による確認と検査を行います。基本的な管理項目はホームページのセキュリティ対策で整理しています。

1. 必須・任意と入力例が正しく表示されるか確認する
2. 正常な内容をパソコンとスマートフォンから送信する
3. 空欄、誤った形式、長文、特殊文字などを試す
4. エラー後に入力内容を修正できるか確認する
5. 自動返信と管理者通知を複数のメール環境で確認する
6. 管理画面への保存、権限、削除を確認する
7. 二重送信、連続送信、迷惑送信対策を確認する
8. プライバシーポリシーと実際の取得項目を照合する
9. 返信担当者、期限、休業中の対応を決める
10. 公開後の定期テスト日を決める

送信ボタンが動くことだけでなく、担当者が受付を発見し、期限内に返信できるところまでを一つのテストにします。

標準機能や外部サービスを使う場合は、サイトのプラン料金やフォームの月額料金に含まれることがあります。項目設定、デザイン調整、通知、迷惑送信対策、外部連携を依頼すると制作費が加わります。個別開発では、設計、実装、テスト、保守、安全対策の費用も必要です。

候補を比較するときは、次の条件をそろえます。

• フォーム数、月間送信数、保存件数
• 項目、分岐、確認・完了画面
• 自動返信、複数担当への通知
• 迷惑送信対策と障害時の対応
• 管理画面、権限、データ出力
• 外部サービスとの連携
• データの保存場所、契約終了時の削除
• 初期設定、月額、追加料金、保守

低価格かどうかだけでなく、問い合わせを確実に受け付け、必要な期間だけ安全に管理できるかを基準に選びます。

• フォームの目的と返信担当者が決まっている
• 必須項目を必要最小限にしている
• 項目名、必須・任意、入力例が分かる
• スマートフォンとキーボードで操作できる
• エラー箇所と直し方が分かる
• 確認・送信・完了の状態を誤解しない
• 自動返信と管理者通知をテストした
• 通知が届かない場合も受付を確認できる
• 迷惑送信と連続送信への対策がある
• HTTPS、入力検証、更新、権限を確認した
• 取得目的、保存場所、保存期間を決めた
• プライバシーポリシーと実際の取り扱いが一致する
• ファイル添付の危険と管理方法を確認した
• 障害時の代替連絡先と対応手順がある
• 公開後も定期的にテストする

問い合わせフォームには何項目必要ですか

一律の数では決まりません。返信に必要な氏名・連絡先・用件を基本にし、受付後の対応に使わない項目は外します。会社名や電話番号も、対象者と返信方法によって任意にできます。