【サンプル付き】お問い合わせフォームの作り方やポイントをご紹介

Webサイト上にお問い合わせフォームを設置することで、24時間365日いつでもお問い合わせを受け付けることができます。しかし、お問い合わせフォームをどのように作ったらいいのか困ってはいないでしょうか。そこで本記事では、お問い合わせフォームを作るメリット、ポイントなどを解説し、サンプルもご紹介します。

お問い合わせフォーム設置のメリット

手軽にするユーザーの問い合わせが楽にできる

Webサイトにメールアドレスを載せているところは少なくなってきているとは思いますが、メールアドレスをコピペしてメールサービスから問い合わせするのは面倒ではないでしょうか。

使う側からすると、Webサイト内からすぐ問い合わせができれば手軽でメリットがあると言えます。

問い合わせしようと思ったけれど、Webサイトから一度離れてメールサービスへ移動するときに離脱してしまう人もいるため、見込み客を逃しにくくなります。

必要な情報を受け取れるようにする

メールでの問い合わせの場合、問い合わせしてもらいたい側からすると、必要な情報がメールに載っていないと再度、問い合わせ元に確認作業が発生するためコストとなってしまいます。

お問い合わせフォームの場合、入力項目を指定できるため、必要な情報を入力してもらうことができます。

必ず入力してもらいたい項目は必須入力にすることで確実に情報をもらうことができます。

顧客情報を分析する

お問い合わせフォームを設置することで、問い合わせ元、つまり顧客の情報を蓄積することができます。

情報を蓄積することで、顧客の情報、例えば地域や年齢、性別などの傾向を分析できるのでメリットとなります。

お問い合わせフォームを作る方法

お問い合わせフォームを作る方法は複数あります。

細かいカスタマイズを大事にしたい場合はコーディングがよく、手軽に設置したい場合はお問い合わせフォーム作成のプラグイン（拡張機能）を使うのがオススメです。

WordPressで作ったWebサイトの場合であれば、WordPressのプラグインを使って設置するとよいでしょう。

コーディング

HTML/CSSの知識を持っているのであれば、コーディングによってお問い合わせフォームを作ることができます。

お問い合わせフォームのデザインはシンプルなことが多いため、コーディング自体はかんたんです。

コーディングの場合、カスタマイズの自由度が高いことがメリットです。CSSを使うことでフォントサイズや文字色、フォームの位置を自由に変更することができます。

デメリットはプログラミングの知識と技術がないと作れないことと、実装とメンテナンスに時間がかかってしまう点です。

お問い合わせフォーム作成のプラグイン

手軽にお問い合わせフォームを作りたい場合、お問い合わせフォーム作成ができるプラグインを使うとよいでしょう。

ここではContact Form7とMW WP Formの2つをご紹介します。

Contact Form7

Contact Form 7とは、WordPressで作成したWebサイトにお問い合わせフォームを設置するプラグインです。

Contact Form 7はプログラミングの知識が少なくても導入しやすく、世界中で利用されています。

無料で利用できるプラグインですが、公式サイトにFAQが設けられているなど、サポートも充実しています。

MW WP Form

MW WP Formは、かんたんな操作でフォームを作成・設置できるWordPressのプラグインです。シンプルなコードを記述するだけでフォームを作成できることや、無料で使える点などから、多くのユーザーに利用されています。

MW WP Formには、以下のような機能があります。

<フォーム作成>

• コードをコピペするだけでお問い合わせフォームを作成可能
• 確認画面・完了画面も作成可能
• HTMLで自由にデザインをカスタマイズすることが可能
• 入力内容チェック機能付き

お問い合わせフォームの要素

お問い合わせフォームに含める要素（項目）としては、以下が主です。

• お問い合わせの種別
• 希望サービス
• メールアドレス
• 名前
• 電話番号
• ご相談内容

メールアドレス、名前、相談内容は必須入力項目とするとよいでしょう。

お問い合わせフォームを作るポイントや注意点

お問い合わせフォームを作るときは、実際にお問い合わせをしてくれるユーザーにとって使いやすいようにすることが重要です。

せっかくWebサイトのアクセス数が増えてお問い合わせフォームに到達する人が増えたとしても、そこから離脱してしまう人が多いと、お問い合わせにつながらずに関係が途絶えてしまいます。

お問い合わせフォームを作成するときは、以下に挙げるポイントに注意しましょう。

例文の活用

入力項目だけ読んでも、実際何を入力すればいいのか分からない人がいるかもしれません。そういう人にとっては、例文を記載しておくとわかりやすくてよいでしょう。

入力ミスの軽減

入力ミスが多くなると、お問い合わせ内容を送信したつもりになって、実際は送れて遅れていなかった、ということも起こりやすく、ユーザーにとっても機会損失となってしまいます。

入力項目を減らす、必須入力項目は必要最小限にするなど、入力ミスが起きないような工夫をするとよいでしょう。

入力内容の確認手段提供

お問い合わせフォームの送信完了前に表示させる確認画面があると、ユーザーにとっては便利なことがあります。

例えば、かなり入力項目が多く、最初の方に何を入力したのかはっきり覚えていない場合などです。

送信前の確認画面を表示することで、正確なデータを送信してもらいやすくなります。

また、確認画面があるという前提でフォームに入力しているユーザーが多いことも意識しましょう。

送信前の確認画面は無いよりかは、ある方が親切な設計だといえます。

自動返信

送信した内容を記録しておきたい人もいます。例えば、折り返し電話があったときなどに、どういう問い合わせをしたのかを思い出したい場合などです。

お問い合わせ内容を自動返信メールに含めておくことによって思い出す助けになります。

全角・半角への対応

お問い合わせフォームに入力する文字を半角か全角かどちらかに限定してしまうと、入力ミスによる離脱が増えてしまう可能性があります。

ユーザーにとっての使いやすさを優先し、全角か半角かの指定はしないようにするのがおすすめです。

お問い合わせフォームのサンプル

お問い合わせフォームをコーディングする際に参考となるサンプルソースコードは以下です。

カスタマイズして使うとよいです。

<div class="Form">
<div class="Form-Item">
<p class="Form-Item-Label">
<span class="Form-Item-Label-Required">必須</span>企業名
</p>
<input type="text" class="Form-Item-Input" placeholder="記入例）株式会社one">
</div>
<div class="Form-Item">
<p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>氏名</p>
<input type="text" class="Form-Item-Input" placeholder="例）井上たろう">
</div>
<div class="Form-Item">
<p class="Form-Item-Label"><span class="Form-Item-Label-Required">任意</span>電話番号</p>
<input type="text" class="Form-Item-Input" placeholder="例）090-0000-0000">
</div>
<div class="Form-Item">
<p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>メールアドレス</p>
<input type="email" class="Form-Item-Input" placeholder="例）sample@xxxx.com">
</div>
<div class="Form-Item">
<p class="Form-Item-Label isMsg"><span class="Form-Item-Label-Required">必須</span>お問い合わせ内容</p>
<textarea class="Form-Item-Textarea"></textarea>
</div>
<input type="submit" class="Form-Btn" value="送信">
</div>


お問い合わせフォームコーディングのポイント

お問い合わせフォームをコーディングする時のポイントとしては以下の3つが挙げられます。

1. お問い合わせフォーム全体のコンテンツ幅をmax-widthで指定
2. 各項目はflexboxで横並びに
3. 各項目の余白はpaddingで指定

申請や応募受付の電子化・システム化ならWebフォーム作成システム「SPIRAL®」

当社のご提供する 「Webフォーム作成システムSPIRAL®」は、かんたん操作で自由自在にフォーム作成が行える定額制のWebフォーム作成システムです。 申請や応募の受付だけでなく、その後のステータス管理や応募者用マイページ作成など、受付から管理までをWebシステム化することができます。

受付フォームは画像やPDFなどのアップロードにも対応。拡張子指定や容量制限、入力制限もできるので、自社の要件にあったフォームを構築することができます。また、デザインはテンプレートからの選択の他、HTML、CSS、JavaScriptを利用してカスタマイズも可能です。

申請者用・管理者様にそれぞれマイページを作成し、ステータス管理や申請内容の情報変更をWeb上で行うこともできます。

書類申請、出願・公募受付、補助金・助成金申請、契約加入・更新受付、キャンペーン受付、問い合わせ受付など様々な業界・用途・シーンで延べ11,000社以上のご利用実績がございます。

サービスの詳細については「Webフォーム作成システムSPIRAL®」のページをご覧いただくか、サービス導入をご検討中の方はこちらからぜひお問い合わせください。

まとめ

今回はお問い合わせフォームのメリットや作り方、作るときのポイント・注意点などについてご紹介しました。

顧客獲得にもつながるお問い合わせフォームは、Webサイトの中でも重要なページです。

また、見込み顧客獲得や、お問い合わせフォームに関する業務の自動化によって、業務全体の効率化も期待できます。