お問い合わせフォームとは―用語解説からデザイン／作成／設置方法など。

そもそもお問い合わせフォームとは何でしょうか。お問い合わせフォームはどのようにしたら設置できるのでしょうか。用語解説からデザイン／作成／設置方法など、お問い合わせフォームについてまとめています。

▲記事トップへ

目次

この記事の目次です。

1. お問い合わせフォームとは
｜お問い合わせの意味と英語 ｜Webフォームとは ｜メールフォームとは ｜連絡フォームとは ｜仕組み／ページ構成 ｜メリットとディメリット

2. お問い合わせフォームのデザイン
｜ディメリットを減らす手法 ｜デザインの基本 ｜スマホ対応

3. お問い合わせフォームの作成／設置
｜HTMLとプログラムで自作する ｜PHPテンプレートで作る ｜CMS／プラグインで作る ｜サービスで作る

もっと知識を広げるための参考
更新履歴

1. お問い合わせフォームとは

お問い合わせフォームとは、ホームページの閲覧者のお問い合わせを受け付ける目的で設置するWebフォームのことです。

お問い合わせの意味と英語

お問い合わせとは、何かを介して当事者にたずねることをいいます。 電話やメール、フォームを介してたずねることをお問い合わせといいます。

お問い合わせフォームを作る場合に迷うところの1つにどのような英語のページ名を付けたURLにしたらよいかがあります。 お問い合わせを表す英語にはContactとInquiryがありますが、その使い分けはどちらになるのでしょうか。

英語のContact

「Contact」は一般的にお問い合わせフォームを含むTELやメール、SNS等、様々な連絡手段の意味を含んだ総称を意味しています。

point of contact

英語で「point of contact」というと「窓口、連絡先」を表します。

英語のInquiry

「Inquiry」は、具体的に何かについて誰かに質問したり、お問い合わせする意味で使われる英語です。お問い合わせフォームを指す場合はInquiryが使われることが多いです。

お問い合わせのページのURL

お問い合わせページにはフォーム以外にも電話でのお問い合わせ、QAなども記載する合が多いですが、その場合はContactというURLの方が意味的にあっていると思います。 一方、特定の商品やサービスに対してお問い合わせするためのフォームの場合はInquiryというページ名のURLの方がいいと思います。

お問合せフォームの作り方

PHPテンプレートやWordPressのプラグイン、サービスで作る場合はメール送信機能は基本機能として組み込まれています。 HTMLとプログラムで自作する場合はメール送信機能をプログラムに組み込む必要があります。

作り方の詳細は「3. お問い合わせフォームの作成／設置」にまとめています。

Webフォームとは

Webフォームはホームページに埋め込む形で設置する入力フォーム（入力する画面）のことです。

フォームは英語でform、型や書式といった意味で使われる用語です。 ホームページ制作関係ではホームページ閲覧者に入力を促すためのページの意味で使われます。

Webフォームは入力フォームに入力した内容を送信ボタンを押下するなどして送信される仕組みになっています。 お問い合わせを受け付けるお問い合わせフォーム以外にも応募を受け付ける応募フォーム、アンケートを受け付けるアンケートフォーム、購入を受け付ける購入フォーム、ログイン認証を行うログインフォームなどいろいろあります。

メールフォームとは

Webフォームで送信後にメールで通知する仕組みのものはメールフォームといいます。 お問合せフォームというとメールフォームになっていることが多いです。

メールフォームの作り方

PHPテンプレートやWordPressのプラグイン、サービスで作る場合はメール送信機能は基本機能として組み込まれています。 HTMLとプログラムで自作する場合はメール送信機能をプログラムに組み込む必要があります。

作り方の詳細は「3. お問い合わせフォームの作成／設置」にまとめています。

連絡フォームとは

連絡フォームはお問合せフォームの別のいい方です。 英語でcontact formでお問合せフォーム以外に連絡フォームと訳すことがあります。

仕組み／ページ構成

お問い合わせフォームの基本的なページ構成は「入力ページ」「確認ページ」「完了ページ」の3つです。

入力ページ

入力ページはお問い合わせ内容を直接入力するページです。

確認ページ

確認ページは実際に入力した内容を再確認してもらうページです。 確認画面がないと入力ミスが発生しやすくなりますので重要なページです。

完了ページ

完了ページは送信が完了したことを伝えるページです。 このページがないと送信できたか不安になります。 人によっては再度同じ内容を送信するかもしれません。

メリットとディメリット

お問い合わせフォームにはメリットがあり、もちろんディメリットもあります。

メリット

メリットはお問い合わせのハードルが低く、自動返信、宛先ミスや入力ミスや内容のモレを防ぎやすいなどのメリットがあります。

ディメリット

ディメリットとしては、フォームの入力項目に合わないお問い合わせなどのコミュニケーション、フォームの欠陥を突いたフォームの改ざんやボット（プログラム）による連続送信などのセキュリティ面の対策が必要などのディメリットがあります。

2. お問い合わせフォームに求められる要件

上述で触れたようにお問い合わせフォームにはディメリットもあります。 ディメリットを補うヒントとして、EFOやセキュリティがポイントとなると思います。 ここではどのようなお問い合わせフォームを作成すればよいか要件のポイントを簡単に上げていきたいと思います。

ディメリットを減らす手法

フォームのコミュニケーションロス、セキュリティ面のディメリットを減らすヒントとして以下の手法があります。

EFO（Entry Form Optimization：入力フォーム最適化）

入力フォームのコミュニケーションロスなどのディメリットを補うなどフォームを最適化する手法や取組みのことをEFO（Entry Form Optimization：入力フォーム最適化）といいます。 ホームページにお問い合わせフォームが設置できたら、EFOを勉強してお問い合わせフォームを最適化していきたいです。

初歩的なEFOのポイントを上げていきます。

記入例がある

記入例を入れることで、利用者が何を入力するかわからなかったり、意図した入力が促せない問題が減らせます。

入力エラーがすぐにわかる

意図した入力を促すには意図しない入力を制限する必要がありますが、エラーになった後どこにエラーがあるのか不明な場合は進めず入力をあきらめてしまいます。 エラー箇所はすぐにわかるようなフォームの作りにする必要があります。またエラー理由の明記して一度でエラーが解決できるよう配慮が必要です。

選択しやすい

選択項目が多すぎると把握するのが大変です。また選択する操作があまりにも面倒だと入力をあきらめてしまいます。 選択項目は5つ以内でラジオボタン形式にするのが基本といわれています。

自由記入は必須でない

自由記入項目はフォームにないことなどを伝えた利用者に必要になりますが、必須にすると考えるのがとても負担な項目になります。

セキュリティ

Webアプリケーション診断は、攻撃者の視点から様々な疑似攻撃を考察・試行して、ホームページのWebフォームなどのセキュリティの欠陥を見つける手法やサービスです。 ホームページにお問い合わせフォームを作成できるようになったら、次のステップとして、Webアプリケーション診断の方法などを勉強して安心に利用できるお問い合わせフォームを実現したいです。

初歩的なセキュリティのポイントを上げていきます。

通信データの暗号化（SSLを導入してhttpsで通信）

お問い合わせフォームから送信された回答データは、サーバに送られるまでの通信経路上で盗聴されたり、改ざんされるリスクがあります。 ホームページの通信で使用されるhttpは盗聴や改ざんのリスクがありますので、SSL（TLS）を導入してhttpsで通信させる必要がらいます。

フォームの脆弱性をチェックする

XSSやCSRF、データベースに保存する場合はSQLインジェクション、メール送信する場合はメールヘッダーインジェクション、などの脆弱性がないかチェックする必要があります。

サーバーのソフトウェアの脆弱性をチェックする

PHPなどの実行環境ソフトウェアの脆弱性で確認画面を表示したセッションが残って、確認画面が第三者に表示させられるなどおこらないよう、サーバで使用しているソフトウェアの脆弱性もチェックして安全に保つ必要があります。

ボット対策を行う

たとえばボットにより返信メールに指定された管理者や第三者に連続して何万件も送信される被害に遭わないよう、テキストや画像によるキャプチャ認証などのボット対策機能が必要です。

デザインの基本

お問い合わせフォームの基本的なデザインをまとめていきます。

利用者の明確化

フォームのデザインはとても重要です。でも人によって好みもそれぞれです。 まずはターゲットとなる利用者は誰なのか考える必要があります。 考える方法にはペルソナ法などがあります。

ペルソナ法

ユーザーの視点でサービスや商品を設計するために用いられる手法です。 もともとはソフトウェアの開発手法として提唱された理論ですが、その後、マーケティングや製品開発の世界にも応用されるようになりました。

まずは職業や家族構成などの背景、性別や年齢などのデータ、行動特定のパターンを洗い出し、ペルソナの目標や課題を設定するなどして、ターゲットの利用者を明確化していきます。

基本的に項目を少なく短くする

入力項目が多いと誰でも大変です。作るコストも比例して増えます。極力入力項目は減らすのがデザインの基本と思います。 項目数が10項目を超えるようでしたら、フォームの目的を明確化するなどして目的別にフォームを分けるなど工夫する必要があると思います。

個人情報の入力を減らす

利用者が抵抗を感じるだけでなく、情報漏洩のリスクがありますので、まずは個人情報の入力を減らしたいです。 フォームの目的を明確化して必要最小限の入力項目に絞ります。

行う内容が一目でわかる

入力量が分からない、次の画面も入力ページでいつ終わるかわからないなど、途中であきらめない工夫が必要です。 入力項目や確認と送信の操作が必要など送信までに行うことが、できるだけ一目でわかるような案内や構成、入力量になるようデザインしたいです。

導線のボタンの位置が一目で分かる

お問い合わせフォームを入力して、規約チェックして、確認、送信とボタンを押してもらわないとお問い合わせが送られてきません。 重要な導線にあるボタンやチェックボックスの位置は誰でもわかるように大きさや色のボタンを配置します。

クリアやキャンセルボタンは間違えないよう離して配置する

キャンセルボタンやクリアボタンなどは、導線のボタンの隣にあるとマウスの誤動作などで間違ってクリックしやすいので、なるべく導線のボタンから離して配置します。

エラーの解決方法がすぐに分かる

意図した入力を促すには意図しない入力を制限する必要がありますが、エラーになった後どこにエラーがあるのか不明な場合は進めず入力をあきらめてしまいます。 エラー箇所はすぐにわかるようなフォームの作りにする必要があります。またエラー理由の明記して一度でエラーが解決できるよう配慮が必要です。

入力の任意と必須は文字で示す

必須と任意の違いがわかりにくいと必須項目を飛ばしてエラーが発生し、ユーザーのモチベーションが下がってしまいます。 「※」などの記号は人によってはわからない場合がありますので文字情報で示す方が無難です。

統一感のあるデザイン

お問い合わせフォームのあるサイトのデザイン、入力、確認、完了画面のデザインに統一感がないと違和感を覚えます。 もしかしたら怪しいページに飛ばされているかもしれないなど不安に覚えたりもしますので、安心感が出るよう、配色・フォント・構成など全体的に統一感のあるデザインを心がけたいです。

スマホ対応

パソコンでインターネットを利用する人は思いのほか多くなく、大部分の人はスマホでインターネットを利用しているといわれます。 スマホやタブレット端末など画面の小さい端末でも閲覧、操作しやすいレスポンシブデザインを取り入れるのが重要です。

お問合せフォームのスマホ対応に求められる具体的な要求

お問合せフォームのスマホ対応に求められる具体的な要求には以下のようなことが例として挙げられます。

• 入力フォームが多すぎない
• ページ読み込み速度が遅くない
• レスポンシブ・デザインが採用されている
• 入力フィールドの高さは48ピクセル以上になっている
• フォントサイズは16pt以上になっている
• 入力項目にあわせたキーパッドが表示される

スマホ対応に欠かせないチェックツール

以下はスマホ対応に欠かせないチェックツールです。

• Google Search Consoleのモバイル ユーザビリティ レポート）
  https://search.google.com/search-console/mobile-usability?utm_medium=referral&utm_campaign=9063469
• Google PageSpeed Insights）
  https://pagespeed.web.dev/

3. お問い合わせフォームの作成／設置

お問い合わせフォームの作成方法は一から自分で作る以外にいろいろな方法で作成・設置できます。

HTMLとプログラムで自作する

HTMLやプログラミングの知識があれば比較的簡単に作成することができますが、理想的なフォームを作成するまでにはかなりの時間がかかってしまうことも多いです。 必要な要件を満たすものが作れる半面、作成に時間やコストがかかる、知識が不十分でセキュリティの欠陥を多く作りこむなどのディメリットがあります。

プログラムで自作する場合、一般的に「HTML」や「CSS」、「PHP」で作ることが多いと思います。

• HTML　入力フォームおよびページを作る（ブラウザで処理）
• CSS　HTMLのデザイン部分を整える（ブラウザで処理）
• PHP　フォームから送信されたデータを処理する（サーバで処理）

これに加えてJavaScriptで入力補完機能を追加することもできます。 サーバで処理を行うPHPの部分は別の言語で作ることもできます。

入力チェック

JavaScriptでの入力内容のチェックを実装するのは利用者に通知するという意味ではよいですが、 JavaScriptの処理を飛ばして、サーバのプログラムにデータを送信するのは簡単に行えますので、データをサーバに送った後のサーバで処理するプログラムの方でも入力チェックを行う必要があります。

PHPテンプレートで作る

ある程度HTMLやプログラミングの知識があって自作したいという方には、PHPテンプレートを活用したお問い合わせフォームの作成が無難だと思います。 専門知識が必要なセッション管理やセキュリティ面の実装を補ってくれると思います。

無料で利用できるPHPテンプレートをいくつかピックアップしてみました。

MailForm01

無料で使えるPHPを利用したフリーのメールフォームプログラムです。サーバー環境は問わず、基本的にほとんどのレンタルサーバーで動作します。 IPAの指摘も受けてセキュリティ（脆弱性）対策の機能も強化できているようですので、専門知識が少ない方が自作するよりも全然よさそうですね。

URL）https://www.php-factory.net/mail/01.php

Responsive Mailform

無料で利用できる簡単設置スマホ対応レスポンシブ メールフォームです。 使い勝手がよく好んで使用される方も多いようです。 こちらもCSRF対策などセキュリティ機能が盛り込まれているようですので、専門知識が少ない方が自作するよりも全然よさそうですね。

URL）https://www.1-firststep.com/archives/462

CMS／プラグインで作る

WordPressなどのプラグインで簡単に作ることもできます。

WordPressのプラグインでは「Contact Form 7」や「Jetpack」が有名です。 簡単に高機能な作成できるメリットがある反面、特殊な要件に合わない場合やコードが公開されているので脆弱性情報に目を光らせて定期的にアップデートを行う、仕様が合わなくなり再構築するなどのラーニングコストがかかるディメリットがあります。

WordPressの代表的なプラグイン

WordPressの代表的なフォーム作成プラグインをピックアップしてみました。

Contact Form 7

Contact form7はWordPressに問い合わせページを作る際に非常に便利なプラグインです。 直近（執筆は2021年3月）の2021年1月、2月も連続して脆弱性が公開されていました、人気だけに狙われやすいので定期的な脆弱性チェックを怠らないよう注意が必要です。

MW WP Form

シンプルなショートコードベースの WordPress プラグインです。 過去に英語版のフォームの入力チェックで必ずエラーになってしまうパターンがプログラムを追加して対処した記憶があります。

サービスで作る

お問い合わせフォーム作成サービスもあります。

フォーム作成サービスを選ぶ際のポイント

簡単に作成できて、セキュリティ面では脆弱性にチェックの時間やコストがかからない反面、デザイン面など特殊な要件に合わなかったり、有料のものであればラーニングコストがかかるディメリットがあります。 フォーム作成サービスを選ぶポイントをまとめてみました。

デザイン面

見栄えがよいか、自サイトに合わせてデザインを調整できるか選ぶポイントになるとになると思います。

セキュリティ面

SSLに対応しているか、迷惑メール防止機能があるかチェックしたいです。

機能面

自作のフォームだと難しい集計や管理機能はフォーム作成サービスでは充実していますので、カスタマーサポートが目的など何を重視するかを考えて比較したいです。

無料で使えるフォーム作成サービス

無料で使えるフォーム作成サービスも多数ありますので、いくつかピックアップしてみました。

Googleフォーム

Googleアカウントがあればすぐに利用でき、デザインやコーディングを行う必要はなく、テンプレートを選び項目を微調整するだけで完成できます。 フォームで回答されたデータは自動集計されます。Googleドライブと連携して回答を蓄積できるのも魅力的です。

URL）https://www.google.com/intl/ja_jp/forms/about/

formz

formz（フォームズ）は、フォームの作成だけでなく、Paypalなどの決済サービスなどの連携ができる点が特徴です。

URL）https://www.formzu.com/

formrun

formrun（フォームラン）は、顧客のステータス管理やマーケティング応用、チャットワークやSlackなどの外部ツールとの連携機能が充実しているなどの特徴があります。 有料プランではフォームだけでなくLP（ランディングページ）の作成もできます。

URL）https://form.run/ja

Tayori

Tayori（タヨリ）は、リアルタイムでお問い合わせ数や未読数、対応完了数などのステータスを確認できるなどカスタマーサポートを支援する機能が充実しているのが特徴です。

URL）https://tayori.com/

オレンジフォーム

オレンジフォームは、あらかじめ一般的な問い合わせフォームの項目が用意されているため、短時間でフォームの作成できます。 フォーム数が無制限（2021年3月時点）は魅力的です。広告非表示にするには有料のビジネス版を利用する必要があります。

URL）https://form.orange-cloud7.net/

SECURE FORM

SECURE FORM（セキュアフォーム）は、ドラッグでパーツをかんたん設置して作成できます。

URL）https://tayori.com/

もっと知識を広げるための参考

• ホームページの作り方

  ホームページの作り方をテーマにしたコンテンツです。 レンタルサーバを活用したワードプレス（WordPress）サイトの作成方法を紹介していきます。

更新履歴

この記事の更新履歴です。

• 2022/9/25 スマホ対応について追記しました。
• 2022/7/26 お問合せフォームの作り方について追記しました。
• 2022/5/13 メールフォームの作り方について追記しました。
• 2022/3/10 連絡フォームとはについて追記しました。
• 2022/1/26 メールフォームとは何かについて追記しました。
• 2021/9/18 PHPテンプレートで作るについて追記しました。
• 2021/3/25 お問い合わせフォームの作成方法について追記しました。
• 2021/3/24 記事をUPしました。

戻る