ログイン
HTMLでの問い合わせフォームの作り方｜作成例や使うべきタグの種類
利用者とのコミュニケーション機会の創出などに役立つ、問い合わせフォーム。問い合わせフォームはHTMLを利用して作成できますが、どのように作成すればよいのかわからないという方も多いのではないでしょうか。本記事では、HTMLでの問い合わせフォームの作り方と注意点を紹介します。
目次
問い合わせフォームを作成する方法
問い合わせフォームの作成には、さまざまな方法があります。よく使われる方法は、以下の3つです。
- 問い合わせフォーム作成サービスを活用する
- HTML上にコーディングで作成する
- プラグインで作成する
どの方法を選ぶかは、HTMLやプログラミングに関する知識をどの程度有しているか、どのような問い合わせフォームを作成したいかで異なります。ここからは、それぞれの方法の詳細やメリット、おすすめな人を紹介します。
問い合わせフォーム作成サービスを活用する
フォーム作成サービスを活用すれば、簡単に問い合わせフォームを作成することが可能です。
事前に準備されているテンプレートから好きなものを選び、入力項目を調整するだけなので誰でも簡単に利用できます。クオリティの高いフォームを短時間で作成したい方や、HTML・プログラミングといった専門知識がない方におすすめです。
なお、サービスによってテンプレートの種類や搭載機能、費用が異なります。無料で利用できるものもありますが、機能が制限される場合もあります。そのため、事前にサービス内容やテンプレートなどを確認してから利用することが重要です。
▷【2023年最新】問い合わせ管理システムのおすすめ15選徹底比較！選定ポイントと特徴
▷無料で使える問い合わせ管理システム5選！低コストで導入するコツ
HTML上にコーディングで作成する
HTMLやCSS、プログラミングなどの専門知識がある場合は、問い合わせフォームをコーディングする方法もあります。
コーディングでの作成は、フォームのデザインや大きさなどを自由にカスタマイズすることが可能です。そのため、自社のWebサイトにマッチした問い合わせフォームを作成できるメリットがあります。
問い合わせフォームを自分好みにカスタマイズしたい方や、プログラミングの専門知識がある方は、コーディングで作成するのがおすすめです。
プラグインで作成する
WordPressでWebサイトを作成している場合は、専用のプラグインをインストールすると、簡単に問い合わせフォームを設置できます。プラグインによって設置方法や使える機能は異なりますが、プログラミングの知識がなくとも使用することが可能です。
WordPressサイトに問い合わせフォームを設置する場合は、プラグインを利用するのがよいでしょう。
▷問い合わせ対応業務を効率化する方法！改善すべき課題や成功事例を紹介
問い合わせフォームを作成するメリット
問い合わせフォームの作成には、さまざまなメリットがあります。代表的なメリットは、以下の2つです。
- 問い合わせへのハードルを低くできる
- 顧客情報の分析や管理ができる
それぞれのメリットを解説します。
問い合わせへのハードルを低くできる
電話やメールと比較して、問い合わせのハードルが低くなるメリットがあります。
電話の場合は、対応できる時間帯が決まっています。つながりにくい時間があったり、電話をするまとまった時間が取れなかったりすると、ユーザーはなかなか問い合わせができません。
また、メールはいつでも送信できますが、記載内容は必要事項を自分で考えて打ち込む必要があります。手間や時間がかかるため、問い合わせが面倒に感じてしまうでしょう。
問い合わせフォームならいつでも好きなタイミングで問い合わせることが可能で、あらかじめ入力項目も決まっているため、手間も少なく済みます。
このように、問い合わせフォームは時間的なハードルがなく利便性が高いことから、多くのユーザーが問い合わせしやすくなるでしょう。
顧客情報の分析や管理ができる
顧客情報の分析や管理が行えるのも、問い合わせフォームを作成するメリットの一つです。
問い合わせフォームから送信された内容をデータ保存して分析すれば、自社サービスの問題点や疑問に感じやすい点を見つけられます。分析結果をもとにサービスの改善やQ&Aの提供などを行うと、顧客満足度を高められるでしょう。
また、問い合わせフォームサービスの中には、顧客情報の管理やリスト化が簡単に行えるものもあります。問い合わせ内容ごとに顧客情報を仕訳した分析も行いやすくなるでしょう。
どのような顧客がどのような問い合わせをする傾向があるのかも見えてくるため、商品やサービスの改善に取り組みやすくなります。
問い合わせフォームを作成する際の主な項目
問い合わせフォームを作成する際には、入力項目の設定が必要です。入力項目は、必ず記入が必要な「基本項目」と、入力の有無を自分で選べる「任意項目」の2つに分けられます。
主な基本項目の例は、以下のとおりです。
- 氏名（社名）
- メールアドレス
- 問い合わせ内容の種類
- 問い合わせ本文
問い合わせの種類や内容を入力する項目と、回答時に連絡するメールアドレスは必須です。特にメールアドレスがないと問い合わせがあっても連絡できないため、必須項目として設置してください。
続いて、任意項目の例を紹介します。項目例は以下のとおりです。
- フリガナ
- 電話番号
- 住所
- タイトル
問い合わせの回答はメールで行うため、フリガナや電話番号は任意項目で問題ありません。また、住所を必須項目にすると入力に時間がかかり、問い合わせが億劫になる可能性があります。そのため、任意項目として設置するのがおすすめです。
問い合わせフォームに必要な要素
一般的な問い合わせフォームには、以下の要素が揃っています。
- 入力フォーム
- 入力内容の確認画面
- 送信完了画面
- レスポンシブ対応
- スパム・セキュリティ対策
確認画面や送信完了画面は、入力内容の誤りやフォームの送信が無事に行われたことを確認するために設定します。近年はスマートフォンの利用者が増えていることも踏まえ、レスポンシブ対応にしておくとユーザーの利便性が向上します。
なお、問い合わせフォームは個人情報を収集するため、スパム・セキュリティ対策は必須とお考えください。
問い合わせの入力フォームには、主に以下の要素が使われています。
- テキストフィールド
- テキストエリア
- チェックボックス
- ラジオボタン
- セレクトボックス
- 送信ボタン
テキストフィールドは1行で表示され、文字制限が設けられています。主に氏名やメールアドレス、電話番号などに使われることが多い傾向です。問い合わせ内容は長文になるため、複数行で入力ができるテキストエリアを設定します。
複数の選択肢から項目を選ぶ場合に使うのが、チェックボックス、ラジオボタン、セレクトボックスの3つです。一般的にチェックボックスは複数選択、ラジオボタンは1つに限定する場合に使われます。なお、セレクトボックスのみプルダウン形式です。
送信ボタンは、問い合わせフォーム送信のために設置します。
▷問い合わせ対応を自動化する方法！課題や自動化するメリットを解説
問い合わせフォーム作成に必要な言語
問い合わせフォームをコーディングで作成する際には、以下3つの言語を使用します。
- HTML
- CSS
- PHP
それぞれの概要や役割を解説します。
HTML
HTML(HyperText Markup Language)とは、Webページを作成するためのマークアップ言語です。タグを用いてテキストや画像、動画などのコンテンツをブラウザ上に表示する指示を出します。
HTMLはプログラミング言語とは異なり、Webページ構造を定義するもののため、動的なコンテンツの作成はできません。問い合わせフォームの場合は、ブラウザにフォームを表示させる役割を果たします。
CSS
CSS(Cascading Style Sheets)とは、Webページのデザインやレイアウトを指定する言語です。HTMLで記述されたWebページを装飾する役割があり、文字の大きさや色、要素の配置や余白の設定などを指定できます。
問い合わせフォームでは、デザインを整える役割を果たします。
PHP
PHPとは、サーバーサイドで実行されるスクリプト言語で、動的なWebページやアプリケーションの構築に使用されます。
HTMLにPHP専用のタグを組み込むだけで、プログラムを書き込むことが可能です。問い合わせフォームに入力されたデータを処理したり、データベースに保存したりする役割を果たします。
問い合わせフォーム作成で使うべきタグの種類
問い合わせフォームの作成で主に使われるタグは、以下7つがあげられます。
- formタグ
- inputタグ
- labelタグ
- textareaタグ
- selectタグ
- optionタグ
- buttonタグ
それぞれのタグについて解説します。
formタグ
formタグは、問い合わせフォームのパーツを作成するタグです。属性でデータの送信先や送信方式、送信できる文字コードなどを指定します。
formタグには複数の属性がありますが、問い合わせフォームで主に使うのは「action属性」と「method属性」の2つです。
| 属性 | 概要 |
| action属性 | 問い合わせフォームに入力されたデータの送信先を指定します。使い方は、以下のとおりです。 <form action="送信先URL"></form> |
| method属性 | データの送信方式を指定します。method属性には「get」と「post」の属性値があり、それぞれの意味は以下のとおりです。
|
inputタグ
inputタグの役割は、フォームの入力フィールドを作成することです。フォーム内でのテキスト入力やラジオボタンの選択項目、名前やメールアドレスといったさまざまな種類のデータ入力ができます。
そのため、inputタグには多くの属性があります。問い合わせフォームで主に使う属性は、「type属性」と「name属性」です。
| 属性 | 概要 |
| type属性 | 具体的な入力形式を指定します。たとえば、以下のようなものがあります。
|
| name属性 | 「氏名」「メールアドレス」など、データ送信時のクエリ名を指定します。 |
labelタグ
labelタグは、inputタグで設定した入力要素と項目名を関連付けるものです。関連付けによって、入力欄と項目名が連動します。
たとえば、「メールアドレス」という項目名と入力用のテキストフィールドを関連付けたと仮定します。このような状態で項目名をクリックすると、関連付けられたテキストフィールドにフォーカスされるのです。
テキストフィールドを直接クリックしなくてもフォーカスされるので、ユーザビリティが向上します。なお、問い合わせフォームで使われるlabelタグの属性は「for属性」です。
| 属性 | 概要 |
| for属性 | 関連付けをする項目のid名を指定します。たとえば名前(name)の入力欄を関連付ける場合は以下のように記述します。 <p> <label for="name">氏名</label> <input id="name" type="text" name="name"> </p> for属性とid属性が一致しないと関連付けができないため、記述時には注意してください。 |
textareaタグ
textareaタグは、複数行のテキスト入力を可能にするタグです。inputタグもテキストフィールドを設置できますが、入力欄が1行に限られます。
「rows属性」と「cols属性」でサイズを定義することで、複数行のテキストボックスを作成できます。
| 属性 | 概要 |
| rows属性 | テキストボックスの縦方向のサイズを、行数で指定します。 |
| cols属性/td> | テキストボックスの横方向のサイズを、文字数で指定します。 |
selectタグ
selectタグは、プルダウンメニューの外枠を作成するための要素です。
プルダウンメニューとは、ユーザーが複数の選択肢の中から一つまたは複数(複数選択が許可されている場合)を選べるもので、フォームの入力方法として用いられます。具体的な選択肢の設定は、次に紹介するoptionタグで行います。
問い合わせフォームで主に使われる属性は、「name属性」です。
| 属性 | 概要 |
| name属性 | データ送信時のクエリ名を指定します。 |
optionタグ
optionタグは、プルダウンメニューの選択肢を定義するタグです。プルダウンメニューに表示されるテキストと選択時に送信される値を記述することで、フォーム送信時にサーバー側が選択項目を識別できるようになります。
問い合わせフォーム作成時によく使用される属性は、「value属性」です。
| 属性 | 概要 |
| value属性 | 問い合わせフォームが送信されるときにサーバーへ渡されるデータを指定します。たとえば、optionタグで「商品に関する質問」という選択肢を表示させつつ、送信される値を「product」としたい場合は、以下のような形でvalue属性を使います。 <option value="product">商品に関する質問</option> |
buttonタグ
buttonタグは、クリックボタンを作成するタグです。
フォーム送信やコマンドの実行、ユーザーのインタラクションに応じたスクリプトのトリガーとして機能します。テキストの変更や画像表示などができるため、inputタグよりもカスタマイズ性が高いのが特徴です。
問い合わせフォーム作成時には、「type属性」がよく用いられます。
| 属性 | 概要 |
| type属性 | ボタンの種類を指定します。問い合わせフォームの場合、使用する属性値は「submit」です。以下のような記述をすると、ボタンをが押された際にフォームが送信されます。 <button type="submit">送信ボタン</button> |
問い合わせフォームを作成する際の注意点
問い合わせフォーム作成時には、ポイントや注意点があります。ポイントや注意点を知らずに作成を進めると、問い合わせが来なかったりトラブルが起きたりする可能性があるため注意しましょう。
ここからは、問い合わせフォームで特に意識すべき注意点を6つ紹介します。
回答する項目は必要最低限にする
問い合わせフォームの回答項目は、必要最低限にしましょう。
回答項目が多いと入力が面倒に感じてしまうため、ユーザーが離脱するおそれがあります。問い合わせのハードルも上がるため、フォーム設置のメリットを活かせません。また、ユーザーが記入を誤る可能性も高まり、対応がスムーズにいかず困る場面もあるでしょう。
このように、回答項目が多いとさまざまなデメリットがあります。回答項目の数が適切か、不要なものはないか、よく検討することが重要です。
記入例を提示する
問い合わせフォーム作成時には、記入例を提示しましょう。簡単な入力項目でも、どのように入力すべきか悩むユーザーは一定数います。
たとえば、数字の全角・半角や電話番号のハイフンの有無などです。記入例があると、ユーザーは必要な情報をどのように入力すればよいかをすぐに理解できます。入力に迷うことなく問い合わせを送信できるため、時間の節約にもつながるでしょう。また、入力誤りの防止効果も期待できます。
記入例は、ユーザーがわかりやすいようシンプルに、なおかつ具体的な内容が含まれるよう心がけてみてください。入力項目の上下や回答欄に表示するのがおすすめです。
必須項目・任意項目を設定する
必須項目と任意項目を設定するのも、問い合わせフォーム作成時のポイントです。
すべてを必須項目にすると、ユーザーは入力が面倒に感じてしまい、記入途中で離脱する可能性も高まります。全体の項目数が多ければ多いほど問い合わせのハードルが上がってしまうため、必須項目と任意項目をうまく使い分けることが重要です。
必須項目にすべきなのは、問い合わせ対応に不可欠な情報を収集する項目です。名前やメールアドレス、問い合わせ内容といった基本的な情報以外に必要な項目は、企業によって異なります。
競合他社の問い合わせフォームをチェックしながら、必須項目・任意項目を決定しましょう。
入力した項目を確認できるページを用意する
送信前に問い合わせ内容や入力情報を見直せるよう、確認ページを用意しましょう。
エラー表示機能を活用したり、重要な項目は2回入力を依頼したりすることで、入力画面のみでも一定のミスは減らせます。しかし、2回入力した内容がどちらも誤っている場合や問い合わせ内容自体のミスは、機能でもチェックできません。
送信前に確認ページを表示すると、ユーザーは送信内容に誤りがないか再チェックできるため、問い合わせ時のトラブルを減らせるでしょう。なお、不備があった場合の修正作業が簡単に行える機能をつけておくと、利便性が向上します。
自動返信を行う
問い合わせフォームを作成する際は、自動返信機能を設定することが重要です。自動返信メールの送信によって、ユーザーは問い合わせが受け付けられたことを確認できます。そのため、同じ問い合わせを二度、三度と送信されるリスクを減らせるでしょう。
また、自動返信メールがあれば、問い合わせ内容を改めて見返すことが可能です。万が一誤りを発見した場合は、訂正を行えるメリットがあります。ユーザーに問い合わせの受付を知らせ、安心感を与えるためにも、自動返信機能の設定を忘れないようにしましょう。
スパム・セキュリティ対策を講じる
問い合わせフォームの作成で重要なことは、スパムやセキュリティ対策を講じることです。フォームを設置すると、スパムボットから不適切なメールが送られるため、スパム対策を怠ると大量の無関係なメールによって対応すべき重要な問い合わせを見落とすリスクがあります。
そのため、reCAPTCHAの実装によるスパム排除や、SSL暗号化によるデータの保護やアクセス制限などのセキュリティ強化を行ったうえで問い合わせフォームを設置しましょう。
▷OSS（オープンソース）の問い合わせ管理システムはある？特徴や機能を比較！
必要な言語・タグを理解し問い合わせフォームを作成してみよう
問い合わせフォームをHTMLで作成するのに必要な言語は、「HTML」「CSS」「PHP」の3つです。
HTMLはWebページにコンテンツを表示する指示を、CSSはデザインやレイアウトを指示します。問い合わせフォームに必要な動作を指示するのはPHPで、HTML内に専用のタグを組み込む必要があります。
本記事では、問い合わせフォームの作成で使われるタグを7つ紹介しました。それぞれのタグの役割や使い方を理解し、ぜひ問い合わせフォームを作成してみてください。
おすすめのお役立ち資料
問い合わせ管理システムの記事をもっと読む
-
ご相談・ご質問は下記ボタンのフォームからお問い合わせください。
お問い合わせはこちら