基本ノウハウ
BtoB企業にとって、お問い合わせフォームは顧客との貴重な接点になります。しかし、これから新しい自社サイトを作る方にとっては「どのように作れば良いか」「成約につながるコツはあるか」など気になることが多いでしょう。
本記事では、お問い合わせフォームの作り方を解説します。無料で使える作成ツールや、デザインの参考になるギャラリーサイトもあわせて紹介します。ぜひ参考にしてみてください。
お問い合わせフォームを作るためには、基本の形を知っておく必要があります。ここでは、お問い合わせフォームの構成要素や種類を見ていきましょう。
お問い合わせフォームに必要な基本的な要素は、下表の通りです。
| 構成要素 | 設置する目的 | 例 |
|---|---|---|
| 入力フォーム | 情報を入力してもらうため | ・問い合わせ内容 ・名前や会社名 ・連絡先 など |
| 確認画面 | 入力内容を確認してもらうため | ・「以下の内容で送信してもよろしいですか？」 など |
| 完了画面 | 送信がきちんと実行されたことを知ってもらうため | ・「送信が完了しました」 など |
| セキュリティ機能 | 入力情報の流出を防ぐため | ・通信の暗号化（SSL） など |
| スパム対策 | ・スパム対策ツールの導入 など | |
| レスポンシブ対応 | パソコンやスマホなど、デバイスごとに使いやすい形のフォームを提示するため | ・パソコンは横長、スマホは縦長表示に対応する など |
なお入力フォームに設定する項目は、基本的に次の3つになります。
問い合わせ内容は大まかなカテゴリを選択式でチェックできるようにしておき、細かい内容を自由記述してもらうと良いでしょう。上記以外の項目は任意にすると、入力の手間が省けて離脱を防ぎやすくなります。
お問い合わせフォームの種類は、一体型フォームと遷移型フォームの2つです。一体型フォームとは、同一ページ内に設置されているお問い合わせフォームのことで、遷移型フォームとは、別ページへ移動してから入力するお問い合わせフォームになります。
それぞれのメリット・デメリットは、下表の通りです。
| メリット | デメリット | |
|---|---|---|
| 一体型フォーム | 行動意欲が高いユーザーを成約（CV）へつなげやすい | 離脱の原因がフォームにあるか、ページ全体にあるか判断しにくい ※ただしヒートマップを活用すると分析可能なケースもあり |
| 遷移型フォーム | 離脱の原因がフォームのどこにあるか、詳細な分析を進めやすい | 前ページの内容を確認するなど入力中にページを戻ると、行動意欲が下がってそのまま離脱される可能性がある |
BtoB企業に寄せられる問い合わせは、BtoCよりも長い期間の検討段階を経ています。その分遷移型フォームであっても、行動意欲の低下による離脱は考えにくいといえるでしょう。
よってBtoB企業では、サイト全体のデザインに合わせてお問い合わせフォームの種類を決めても問題ありません。例えば見た目がシンプルなWebサイトに仕上げたい場合は遷移型フォームにし、ページをスクロールするなかで、自然とお問い合わせにたどり着けるようにしたい場合は一体型フォームという使い分け方もできます。
ここではお問い合わせフォームの具体的な作り方について、難易度の低いものから順に解説します。
それぞれ詳しく見ていきましょう。
お問い合わせフォームの作り方で最も簡単なのが、ツールの活用による作成です。お問い合わせフォーム作成ツールはカスタマイズの自由度が高い上、集計や管理もしやすくなります。ツールの選び方は、次の5つを参考にしてみてください。
なお具体的なツールについては、「4.お問い合わせフォーム作成ツール3選【無料も可】」で解説します。
作成ツールの次に簡単なのが、ワードプレスを活用した作り方です。ワードプレス内のプラグインを活用することで、プログラミングの知識がなくてもお問い合わせフォームを作れます。お問い合わせフォームを作成できる代表的なプラグインは、次の5つです。
いずれも無料で利用できますが、機能を拡張できる有料バージョンもあり、月額1,000円前後から利用できます。特に自社サイトをワードプレスで作っている企業は、お問い合わせフォームも同じプラットフォームで作ると管理しやすいでしょう。
お問い合わせフォームの作り方で最も難易度の高い方法が、プログラミング言語を使った作成です。プログラミング言語を使った作り方は、次の3つがあります。
それぞれの特徴やソースコードの例を見ていきましょう。
HTMLとは最も基本的なプログラミング言語であり、Webサイトの見た目を形作ります。HTMLでお問い合わせフォームを作る際のソースコードは、次の通りです。
<form action="confirm.php" method="post">
<div class="item">
<label class="label" for="name">お名前<span class="label-required">(必須)</span>：</label>
<input id="name" type="text" name="yourname">
</div>
<div class="item">
<label class="label" for="email">メールアドレス<span class="label-required">(必須)</span>：</label>
<input id="email" type="email" name="email" placeholder="example@gmail.com">
</div>
<div class="item">
<label class="label" for="tel">電話番号<span class="label-required">(必須)</span>：</label>
<input id="tel" type="text" name="tel" placeholder="000-0000-0000">
</div>
<div class="item">
<label class="label" for="name">会社名<span class="label-required">(必須)</span>：</label>
<input id="company" type="text" name="company">
</div>
<div class="item">
<label class="label">お問い合わせ項目<span class="label-required">(必須)</span>：</label>
<select name="item">
<option value="product">自社製品について</option>
<option value="order">資料請求について</option>
<option value="ship">無料デモについて</option>
<option value="other">その他</option>
</select>
</div>
<div class="item">
<label class="label" for="textarea-item">お問い合わせ内容<span class="label-required">(必須)</span>：
</label>
<textarea id="textarea-item"></textarea>
</div>
<div class="btn">
<button type="submit">送信</button>
</div>
</form>
お問い合わせ内容は先に大まかな項目を選択し、次に詳細について自由記述できるようになっています。
JavaScriptは、HTMLで作った基本形に動きを加えるプログラミング言語です。例えば入力中にミスがあったときにエラーを表示する場合のソースコードは、次のようになります。
$("form.form1").submit(function() {
//エラーの初期化
$("p.error").remove();
$("table tr td").removeClass("error");
$(":text,textarea").filter(".validate").each(function(){
//必須項目のチェック
$(this).filter(".required").each(function(){
if($(this).val() =="") {
$(this).parent().prepend("
<p class="error">必須項目です</p>
");
}
});
//エラー時の処理
if($("p.error").size() > 0) {
return false; //submit処理の中断
}
上記では必須項目に抜け漏れがあった場合に、「必須項目です」というメッセージとともにエラーを表示します。かつ、エラーがあった場合に送信ボタンを押せないようにサブミット処理も追加されています。
PHPもJavascriptと同様に、動きを加えるプログラミング言語です。お問い合わせフォームの作成では、主に画面の切り替えにPHPが使用されます。例えば確認画面に切り替わる際のPHPは、次の通りです。
<?php if($_POST ){ ?>
<!-- 確認画面 -->
<form action="./cotactform.php" method="post">
名前 <?php echo $_POST["fullname"] ?>
メールアドレス <?php echo $_POST["email"] ?>
お問い合わせ内容 <?php echo nl2br($_POST["message"]) ?>
<input type="submit" name="back" value="戻る" />
<input type="submit" name="send" value="送信" />
</form>
<?php } ?>
上記では入力した情報を提示し、問題がなければ送信ボタン、修正したい場合は戻るボタンを押せるようになっています。
お問い合わせフォームの入力中にユーザーを離脱させないようにするためには、次のような工夫が必要です。
上記のような工夫は一般的に、EFO（エントリーフォーム最適化）と呼ばれます。EFOについて詳しく知りたい方は、ぜひこちらの記事も参考にしてみてください。
お問い合わせフォームは自力でも作成できますが、ツールを活用するとより簡単かつ迅速に設置できます。ここでは代表的なお問い合わせフォーム作成ツールを、3つ見ていきましょう。
それぞれ詳しく解説します。
Google フォームは、Googleが提供するお問い合わせフォーム作成ツールです。無料でも利用でき、有料版（1,360円/月～）ではデータ容量の増加や一元管理が可能になります。お問い合わせフォームの回答はグラフで出力できるため、情報の整理や分析にも役立つでしょう。具体的な作成方法は、次の通りです。
作成したフォームはメールにリンクを貼れるため、メルマガなどからお問い合わせフォームへつなげたいときにも利用できます。手軽にお問い合わせフォームを作りたい方は、まずはGoogle フォームの無料版を活用してみてはいかがでしょうか。
formrunは、株式会社ベーシックのお問い合わせフォーム作成ツールです。テンプレートを選択しクリックで項目を追加するだけで、お問い合わせフォームを最短5分で作成できます。主な機能は、次の通りです。
問い合わせ内容はカンバン方式、つまり1件ずつカード形式で表示されます。新着や対応中などのステータスや担当者を、一目で確認できます。有料版（3,800円/月～）になれば設置できるフォーム数が増えるため、セミナーアンケートなど他のフォームも一括して管理したい方におすすめです。
SECURE FORMは、株式会社イー・ネットワークスのお問い合わせフォーム作成ツールです。登録者数は4万人を突破しています。無料で始められる上、ドラッグ＆ドロップだけで簡単にお問い合わせフォームを作成できます。主な機能は、次の通りです。
有料版（990円/月～）は、フォーム作成数や質問項目数を増やせます。回答データの保存や解析もできるようになるため、本格的にSECURE FORMを使い続けたい場合は有料版への移行も検討しましょう。
最後に、お問い合わせフォーム作成時の参考になるギャラリーサイトについて3つ解説します。
お問い合わせフォームに設置する項目や、デザインで悩んでいる方は1つずつチェックしていきましょう。
S5-Styleは、国内のWebサイトが集まったギャラリーサイトです。2022年12月時点で8,500以上のWebサイトが登録されており、うちBtoBのWebサイトは700件以上にものぼります。検索可能な条件は、次の5つです。
上記の検索条件は指定したワードをすべて含むAND検索と、いずれかを含むOR検索の2つを利用できます。お問い合わせフォームのイメージがある程度固まっており、参考になるWebサイトを詳細に検索したい方におすすめです。
ズロックはサムネイル画像を小さくすることで、一度に多くのデザインをチェックできるギャラリーサイトです。2022年12月時点で2,800以上のWebサイトが登録されており、うちBtoBのWebサイトは66件あります。検索可能な条件は、次の4つです。
ズロックには海外サイトも登録されており、国内サイトとはまた違ったデザインも参考になります。特にオリジナリティのあるWebサイトや、お問い合わせフォームを作りたい方におすすめです。
LP ARCHIVEは、LP（ランディングページ）をまとめたギャラリーサイトです。2022年12月時点で3万点以上のLPが登録されており、BtoBで検索すると22件ヒットします。検索可能な条件は、次の3つです。
会員登録すると、お気に入り機能の利用が可能です。参考になりそうなLPをストックしておくと、いざというときに検索する手間が省けます。特にLP内に設置するお問い合わせフォームのデザインに迷っている方は、ぜひ参考にしてみてください。
お問い合わせフォームは、BtoB企業にとって顧客と接点を持つ大切なページです。作り方はワードプレスやプログラミング言語などがありますが、最も簡単なのがツールの活用です。無料で使用できるツールもあり、手始めに軽くお問い合わせフォームを作ってみたいという方にも使いやすくなっています。
また、お問い合わせフォームを作成する際はギャラリーサイトも便利です。さまざまなWebサイトを閲覧でき、お問い合わせフォーム作成時もデザインの参考になります。
お問い合わせフォームを作りたい方は、便利なツールやサイトを積極的に活用していきましょう。
