• TOP
  • ブログ
  • お問い合わせフォームのテンプレートの作り方|htmlの知識がなくても作れる方法を紹介

blog
ヒアリングDXブログ

お問い合わせフォームのテンプレートの作り方|htmlの知識がなくても作れる方法を紹介

SHARE

  • Twitter
  • Facebook
  • Hatena
  • Pocket
  • LINE

目次

WEBサイトでの集客にはお問い合わせフォームの導入は欠かせないですが、自身で作成するには敷居が高かったり、そもそも何からスタートすれば良いか分からないという方が多いです。

本記事では予算をかけずに無料でクオリティの高いお問い合わせフォームを作る方法やツールを紹介します。

お問い合わせフォームを設置する目的

お問い合わせフォームを設置する主な目的には、次の3つがあります。

  • 顧客が問い合わせをしやすくする
  • 顧客情報を受け取ることでリード(見込み顧客)を獲得できる
  • 顧客情報を管理・分析できる

それぞれ解説します。

顧客が問い合わせをしやすくする

問い合わせフォームを設置する目的の1つとして、顧客が問い合わせをしやすくすることが挙げられます。これまでは、多くの企業で「電話問い合わせ」と「Webサイト上の問い合わせフォーム」を用意していました。ただ、電話での問い合わせの場合は、知りたい内容を直に質問したり、タイムラグなく知りたい情報を獲得できるメリットがある一方で、問い合わせの時間を確保したり、営業につながる電話が嫌いな方もいるのが現実です。

そこで近年は、Web上にある「お問い合せフォーム」のみで受付を行う企業が増えています。お問い合わせフォームの場合は、365日24時間いつでもで問い合わせができるだけでなく、顧客情報をいくつか入力するだけで簡単に欲しい情報を入手可能です。また企業にとっても、受付を自動化できるために人件費を削減できたり、年中無休で受付できるなどのメリットがあるでしょう。

このように、お問い合わせフォームを充実させることは、顧客にも企業側にも大きなメリットがあるのです。

顧客情報を受け取ることでリード(見込み顧客)を獲得できる

お問い合わせフォームを設置する2つ目の目的は、リードナーチャリング(顧客育成)に必要となる顧客情報を受け取れることです。お問い合わせフォームでは、顧客が必要とする情報を提供する代わりに、お問い合わせを行う顧客側の情報を入力してもらうことができます。

顧客の名前や社名、メールアドレスなど、顧客情報として収集したい内容を必須項目とすることで、必要な情報を確実に取得できます。

顧客情報を管理・分析できる

お問い合わせフォームを設置する3つ目の目的は、顧客情報の分析と管理がしやすくなることです。問い合わせ内容を分析することで、自社サービスの改善に繋がるヒントが見つかることもあれば、顧客ニーズを把握するのにも役立つでしょう。

またお問い合わせフォームの中には、顧客情報を自動で管理できる機能をあらかじめ備えているものもあり、問い合わせのたびにExcelなどに手動で落とし込んで顧客管理を行うよりも、簡単かつ確実にリスト管理できます。

お問い合わせフォームで収集した顧客情報は、問い合わせの内容ごとに仕分けを行うことで、より詳細な分析が可能です。そこで良質な質問・よくある質問・サービスへのクレーム・そのほかの問い合わせなどに分類し、それぞれにどのような特徴と傾向があるかの分析を行い、自社商品やサービスの改善に繋がるように活用しましょう。

お問い合わせフォームの作り方3パターン

お問合せフォームの作成には3つの作成方法があります。それぞれのメリットとデメリットについて以下で紹介します。自分のスキルと環境に合った作成方法を見つけましょう。

1.お問い合わせフォーム作成サービスを使ったパターン

お問い合わせフォーム作成サービスを利用した場合、専門的なプログラムの知識が不要なため短時間で作成することができます。タグを設定するだけで、簡単に導入できるものもあります。

メリット

1.専門的な知識が不要

作成サービスの場合、テンプレートが充実しているので文字入力のみで作成することができます。そのため、専門知識要らずでユーザーにとって利用しやすいフォームを設定できます。

特にコード入力が苦手な方や、専門的な知識を持っていない方におすすめです。

2.短時間で作成可能

作成サービスを活用すると、プログラミングなどの手間が無いので、短時間で作成することができます。そのため急いでフォームを導入したい場合や、時間や手間を省きたい方におすすめです。

3.無料機能

お問い合わせフォームの作成サービスの中には、無料で使える機能が幅広く備わっているものがあります。無料機能を活用すれば、コスト削減につながります。

サービスを活用する際、できるだけ費用を抑えたい方は、無料機能が多く備わっているサービスが良いでしょう。

4.流行を抑えたデザイン

作成サービスの場合、今どきのデザインに柔軟に対応しているものが多いです。「レイアウトが原因で離脱率を高めているのでは」と心配する必要もないでしょう。

そのため、レイアウトのセンスがないと悩んでいる方や、おしゃれデザインの優れたフォームを導入したい方におすすめです。

5.スマホ対応可能

作成サービスの中には、スマホで編集や確認を行うことができるものもあります。普段から使用する機会が多いスマホであれば、誰でも手軽に作成することができます。

またユーザーがスマホで入力できるように、スマホ入力の最適化が可能なサービスを選ぶこともおすすめです。

6.SSLなどのセキリュティ面が充実している

サービス内でSSLなどのセキュリティが確立されているので、情報漏洩を防ぐことができます。

7.問い合わせ率が上がる機能が備わっている

リアルタイムのエラーチェックや住所の自動補完など問い合わせ率が上がる機能が備わっています。

8.問い合わせが管理できるサービスがある

取得した情報を管理できるサービスがあり、人の手による情報集約などの手間が省けます。

9.送信障害や受信障害などの対応をサービスの中でしてくれる

何かエラーが起こった場合でもサービス内で修正・改善してくれるので、情報取得する動きが止まることがありません。

以上がお問い合わせフォーム作成サービスを使用するメリットです。もちろん使用するデメリットも存在します。

デメリット

1. 機能制限

サービスが提供している機能しか使えないため、本格的な機能を使用したい場合にはお問い合わせフォーム作成サービスは適していません。

2.サービス側のURL

ホームページに記載するURLがサービス側のURLになってしまいます。

3.有料サービスが存在する

一部の高度な機能を使用する場合に有料になります。サブスクリプションも多く存在します。

メリットとデメリットを比較してみると知識が無かったり、時間をかけることができない方はお問い合わせフォーム作成サービスが向いていることがわかります。一般的なお問い合わせフォームであれば無料で十分作成することができるので、コスト削減も期待できます。

2.WordPress(ワードプレス)プラグインを利用するパターン

ホームページ作成の知識がある方は、WordPress プラグインを使用してお問い合わせフォームを作成するのも1つの手段です。

メリット

1.無料のフォームプラグインが多い

無料で使用できるプラグインが多いので、知識がある方は使いやすいです。

2.知識があれば簡単に使える

知識がある方はインストールして設定するだけなので、工数を減らすことができます。

3.複雑な設定ができるプラグインが多い

複雑な設定が可能なので、こだわってお問い合わせフォームを作成することができます。

4.プログラムの知識があればさらにこだわったカスタマイズができる

JavaScriptやPHPなどプログラムの知識がある方は、さらにカスタマイズすることができます。

5.設置しているホームページのドメインが使える

作成ページではなく、設置しているホームページのドメインをそのまま使用することができます。

以上がWord Press を利用する際のメリットです。もちろん使用するデメリットも存在します。

・デメリット

1.知識が必要

Word Pressの知識や、いくつかのプログラム、PHPなどの知識が必要です。

2.第三者に狙われやすい。

Word Pressはあまりにも有名で利用者数が多いため悪意のある第三者に狙われやすいです。

3.フォームが動作しなくなる可能性がある

Word Pressのバージョンアップやプラグインのバージョンアップによってフォームが動作しなくなる可能性があります。機能のトラブルも自分で対応する必要があります。

知識がある方はWord Press プラグインを利用した方が、こだわったレイアウトや機能のお問い合わせフォームを作成できます。

3.自分でコードを書いて作成するパターン

HTMLなどプログラミングの知識が多少ある方であれば、簡易的な問い合わせフォームを作ることができます。

メリット

1.自由な機能追加
プログラミングやセキュリティの知識をしっかりと身に付ければ、フォーム作成サービスやWordPressのプラグインでは提供されていない機能を自由に作ることもできます。

機能だけではなくデザインも自由自在に設計できるので、デザインにこだわっている方におすすめです。

デメリット

1.セキリュティ
知識が十分でない場合に、スパム対策などセキュリティ面で安心できない方はフォーム作成サービスを使うことをおすすめします。

Interviewzはシンプルな仕組みで、気軽に問い合わせフォームとして導入頂けます。
サービスの詳細が気になる方は以下の資料をご参考ください。

お問い合わせフォームを作る際のポイント10選

お問い合わせフォームを作る際、ユーザーにとって利用しやすい仕様にすることを目標に作成すると良いでしょう。

ここでは、お問い合わせフォームを作る際のポイントを7つ紹介します。

1.項目数を抑える

フォームに設定する項目数は、できるだけ少なく抑えましょう。

項目数が多すぎると、ユーザーが離脱してしまう原因となってしまいます。最後まで入力してもらうためにも、項目数を減らしてユーザーの負担を軽減することがポイントです。

またフォームに項目を設ける際、本当に必要な項目なのか判断しましょう。たとえば、メールアドレスと電話番号の項目を設置しても、注文内容の確認メールなどを送るのみで、電話番号を使用するケースがない場合があります。その場合は、思い切って電話番号の項目を削除すると良いでしょう。

中には、電話番号の入力を嫌がるユーザーもいます。そのようなユーザーの離脱を避けるためにも、電話番号などの項目を設置すべきか見極めてください。

2.回答例を記載する

フォームを作成する際、回答例を記載しておくと、ユーザーがスムーズに入力を進められるでしょう。

回答例を記載することで、半角で入力すべきか、全角で入力すべきか、ハイフンも入力すべきか、などがひと目でわかります。文字で「半角で入力してください」と記載する方法と併せると、ユーザーの入力ミスを少しでも防止できるでしょう。

また回答例の記載箇所は、回答欄の上下または回答欄の中が一般的です。回答欄の中に回答例を記載する場合は、ユーザーが回答欄をクリックして文字を入力し始めると同時に消える仕組みにすると良いでしょう。

3.必須か任意かを記載する

すべての項目が必須項目ではない場合、必須か任意かを記載しておきましょう。

必須項目であるかを記載しておくことで、入力を急いでいるユーザーにとっては、「必須項目だけ入力すれば進められる」と認識してもらえます。すると、入力を急いでいるユーザーの離脱防止につながると考えられます。

また必須項目と任意項目を見分けるためには、文字だけではなく色でのアプローチもおすすめです。たとえば、「必須」を赤みじで表示し、「任意」を黒色や灰色で表示するなどの工夫を施すと良いでしょう。

4.入力ミスの際にはエラー表示をする

ユーザーが入力ミスしたまま進まないように、入力ミスの際にはエラー表示をすることをおすすめします。

入力ミスが発生した時点でエラー表示することで、次に進む前にその場で修正が可能です。

もし入力ミスをした状態のまま次へ進んでしまうと、最後まで入力が完了したにも関わらず、もう一度入力しなければいけない場合があります。特にメールアドレスやパスワードなどは、確認用の回答欄を含めて2度も入力し直さなくてはいけないケースが多いです。

結果的にユーザーの負担を軽減するためにも、入力ミス時にエラー表示で指摘することは大切です。

5.自動入力機能を搭載する

住所の項目では、郵便番号を入力するだけで番地の手前まで自動で入力される自動入力機能を搭載しましょう。

自動入力機能を搭載することで、ユーザーが住所をすべて手入力する手間が省けます。「住所を手入力するのが面倒」というユーザーの不満を解決しながら、離脱率の改善にもつながるでしょう。

また自動入力機能の他に、自動変換機能も搭載することをおすすめします。

自動変換機能とは、たとえば半角で入力すべき項目を全角で入力してしまっても、自動的に半角に変換される機能です。修正するためにわざわざ文字を消してもう一度入力する手間が省けます。

6.確認ページを作成する

お問い合わせフォームの入力が完了し進んだら、確認ページに進めるように設定しましょう。

確認ページを設けることで、入力した内容に間違いがないかユーザー自身が確認できます。前の住所を入力してしまったり、電話番号を間違えてしまったりしているケースもあります。ただ確認ページを設けるだけではなく、確認するように注意書きで喚起することもおすすめです。

また、確認ページに進んでも簡単に修正をできるように、修正ボタンをわかりやすく設置しましょう。戻るキーで戻るとエラーが生じてしまう恐れがあるので、その旨も注意書きで伝えることも大切です。

7.セキュリティを強化する

お問い合わせフォームを作る際には、セキュリティの強化が大切です。

ほとんどのお問い合わせフォームでは、氏名や住所、電話番号などの個人情報を入力する項目が設けられています。セキュリティが甘いと、これらの個人情報が漏洩するリスクが高まってしまいます。

もし個人情報が漏れた場合、会社の信用に傷がついてしまうでしょう。ユーザーとの関係だけではなく、企業間の信頼関係にも悪影響を与える恐れがあります。

お問い合わせフォームだけに関わらず、サイトを運営する上でセキュリティ強化は重要なことです。

8.PCとスマホの両方に対応させる

顧客が問い合わせフォームを利用する場合、そのほとんどがPCかスマホを利用します。

お問合せフォームを設置する目的や場所によっては、どちらか一方のデバイスに偏りが出るケースもありますが、基本的にはPCとスマホの両方にに対応しておくのがおすすめです。

お客様が入力時にストレスを感じないようにするために、さまざまなデバイスで快適に利用できるように対策しておきましょう。

9.全角と半角入力の両方に対応できるように設定する

多くの問い合わせフォームでは、項目によって、全角入力が必要な箇所と、半角入力が必要な箇所があります。しかし、入力者が全角入力と半角入力をいちいち切り替えるのは意外に手間がかかるため、全角・半角どちらにも対応できるように設定しておくことをおすすめします。

10.お問い合わせフォームと顧客管理ツールを連動させておく

お問い合わせフォームと顧客管理ツールを連動させておくことで、自動的に問い合わせごとの担当を決めたり、問い合わせ対応の進捗確認が可能となります。このように、お問い合わせフォームと顧客管理ツールを連動させておくことで、顧客への連絡ミスや、営業の機会損失を防ぐことができます。

そこで、お問い合わせフォームサービスを選ぶ際は、問い合わせごとの対応状態をステータス表示できる機能を備えたプラットフォームを選ぶと良いでしょう。せっかく獲得したリードの確認漏れや、連絡ミスをなくすことができるため、ぜひ導入をご検討ください。

お問い合わせフォームに必要な要素

お問い合わせフォームを作成するとき、必要な要素が備わっているか確認する必要があります。必要な要素が不足していると、離脱率を高める原因となったり、個人情報が漏れてしまう原因となったりする恐れがあります。

お問い合わせフォームには、一般的に以下のような機能が備わっています。

  • 入力フォーム
  • 確認画面
  • 完了画面
  • レスポンシブ対応
  • スパム対策
  • セキュリティ機能

これらの要素に加え、顧客管理機能を備えることもおすすめです。お問い合わせフォームと顧客管理機能を連携させることで、問い合わせ内容とともに顧客情報も確認できます。

お問い合わせフォームの必須項目と任意項目

問い合わせフォームに設置する項目には、記入が必須となる基本項目と、自由に入力できる任意項目の2つに分けるのが一般的です。

必須項目と任意項目をあらかじめ分けておくことで、顧客がどの程度自社や自社の商品やサービスに興味があるかの目安を知ることができるでしょう。

そこでまずは、リード獲得するために必要となる必須項目以外は基本的に任意項目としておき、できるだけストレスなく入力できるお問い合わせフォームを構築するのがおすすめです。

基本的な必須項目としては、次の項目を設置すると良いでしょう。

  • 名前(社名)
  • メールアドレス

任意項目の例としては、次の項目があります。ただ、自社に必要な項目がある場合は、必須項目に設定しても構いません。

  • 電話番号
  • 住所
  • 目的により顧客属性(性別・年齢・所属部署・役職)など

住所の記入は手間がかかるため、任意項目に設定します。また、郵便番号を入力すれば自動で住所を表示できるように設定しておくと良いでしょう。

お問い合わせフォーム作成サービスの選ぶポイント3つ

お問い合わせフォームを作る際、作成サービスを活用する方もいるでしょう。自社との相性が良いサービスを選ぶためにも、サービス選びのポイントから押さえておきましょう。

ここでは、お問い合わせフォームの作成サービスを選ぶポイントを3つ紹介します。

1.自動化できる範囲

お問い合わせフォーム作成ツールにはデフォルトで自動入力補完機能や自動データ収集機能が付与されている場合があります。ユーザー離脱の防止や管理体制の自動化を行うことでお問い合わせフォームの管理コストを減らすことができます。
サービスによって自動化できる範囲が異なってくるため、それぞれの自動化できる範囲や機能をしっかり確認することが大切です。

2.フォーム編集可能範囲

お問合せフォームのテンプレートなどを利用した場合にカスタマイズ可能な範囲や自社のお問い合わせ内容に合った回答機能、項目が搭載されているかを確認しましょう。無料プランで使用できるものもあります。

3.テンプレートの豊富さ

テンプレートの数が多いとホームページに合わせた選択ができます。お問い合わせフォームは内容だけではなく、デザインを含めた企業ブランドとの統一感がユーザーエンゲージメントにも繋がるため、自社にあったテンプレートがあるサービスを選ぶようにしましょう。

お問い合わせフォームが無料で作成できるサービス5選

お問い合わせフォームを作成する際、コード入力などの専門知識がない場合は、無料で作成できるサービスを活用すると良いでしょう。しかし、さまざまなサービスがある中で、どれを選ぶべきか迷う方もいるのではないでしょうか。

ここでは、お問い合わせフォームが無料で作成できるサービスを5つ紹介します。

1.formrun(フォームラン)

無料プラン : 有
作成可能項目数 : 無制限
デザインテンプレート数 : 40以上
広告の非表示 : 無料
データ集計・管理機能 : CSVでのインポート・エクスポートやラベル機能でのデータ管理が可能
ファイル添付 : 無料
連携ツール : Slack・Chatwork・Microsoft Teams・LINE WORKS・Mailchimp・Shopify

2.Foemrun(フォームメーラー)

無料プラン : 有
作成可能項目数 : 7
デザインテンプレート数 : 要問合せ
広告の非表示 : 有料
データ集計・管理機能 : CSVでのエクスポートが可能
ファイル添付 : 有料
連携ツール : LTV・Salon・Re:lation・サイボウズメールワイズ・ Googleアナリティクス

3.SuguForm(スグフォーム)

無料プラン : 有
作成可能項目数 : 無制限
デザインテンプレート数 : 要問合せ
広告の非表示 : 有料
データ集計・管理機能 : CSVでのエクスポートが可能
ファイル添付 : 無料
連携ツール : Google アナリティクス

4.formzu(フォームズ)

無料プラン : 有
作成可能項目数 : 120
デザインテンプレート数 : 要問合せ
広告の非表示 : 有料
データ集計・管理機能 : CSVでのエクスポート機能と統計機能あり
ファイル添付 : 無料
連携ツール : Googleアナリティクス・決済システム

5.Googleフォーム

無料プラン : 有
作成可能項目数 : 無制限
デザインテンプレート数 : 17
広告の非表示 : 有料
データ集計・管理機能 : 回答データのグラフ化や、Googleスプレッドシートへのエクスポートが可能
ファイル添付 : 無
連携ツール : Googleスプレッドシート・その他Google提供のツール

WordPressのお問い合わせフォームプラグイン5選

1.Contact Form7

Word Pressのフォームプラグインの中では最も有名なプラグインです。

とにかく簡単な設定でフォームが使えるため利用者も多いです。標準ではフォームの確認画面がないのですがContact Form 7 add confirmというプラグインを併用することで確認画面も使えるようになります。簡易的にフォームを設置したいという初心者の方におすすめのフォームプラグインです。

2.Jetpack by WordPress.com

HTMLやCSSの知識がない初心者でも抵抗なく設置できるお問い合わせフォームプラグインとして人気が高まっているのがJetpack Contact Formです。

これは、Jetpackというアクセス解析やSNS自動共有などWordPressを利用する上で便利な機能をパックにしたプラグインの一機能です。非常にわかりやすく、直感的な操作のみで問い合わせフォームを設置できます。

3.Visual Form Builder

Visual Form Builderは、ドラッグ&ドロップのみでページの設定を行うことができるお問い合わせフォームプラグインです。フォーム項目で階層を作ることもでき、デザインも勝手に整えてくれるのでHTML知識は一切不要です。

さらに、顧客への自動返信機能やダッシュボード画面でのデータ管理など、標準機能面が充実しています。設定画面は全て英語なので苦手な方には少し抵抗があるかもしれません。

しかし、ほぼ全て直感的に操作できるので言語は作業にさほど影響しないはずです。

4.Ninja Forms Contact Form

Ninja Forms Contact Formもドラッグ&ドロップのみで簡単にフィールド設定を行えるお問い合わせフォームプラグインです。海外製ですが、こちらは日本語に対応しているのでストレスなく設定を進めることができます。

Ninja Forms Contact Formではお問い合わせ、イベント登録、見積りリクエストの3種類がデフォルトテンプレートとして用意されているので、用途に合わせて活用できます。

また入力項目ごとにヘルプボタンを設定できるので、入力ミスを未然に防止しやすくなります。他にも、自動返信機能や画像認証機能、THANKSページを含めた他のページへのリダイレクト、回答内容次第で質問を変化させる設定など、様々な機能が標準搭載されているので非常に使い勝手の良いプラグインとして国内でも人気が高まっています。

5.MW WP Form

Contact Form 7と同じくらい有名なプラグインです。

Contact Form 7には標準で確認画面が搭載されていませんが、MW WP Formには標準で確認画面が搭載されています。他にも自動返信やフォームからの回答を管理画面へ保存する管理機能など機能が豊富です。多少のプログラムの知識がある方であれば色々とカスタマイズもしやすいので中級者・上級者におすすめのフォームプラグインです。

お問い合わせフォームの作り方まとめ

お問い合わせフォームは、お問い合わせフォーム作成サービス、WordPressのプラグイン、プログラミング、のいずれかで作成可能です。知識がなくてもお問い合わせフォーム作成サービスを使えば、コストを抑えながら簡単に問い合わせフォームを導入できます。

こちらの記事もオススメです