お問い合わせフォームの作成手段としては「HTMLやPHPなどでコーディングする・WordPressのプラグインで作成する・フォーム作成ツールを使う」の3種類が挙げられます。なかでも今回はHTMLによるフォーム作成について、ピックアップして紹介します。
自社のホームページのイメージと合わせたフォームを作成したい、フォームのバックエンド開発にリソースをさけない際などはクライゼルのwebフォーム作成ツールのご利用をぜひご検討ください。
クライゼルのwebフォーム作成ツールを利用することで、HTML/CSSによるフォームのフルカスタマイズ、入力データの管理、お客様への自動返信メール、社内への通知メール、slack連携などまとめて実施することが可能です。クライゼルライトプランなら、月額１万円でご利用いただけます。ぜひ、こちらからカタログをダウンロードください。
お問い合わせフォームとは？
お問い合わせフォームとは、ホームページを閲覧した方からの質問や資料請求などを受け付けるために設置するWebフォームです。お問い合わせ方法には、電話やメールもありますが、電話対応できる時間が限られていたり、メールに必要な情報が記載されていないといった課題もあります。
一方お問い合わせフォームは、いつでも利用可能で、決められた設問に回答することで必要情報の収集も確実にでき非常に利便性が高いといえるでしょう。また、企業にとっても、電話オペレーターを雇用する必要がないため、場合により人件費節約にもつながります。お問い合わせフォームの設置は、電話やメール対応にみられる課題を解消できる方法といえます。
お問い合わせフォームはHTMLで作れる？
フォーム項目の設定や表示はHTMLを用いて作成し、フォームのデザイン（見た目）はCSSを書いて調整します。その後実際にフォームとして機能するように、データ格納や自動返信メールなどの機能をPHPを利用してプログラミングを行い組み込んでいきます。
そこからさらに、入力された値に対するバリデーションや、入力項目を分岐をさせたりするなどのユーザーが使いやすい画面仕様になるようにJavaScriptの技術も活用します。お問い合わせフォーム作成には、複合的な知識や技術が必要といえるでしょう。
この記事では、まずHTMLだけでフォームを作成するところに関して記述します。
もしも簡単にwebフォームの制作をしたいという場合は、クライゼルのwebフォーム作成ツールをご検討ください。webフォームの制作も業者に依頼したい場合は弊社のフォーム制作サービスをぜひご検討ください。
お問い合わせフォームの作成に必要な要素
HTMLでお問い合わせフォームを作成するにあたり、まずはフォームを構成する6つの要素について紹介します。
テキストエリア
テキストエリアは、ユーザーからの長文入力を受け取るためのフォーム要素です。HTMLで <textarea> タグを使い、行数や列数を指定して大きさを設定できます。例えば：
<textarea rows="4" cols="50"> ここにテキストを入力してください。 </textarea>
このコードでは、4行50列のテキストエリアが作成されます。欠かせないのは、テキストエリアは input タグと異なり、閉じタグ </textarea> が必要なことです。
参考までにテキストエリアを表示するHTML全文のコードも記載しておきます。このコードをhtmlファイルとして保存し、実行すると以下の様なテキストエリアがブラウザ上に表示されます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>テキストエリアの例</title> </head> <body> <textarea rows="4" cols="50"> ここにテキストを入力してください。 </textarea> </body> </html>
テキストフィールド
テキストフィールドは、ユーザーからの短い文字列入力を受け取るためのフォーム要素です。HTMLで <input> タグを使い、type 属性を “text” に設定します。テキストエリアと機能は似ていますが、テキストフィールドは1行、かつ文字制限があるという特徴があります。例えば：
<input type="text" placeholder="ここに文字を入力してください">
このコードでは、1行のテキスト入力フィールドが作成されます。プレースホルダーは、入力前に表示される案内テキストです。閉じタグは必要ありません。
参考までにテキストフィールドを表示するHTML全文のコードも記載しておきます。このコードをhtmlファイルとして保存し、実行すると以下の様なテキストフィールドがブラウザ上に表示されます。テキストフィールドの表示される長さを調整するには、size 属性を設定します。size=”30″ の部分で長さを指定しています。この値を調整することで、フィールドの表示長さを変更できます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>テキストフィールドの例</title> </head> <body> <input type="text" placeholder="ここに文字を入力してください" size="30"> </body> </html>
チェックボックス
チェックボックスは、複数の選択肢から一つまたは複数を選択できるフォーム要素です。HTMLで <input> タグを使い、type 属性を “checkbox” に設定します。例えば：
<label> <input type="checkbox" name="option1" value="yes"> オプション1 </label>
このコードでは、”オプション1″ というチェックボックスが作成されます。<label> タグを使うことで、テキスト部分をクリックしてチェックボックスを操作できます。
参考までに３つのチェックボックスを表示するHTML全文のコードも記載しておきます。このコードをhtmlファイルとして保存し、実行すると以下の様なチェックボックスがブラウザ上に表示されます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>チェックボックスの例</title> </head> <body> <label> <input type="checkbox" name="option1" value="option1"> オプション1 </label><br> <label> <input type="checkbox" name="option2" value="option2"> オプション2 </label><br> <label> <input type="checkbox" name="option3" value="option3"> オプション3 </label> </body> </html>
ラジオボタン
ラジオボタンは、複数の選択肢から一つだけを選択できるフォーム要素です。チェックボックスと似た機能ではありますが、チェックボックスが複数の項目を選べるのに対して、ラジオボタンは一つに限定して選ぶことができます。HTMLで <input> タグを使い、type 属性を “radio” に設定します。同じグループのラジオボタンには同じ name 属性を割り当てます。例えば：
<label> <input type="radio" name="group1" value="option1"> オプション1 </label> <label> <input type="radio" name="group1" value="option2"> オプション2 </label>
このコードでは、”オプション1″ と “オプション2” のいずれか一つを選択できるラジオボタンが作成されます。<label> タグを使うことで、テキスト部分をクリックしてラジオボタンを操作できます。
参考までに２つのラジオボタンを表示するHTML全文のコードも記載しておきます。このコードをhtmlファイルとして保存し、実行すると以下の様なラジオボタンがブラウザ上に表示されます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ラジオボタンの例</title> </head> <body> <label> <input type="radio" name="group1" value="option1"> オプション1 </label><br> <label> <input type="radio" name="group1" value="option2"> オプション2 </label> </body> </html>
セレクトボックス
セレクトボックスは、プルダウンメニュー形式でユーザーに複数の選択肢から一つを選ばせるフォーム要素です。生年月日の入力・居住地域の選択などで利用されています。HTMLで <select> タグを使い、選択肢それぞれを <option> タグで囲みます。例えば：
<select name="options"> <option value="option1">オプション1</option> <option value="option2">オプション2</option> <option value="option3">オプション3</option> </select>
このコードでは、”オプション1″、”オプション2″、”オプション3″ の中から一つ選ぶことができるセレクトボックスが作成されます。<select> タグの name 属性は、選択した値をサーバーに送信する際に使用されます。
参考までに３つの選択肢を表示するセレクトボックスのHTML全文のコードも記載しておきます。このコードをhtmlファイルとして保存し、実行すると以下の様なセレクトボックスがブラウザ上に表示されます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>セレクトボックスの例</title> </head> <body> <select name="options"> <option value="option1">オプション1</option> <option value="option2">オプション2</option> <option value="option3">オプション3</option> </select> </body> </html>
送信ボタン
送信ボタンは、フォームに入力されたデータをサーバーに送るためのボタンです。HTMLで <input> タグを使い、type 属性を "submit" に設定します。例えば：
<input type="submit" value="送信">
このコードでは、「送信」と表示された送信ボタンが作成されます。value 属性にはボタンに表示されるテキストを指定します。このボタンをクリックすると、フォーム内のデータが指定されたサーバーに送信されます。
参考までに送信ボタンのHTML全文のコードも記載しておきます。このコードをhtmlファイルとして保存し、実行すると以下の様な送信ボタンがブラウザ上に表示されます。フォームタグ (<form>) で囲まれているため、このボタンをクリックしたときにデータが指定されたアクション (action="#") に送信されます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>送信ボタンの例</title> </head> <body> <form action="#" method="post"> <input type="submit" value="送信"> </form> </body> </html>
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を用いたお問い合わせフォームの作成例
これまで説明したHTMLでシンプルなお問合わせフォームを作ってみます。CSS（見た目を整える）使わずにHTMLだけで作成していますので、後述のHTMLコードと対比して確認すると、HTMLでのフォーム作成のイメージがかなりつかめるとおもいます。
こちらが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スキルが欠かせません。またユーザーにとって使いやすい機能が備わっているのか、客観的な判断も必要です。そのため、ポイントを押さえて自社で作成する際は、手間・時間などのコストがかかるでしょう。
そのようなときに役立つのが、フォーム作成ツールです。ツールを利用すれば、作成・運用コストが大きく削減できます。お問い合わせフォーム作成における選択肢の一つとして、ぜひご検討ください。
