基本ノウハウ

お問い合わせフォームの作り方を基礎から実践まで解説|無料ツールも

お問い合わせフォームの作り方を基礎から実践まで解説|無料ツールも

BtoB企業にとって、お問い合わせフォームは顧客との貴重な接点になります。しかし、これから新しい自社サイトを作る方にとっては「どのように作れば良いか」「成約につながるコツはあるか」など気になることが多いでしょう。

本記事では、お問い合わせフォームの作り方を解説します。無料で使える作成ツールや、デザインの参考になるギャラリーサイトもあわせて紹介します。ぜひ参考にしてみてください。

目次

1.お問い合わせフォームの基本形

お問い合わせフォームを作るためには、基本の形を知っておく必要があります。ここでは、お問い合わせフォームの構成要素や種類を見ていきましょう。

構成要素

お問い合わせフォームに必要な基本的な要素は、下表の通りです。

構成要素 設置する目的
入力フォーム 情報を入力してもらうため ・問い合わせ内容
・名前や会社名
・連絡先 など
確認画面 入力内容を確認してもらうため ・「以下の内容で送信してもよろしいですか?」 など
完了画面 送信がきちんと実行されたことを知ってもらうため ・「送信が完了しました」 など
セキュリティ機能 入力情報の流出を防ぐため ・通信の暗号化(SSL) など
スパム対策 ・スパム対策ツールの導入 など
レスポンシブ対応 パソコンやスマホなど、デバイスごとに使いやすい形のフォームを提示するため ・パソコンは横長、スマホは縦長表示に対応する など

なお入力フォームに設定する項目は、基本的に次の3つになります。

  • 問い合わせ内容(種類:選択式と具体的な内容:自由記述)
  • 名前または会社名
  • 連絡先(主にメールアドレス)

問い合わせ内容は大まかなカテゴリを選択式でチェックできるようにしておき、細かい内容を自由記述してもらうと良いでしょう。上記以外の項目は任意にすると、入力の手間が省けて離脱を防ぎやすくなります。

フォームの種類

お問い合わせフォームの種類は、一体型フォームと遷移型フォームの2つです。一体型フォームとは、同一ページ内に設置されているお問い合わせフォームのことで、遷移型フォームとは、別ページへ移動してから入力するお問い合わせフォームになります。

それぞれのメリット・デメリットは、下表の通りです。

メリット デメリット
一体型フォーム 行動意欲が高いユーザーを成約(CV)へつなげやすい 離脱の原因がフォームにあるか、ページ全体にあるか判断しにくい
※ただしヒートマップを活用すると分析可能なケースもあり
遷移型フォーム 離脱の原因がフォームのどこにあるか、詳細な分析を進めやすい 前ページの内容を確認するなど入力中にページを戻ると、行動意欲が下がってそのまま離脱される可能性がある

BtoB企業に寄せられる問い合わせは、BtoCよりも長い期間の検討段階を経ています。その分遷移型フォームであっても、行動意欲の低下による離脱は考えにくいといえるでしょう。

よってBtoB企業では、サイト全体のデザインに合わせてお問い合わせフォームの種類を決めても問題ありません。例えば見た目がシンプルなWebサイトに仕上げたい場合は遷移型フォームにし、ページをスクロールするなかで、自然とお問い合わせにたどり着けるようにしたい場合は一体型フォームという使い分け方もできます。

2.お問い合わせフォームの作り方

ここではお問い合わせフォームの具体的な作り方について、難易度の低いものから順に解説します。

  • ツールを活用する
  • ワードプレスを利用する
  • プログラミング言語を使う

それぞれ詳しく見ていきましょう。

ツールを活用する

お問い合わせフォームの作り方で最も簡単なのが、ツールの活用による作成です。お問い合わせフォーム作成ツールはカスタマイズの自由度が高い上、集計や管理もしやすくなります。ツールの選び方は、次の5つを参考にしてみてください。

  • 自社サイトのデザインにマッチしているか
  • セキュリティ対策はあるか
  • 外部ツールとの連携は可能か
  • 管理・分析機能は付いているか
  • CSVファイルなどに出力できるか など

なお具体的なツールについては、「4.お問い合わせフォーム作成ツール3選【無料も可】」で解説します。

ワードプレスを利用する

作成ツールの次に簡単なのが、ワードプレスを活用した作り方です。ワードプレス内のプラグインを活用することで、プログラミングの知識がなくてもお問い合わせフォームを作れます。お問い合わせフォームを作成できる代表的なプラグインは、次の5つです。

  • Contact Form by WPForms
  • Jetpack by WordPress.com
  • Contact Form7
  • Ninja Forms
  • MW WP Form

いずれも無料で利用できますが、機能を拡張できる有料バージョンもあり、月額1,000円前後から利用できます。特に自社サイトをワードプレスで作っている企業は、お問い合わせフォームも同じプラットフォームで作ると管理しやすいでしょう。

プログラミング言語を使う

お問い合わせフォームの作り方で最も難易度の高い方法が、プログラミング言語を使った作成です。プログラミング言語を使った作り方は、次の3つがあります。

  • HTMLでの作り方
  • JavaScriptでの作り方
  • PHPでの作り方

それぞれの特徴やソースコードの例を見ていきましょう。

HTMLでの作り方

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での作り方

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での作り方

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 } ?>

上記では入力した情報を提示し、問題がなければ送信ボタン、修正したい場合は戻るボタンを押せるようになっています。

3.お問い合わせフォームの作り方で押さえたいポイント

お問い合わせフォームの入力中にユーザーを離脱させないようにするためには、次のような工夫が必要です。

  • 必須項目を目立たせる
  • 不必要なリンクは設置しない
  • 入力例を表示する
  • 半角や全角の指定を明記する
  • エラーメッセージは即表示する など

上記のような工夫は一般的に、EFO(エントリーフォーム最適化)と呼ばれます。EFOについて詳しく知りたい方は、ぜひこちらの記事も参考にしてみてください。

4.お問い合わせフォーム作成ツール3選【無料も可】

お問い合わせフォームは自力でも作成できますが、ツールを活用するとより簡単かつ迅速に設置できます。ここでは代表的なお問い合わせフォーム作成ツールを、3つ見ていきましょう。

  • Google フォーム
  • formrun
  • SWCURE FORM

それぞれ詳しく解説します。

Google フォーム

Google フォームは、Googleが提供するお問い合わせフォーム作成ツールです。無料でも利用でき、有料版(1,360円/月~)ではデータ容量の増加や一元管理が可能になります。お問い合わせフォームの回答はグラフで出力できるため、情報の整理や分析にも役立つでしょう。具体的な作成方法は、次の通りです。

  1. Googleドライブにアクセス
  2. 「新規」から「Google フォーム」を選択 
  3. 「無題のフォーム」にお問い合わせフォームのタイトルを入力
  4. 「フォームの説明」にお問い合わせフォームの説明文を入力
  5. 「無題の質問」に質問内容を入力
  6. 必要に応じて画面右側の「+」ボタンで質問欄を追加
  7. 画面上の「カラーパレット」から色を選択
  8. 画面上の「プレビュー」から全体を確認
  9. 画面右上の「送信」ボタンを押す
  10. HTMLコードをコピーしてWebサイトに埋め込む
Googleフォーム作成の手順を示すスクリーンショット①
Googleドライブにアクセス
新規からGoogleフォームを選択
Googleフォーム作成の手順を示すスクリーンショット②
Googleフォームの操作画面
カラーパレットボタン
プレビューボタン
HTMLコード

作成したフォームはメールにリンクを貼れるため、メルマガなどからお問い合わせフォームへつなげたいときにも利用できます。手軽にお問い合わせフォームを作りたい方は、まずはGoogle フォームの無料版を活用してみてはいかがでしょうか。

formrun

formrunは、株式会社ベーシックのお問い合わせフォーム作成ツールです。テンプレートを選択しクリックで項目を追加するだけで、お問い合わせフォームを最短5分で作成できます。主な機能は、次の通りです。

  • 自動返信メール
  • HTML埋め込み
  • 一斉メール配信 など

問い合わせ内容はカンバン方式、つまり1件ずつカード形式で表示されます。新着や対応中などのステータスや担当者を、一目で確認できます。有料版(3,800円/月~)になれば設置できるフォーム数が増えるため、セミナーアンケートなど他のフォームも一括して管理したい方におすすめです。

SECURE FORM

SECURE FORMは、株式会社イー・ネットワークスのお問い合わせフォーム作成ツールです。登録者数は4万人を突破しています。無料で始められる上、ドラッグ&ドロップだけで簡単にお問い合わせフォームを作成できます。主な機能は、次の通りです。

  • 自動返信メール
  • 通信暗号化(SSL標準対応)
  • 回答データの保存と解析(有料版のみ) など

有料版(990円/月~)は、フォーム作成数や質問項目数を増やせます。回答データの保存や解析もできるようになるため、本格的にSECURE FORMを使い続けたい場合は有料版への移行も検討しましょう。

5.お問い合わせフォーム作成時の参考サイト3選

最後に、お問い合わせフォーム作成時の参考になるギャラリーサイトについて3つ解説します。

  • S5-Style
  • ズロック
  • LP ARCHIVE

お問い合わせフォームに設置する項目や、デザインで悩んでいる方は1つずつチェックしていきましょう。

S5-Style

S5-Styleは、国内のWebサイトが集まったギャラリーサイトです。2022年12月時点で8,500以上のWebサイトが登録されており、うちBtoBのWebサイトは700件以上にものぼります。検索可能な条件は、次の5つです。

  • サービス
  • クリエイティブ(イラストやアニメーションなど)
  • カラー
  • テクニック(HTMLやCSSなど)
  • タイプ(コーポレートサイト、オウンドメディアなど)

上記の検索条件は指定したワードをすべて含むAND検索と、いずれかを含むOR検索の2つを利用できます。お問い合わせフォームのイメージがある程度固まっており、参考になるWebサイトを詳細に検索したい方におすすめです。

ズロック

ズロックはサムネイル画像を小さくすることで、一度に多くのデザインをチェックできるギャラリーサイトです。2022年12月時点で2,800以上のWebサイトが登録されており、うちBtoBのWebサイトは66件あります。検索可能な条件は、次の4つです。

  • 業種
  • レイアウト(CSS、レスポンシブ対応など)
  • カラー
  • 種類(ECサイト、コーポレートサイトなど)

ズロックには海外サイトも登録されており、国内サイトとはまた違ったデザインも参考になります。特にオリジナリティのあるWebサイトや、お問い合わせフォームを作りたい方におすすめです。

LP ARCHIVE

LP ARCHIVEは、LP(ランディングページ)をまとめたギャラリーサイトです。2022年12月時点で3万点以上のLPが登録されており、BtoBで検索すると22件ヒットします。検索可能な条件は、次の3つです。

  • カラー
  • イメージ(シンプル、スタイリッシュなど)
  • カテゴリー

会員登録すると、お気に入り機能の利用が可能です。参考になりそうなLPをストックしておくと、いざというときに検索する手間が省けます。特にLP内に設置するお問い合わせフォームのデザインに迷っている方は、ぜひ参考にしてみてください。

6.まとめ

お問い合わせフォームは、BtoB企業にとって顧客と接点を持つ大切なページです。作り方はワードプレスやプログラミング言語などがありますが、最も簡単なのがツールの活用です。無料で使用できるツールもあり、手始めに軽くお問い合わせフォームを作ってみたいという方にも使いやすくなっています。

また、お問い合わせフォームを作成する際はギャラリーサイトも便利です。さまざまなWebサイトを閲覧でき、お問い合わせフォーム作成時もデザインの参考になります。

お問い合わせフォームを作りたい方は、便利なツールやサイトを積極的に活用していきましょう。


この記事に関連するお役立ち資料

この記事を書いた人

BeMARKE編集部
BeMARKE編集部

BeMARKE(ビーマーケ)は、BtoBマーケティングの課題解決メディアです。 BtoBマーケティングのあらゆる局面に新しい気づきを提供し、リアルで使える「ノウハウ」を発信します。

SNS:XYouTube

著者の最新記事

もっと読む >

あわせて読みたい