お問い合わせフォームの作成手段としては「HTMLやPHPなどを使う・WordPressのプラグインで作成する・ツールを使う」の3種類が挙げられます。なかでも今回はHTMLによるフォーム作成について、ピックアップして紹介します。
HTMLやCSSを自由にカスタマイズできるフォームツールをお探しなら、クライゼルのフォーム作成ツールをご利用ください。
お問い合わせフォームとは？
お問い合わせフォームとは、ホームページを閲覧した方からの質問や資料請求などを受け付けるために設置するWebフォームです。お問い合わせ方法には、電話やメールもありますが、電話対応できる時間が限られていたり、メールの文章作成に労力がかかったりする課題もあります。
一方お問い合わせフォームは、いつでも利用可能で、決められた設問に回答するだけで済むため、非常に利便性が高いといえるでしょう。また、企業にとっても、オペレーターを大量に雇用する必要がないため、人件費節約につながります。お問い合わせフォームの設置は、電話やメール対応にみられる課題を解消できる方法といえます。
お問い合わせフォームはHTMLで作れる？
HTMLを用いた、お問い合わせフォームの作成は可能ですが、ほかのプログラミング言語との併用が必要です。まずはHTMLでフォームのデザイン作業まで行い、その後実際にフォームとして機能するようPHPを組み込んでいきます。
そこからさらに、ユーザーが使いやすい仕様になるようJavaScriptの技術も活用します。お問い合わせフォーム作成には、複合的な知識や技術が必要といえるでしょう。
お問い合わせフォームの作成に必要な要素
HTMLでお問い合わせフォームを作成するにあたり、まずはフォームを構成する6つの要素について紹介します。
テキストエリア
テキストエリアとは、ユーザーが大量の文章を自由に記述できるように、複数行のテキスト入力を可能とする要素です。お問い合わせフォームでは、備考欄などに活用されています。
テキストフィールド
テキストフィールドとは、ユーザーが自由に文字入力できるための要素です。テキストエリアと機能は似ていますが、テキストフィールドは1行、かつ文字制限があるという特徴があります。
チェックボックス
チェックボックスとは、複数の選択肢のなかから、いくつかの項目を選べるようにする要素です。おもにアンケート機能などに活用されています。
ラジオボタン
ラジオボタンとは、複数の選択肢のなかから、一つの項目を選べるようにする要素です。チェックボックスと似た機能ではありますが、チェックボックスが複数の項目を選べるのに対して、ラジオボタンは一つに限定して選ぶことができます。
セレクトボックス
セレクトボックスはラジオボタンと同様の機能をもつ要素ですが、ユーザーへの選択肢の表示形式に違いがあります。ラジオボタンの場合は、並べられた選択肢からワンクリックで選ぶ形式です。
一方セレクトボックスはプルダウン式のフォームが一般的で、ユーザーにむけた選択肢が多い場合に用いられます。具体的には、生年月日の入力・居住地域の選択などで利用されています。
送信ボタン
入力したデータを送信するためのボタンです。これはお問い合わせフォームに限らず、多くのWebサイトにて利用されています。
HTMLの編集も出来る
フォーム作成ツールならクライゼルをご利用ください。
HTMLを用いたお問い合わせフォームに必要なタグ
HTMLでお問い合わせフォームを作成する際は「タグ」と呼ばれる形式を用います。これにより、入力した単語や数字などに機能・役割を持たせ、Webサイト上に反映できます。ここでは、お問い合わせフォーム作成に関わる基本のタグを7種類紹介します。
formタグ
入力項目や送信ボタンなどをすべて含めて、お問い合わせフォームとして位置づける役割を担っています。そのためformタグは、この後紹介する6つのタグ全体を囲うような形となります。またformタグ内には、お問い合わせフォーム全体に関する設定を決める「action・method」と呼ばれる属性が用いられます。両者の違いは以下のとおりです。
- action：フォームの送信ボタンを押した後の送信先を指定する
- method：データの転送方法を指定する
inputタグ
inputタグを用いるとテキストフィールドを作成できます。テキストフィールドに入力できる形式を決める際は「type・name」属性を用います。両者の違いは以下のとおりです。
- type：テキストフィールドに入力できる内容を指定する（例：数字のみ入力可能、メールアドレス形式など）
- name：テキストフィールドに入力された内容を項目分けする（例：氏名、電話番号など）
labelタグ
labelタグの間に「項目名（ラベル）」を記載すれば、inputタグ内の入力欄と項目名が紐づけされます。これにより以下3点のような、利便性向上のメリットが得られます。
- 関連性が視覚的にわかる：入力欄に何を書けばいいのかが一目でわかる
- 項目名と入力欄が連動する：ユーザーが項目名をクリックすると、入力欄にもその動作が反映されてアクティブ化する
- 読み上げ機能に対応できる：読み上げソフトを使用しているユーザーがフォーム入力欄にカーソルを移動すると、項目名を読み上げてくれる
textareaタグ
テキストエリアを表示するのに必要なのが、textareaタグです。タグ内に属性「placeholder」を追加すれば、フォームのなかに、あらかじめ薄い文字を表示できる機能が使えます。これにより入力内容の例や説明を表示できるため、ユーザーがより使いやすいフォームに仕上げることができます。
selectタグ
セレクトボックスの外枠としての機能を果たすのが、selectタグです。optionタグ内に各選択肢を入力した後に、selectタグで全体を囲むことではじめて、セレクトボックスとして機能させることができます。
optionタグ
セレクトボックス内の各選択肢を作成する際は、optionタグを使用します。このときタグ内に「value」属性を用いることで、どの項目を選択したのかコンピューターが判別できるようになります。
buttonタグ
buttonタグを使えば送信ボタンを作成できます。inputタグを使用しても送信ボタンは作れますが、より自由度が高いのはbuttonタグです。タグ内に属性「type」を使い「submit」を指定することで、送信フォームボタンを表示できます。
HTMLを用いたお問い合わせフォームの作り方
HTMLを用いた、お問い合わせフォームを作るときの流れについて確認します。以下のプロセスに沿って順番に解説します。
- 全体のレイアウトを確認する
- タイトルの見た目を考える
- コンタクトフォームを設置する
- 入力欄を作成する
- お問い合わせ内容欄を作成する
- 送信ボタンを設置する
全体のレイアウトを確認する
本格的なコーディング作業に入る前に、まずはお問い合わせフォーム全体の構図を確認します。はじめにフォーム内の空白・幅・配置などをイメージした後は、実際にHTMLで大枠を作成しましょう。そして、CSSでフォーム全体のフォント・色・余白などを整えていきます。
なお、HTMLとCSSの違いは以下のとおりです。
- HTML：Webページに表示するテキストや画像を既述する
- CSS：テキストや画像のデザインを変える（例：色、大きさ、配置など）
タイトルの見た目を考える
お問い合わせフォーム全体の体裁が整った後は、いよいよコーディング作業に入ります。まずはフォームの一番上に来る「タイトル」を作成しましょう。デザインを確認した後は、HTMLでテキストを作成し、CSSで見た目を整える順番で作業を行います。
コンタクトフォームを設置する
続いて、お問い合わせフォーム項目のデザイン作成を行います。まずはformタブでフォームの外枠を作成し、その後は横幅や送信ボタンとフォーム間の空白などを、CSSで細かく設定しましょう。
もし表形式で表示したい場合には、formタブ間に「table」タグを新たに追加し、項目全体を囲うようにすると良いでしょう。これにより、全項目名と入力内容が一つの表として認識されます。またその際は、以下3種類のタグをセットで使い分けましょう。
- trタグ：一行ごとで括り、指定する
- thタグ：各trタグ内における、項目名を指定する
- tdタグ：各trタグ内における、入力欄を指定する
入力欄を作成する
お問い合わせフォームの細かなデザイン作成が完了すれば、次は入力項目の記述・入力欄の作成を行います。お問い合わせフォームを構成する項目としては、おもに「氏名・メールアドレス・電話番号・お問い合わせ内容」の4つが挙げられます。必要であれば、性別や職業などを追加しましょう。
またCSSによる作業では「appearance」と呼ばれるプロパティを活用するのがおすすめです。Webページは、OSやブラウザによって見た目が異なる場合があります。そんなときappearanceプロパティを使えば、同じスタイルで統一表示できる効果があります。
お問い合わせ内容欄を作成する
最後の「お問い合わせ内容」は、ユーザーが自由に入力できるよう、inputタグでテキストフィールドを作成しましょう。HTMLでの作成後は、CSSで入力欄の幅・高さ・余白などを整えます。
送信ボタンを設置する
項目全体が完成すれば、最後に送信ボタンを作成して完了です。HTMLにおけるinputタグか、buttonタグを用いて構造を記述し、その後CSSで文字の大きさや背景色などを整えます。より使いやすい仕様にするのであれば、最後に「cursor: pointer」を記述するのがおすすめです。送信ボタンに合わせたときのマウスカーソルのデザインが変わる仕様になります。
HTMLを用いたお問い合わせフォームの作成例
さらに項目・機能を追加すると画像のようなお問い合わせフォームが作成できます。実際に作成するときのイメージとして、参考にしてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
</head>
<body>
<div>
<h1>お問い合わせ入力フォーム</h1>
</div>
<form action="confirm.php" method="post" name="form" onsubmit="return validate()">
<p>お問い合わせ内容をご入力の上、「確認画面へ」ボタンをクリックしてください。</p>
<div>
<label>お名前<span>必須</span></label>
<input type="text" name="name" placeholder="例）山田太郎" value="">
</div>
<div>
<label>ふりがな<span>必須</span></label>
<input type="text" name="furigana" placeholder="例）やまだたろう" value=""> </div>
<div>
<label>メールアドレス<span>必須</span></label>
<input type="text" name="email" placeholder="例）guest@example.com" value=""> </div>
<div>
<label>電話番号<span>必須</span></label>
<input type="text" name="tel" placeholder="例）0000000000" value=""> </div>
<div>
<label>性別<span>必須</span></label>
<input type="radio" name="sex" value="男性" checked> 男性
<input type="radio" name="sex" value="女性"> 女性
</div>
<div>
<label>お問い合わせ種別<span>必須</span></label>
<select name="item">
<option value="">お問い合わせ項目を選択してください</option>
<option value="ご意見・ご感想">ご意見・ご感想</option>
<option value="不具合について">不具合について</option>
<option value="返信希望">返信希望</option>
</select>
</div>
<div>
<label>お問い合わせ内容<span>必須</span></label>
<textarea name="content" rows="5" placeholder="お問合せ内容を入力"></textarea>
</div>
<button type="submit">確認画面へ</button>
</form>
</div>
</body>
</html>
お問い合わせフォームを設置するメリット
お問い合わせフォーム作成方法について解説しました。では、実際にフォームがあることでどのようなメリットが得られるのでしょうか。ここでは4つに分けて解説します。
手軽にWebサイトから問い合わせができる
電話の場合、対応可能時間に制限がある・繋がりにくい時間帯があるなどのデメリットがあります。その点お問い合わせフォームであれば、ユーザー側にとって時間の縛りがありません。
またメール対応と比較しても、お問い合わせフォーム利用のメリットがみられます。メールだと記入内容や構成をすべてユーザー側で考える必要があり、手間・時間がかかります。しかしフォームからのお問い合わせであれば、必要な情報をフォーマットに沿って入力するだけで完結します。利便性の高さもフォーム利用のメリットといえるでしょう。
知りたい情報を確実に入手できる
メールによるお問い合わせの場合、回答に必要な情報が足りない場合もあります。それゆえ企業側から再度確認のために連絡を取る必要があり、運営効率が悪くなってしまうでしょう。しかしフォームを利用すれば、知りたい情報を事前に指定できるため、スムーズな対応が可能です。
メールアドレスを公開する必要がなくなる
お問い合わせフォームの場合は、送信先である企業メールアドレスをWeb上に公開する必要がありません。そのため、企業側にとっては迷惑メール防止策としても役立ちます。
アクセス解析ツールでユーザーの流入を分析できる
お問い合わせフォームの仕様によっては、自動で顧客情報の収集・管理ができるものもあります。ユーザーのニーズや要望を客観的に分析できるため、運営課題の改善に役立つ可能性があります。
お問い合わせフォームを作成する際の注意点
お問い合わせフォームの設置で多くのメリットを期待できる一方で、作成時には注意すべき点もあります。ここで紹介する4つのポイントをふまえながら、ユーザー目線のフォーム作りを目指しましょう。
入力項目は必要最低限で見やすくシンプルにする
入力項目が多いとユーザーの負担が増え、せっかくのフォーム利用のメリットが薄れてしまいます。作成時は、ユーザーが途中離脱しないよう、シンプルなデザインを意識しましょう。
記入例を表示する
回答欄のなか、または上下に入力項目の記入例があると、何を書けばよいのか一目で分かるため、より使いやすいフォームになります。また入力漏れや書式間違いなど、ミスを事前に防ぐことにもつながります。
入力ミスのエラーを表示させる
すべての入力完了後にミスが見つかると、ユーザーは再度やり直すため、手間がかかります。可能であれば、各項目に入力した時点でエラー表示が出るように設定できると良いでしょう。
入力内容の確認画面を表示する
送信前に入力内容をもう一度確認できる画面があると、ミスが減って正しい情報を送受信しやすくなります。確認画面で不備が見つかった場合には、該当項目のみ修正できるような機能があると良いでしょう。入力・確認・送信完了の3ステップがあると、ユーザーがより安心して利用できます。
簡単にフォームを作りたいならフォーム作成ツールがおすすめ！
お問い合わせフォームにかかる手間・負担軽減には、フォーム作成ツールを利用するのがおすすめです。なかでも今回紹介する作成ツール「クライゼル」は、お問い合わせや資料請求など、目的に応じたフォーム作成が可能です。
またユーザビリティはもちろんのこと、企業側にも便利な機能が搭載されています。一つは「フォームのカスタマイズがしやすい」点です。クライゼルで一度契約すれば、問い合わせフォームやそのデータベースを支店・事業部ごとに複数作成できるうえ、お問い合わせ対応方法も細かく設定できます。
またフォームに入力された内容に応じて、お問合わせがあった旨のメール送信先を変更できるなど、臨機応変な使い方ができるのも魅力です。さらにはデータ閲覧可能なアカウントを追加費用なしに追加したり、アカウントの権限を制限できるため、状況に合わせた円滑なデータ共有が実現できるでしょう。
クライゼルは、顧客管理や分析機能・自動返信メール機能など、お問い合わせフォーム利用の効率化にむけたシステム内容が充実しています。詳しいシステム内容・資料請求については、クライゼルサイトよりご確認ください。
まとめ
この記事では、HTMLを用いたお問い合わせフォームの作成方法・メリットと注意点について解説しました。
お問い合わせフォームを持っていれば、ユーザー・企業側どちらも多くのメリットを受けられます。一方で、作成には複合的なITスキルが欠かせません。またユーザーにとって使いやすい機能が備わっているのか、客観的な判断も必要です。そのため、ポイントを押さえて自社で作成する際は、手間・時間などのコストがかかるでしょう。
そのようなときに役立つのが、フォーム作成ツールです。ツールを利用すれば、作成・運用コストが大きく削減できます。お問い合わせフォーム作成における選択肢の一つとして、ぜひご検討ください。
