お問い合せフォーム作成記録
こんにちは。
株式会社ホームリンク代表の吉田です。
先日、当社のホームページをリニューアルしたことをお知らせしました。
その中でも特に力を入れたのがお問い合せフォームの作成です。
自社ホームページからお客様の反響をいただくためには必須の機能ですが、今回何とか良い感じに仕上がったので備忘録も兼ねてご紹介したいと思います。
参考にしたサイト
今回お問い合せフォームを作成する際に大いに参考にしたサイトは以下の記事です。
参考にしたというレベルではなく、必要な箇所はほとんどそのまま使わせていただきました。
完成図
当サイトのお問い合わせフォームの完成図はこちらです。

拡大しても見にくいと思いますので、実際のページをご参照ください。
カスタマイズした箇所
ほとんど使わせていただいたとはいえ、自サイトに合う内容に変更した箇所がいくつかありますのでご紹介します。
なお、前提として、お問い合せフォームの作成にはWordPressのプラグイン「Contact Form 7」を使っています。
ふりがなは任意に
参考サイトでは、名前の欄にふりがなと名前の欄がそれぞれあってどちらも必須事項になっていますが、入力する側から見るとふりがなは別にいらないだろうって思うと考えたんですけどできれば入力していただきたいと思ったので、項目を分けて名前は必須、ふりがなは任意項目に変更しました。


メールアドレスの確認欄を追加
お客様との連絡手段としてはメールか電話になりますが、電話番号は任意項目にしているのでメールアドレスには間違いがないように確認欄を設けました。

コピペされたら元も子もないんですが、せっかく反響をいただくのに返信ができないと全く意味がないので、面倒かとは思いますが確認欄への入力も必須としています。
この機能はデフォルトではないので、少しカスタマイズする必要があります。
functions.phpにコードを追記する必要がありますので、自己責任でお願いします。
郵便番号から住所を自動入力
続いては住所の入力欄ですが、こちらは任意項目なのでここまでする必要はないかもしれません。

ただ、せっかく入力いただくのであれば極力お客様の負担にならないようにしておくべきかなと思いますし、これ専用のプラグインがあるくらいなので需要はあると思います。
参考リンク
Googleで検索するとたくさん出てきますので詳細は割愛しますが、WordPressのプラグイン「zipaddr-jp」というプラグインを使用します。
とても簡単なので助かりますね。
お問い合せ内容
続いてのお問い合せ内容欄は、ラジオボタンに変更して縦型にしました。
参考サイトでは縦型のチェックボックスですが、これをラジオボタンに変更するだけなので簡単です。


reCAPTCHAのロゴを非表示に
最後はGoogleの提供するreCAPTCHAについてですが、デフォルトの状態だと画面の右下にreCAPTCHAのロゴが表示されて少し邪魔なので非表示にしました。
参考サイトで解説されている通りにやっていけば簡単ですね。
無料査定依頼フォーム
全体のお問い合せフォームのほかに、無料査定依頼のフォームも併せて作成しました。
こちらも基本的には上記のサイトから必要な箇所を抜き出したりアレンジしたりして作成しています。
全体のお問い合せフォームよりも項目が多いため、間に見出しを入れて情報をグルーピングし、少しでも見やすくなるよう工夫しました。
また、適宜必須と任意項目を分けていますので、最低限必須事項だけご入力いただいても構いませんし、できれば任意項目もご入力いただくと当社がいただける情報が多くなりますのでその後のお話もスムーズかと思います。
全体図だけ載せます。

こちらも拡大しても見にくいと思いますので、実際のページでご確認いただければと思います。
まとめ
いかがでしたでしょうか。
実際にはclass名を変えたりCSSを追加したりしてもっと細かくカスタマイズしていますが、ここでは割愛します。
参考サイトにはお問合せがあった時のメール自動返信やお知らせメールを自分に送る方法なども解説されていますので、とても参考になりました。
ぜひお気軽にお問い合わせいただければと思います。
投稿者プロフィール

- 代表取締役
- 株式会社ホームリンク代表。1978年1月生まれ。31歳で不動産業界に転職後、約14年間不動産売買仲介専門エージェントとして従事。その後、2023年12月に株式会社ホームリンクを設立し、代表取締役に就任。お客様との出会いやご縁を大切にする会社を目指しています。
最新の投稿
不動産コラム2025年6月14日準工業地域を解説します。
不動産コラム2025年6月7日商業地域について解説いたします。
不動産コラム2025年5月31日リフォームとリノベーションの違い
不動産コラム2025年5月24日近隣商業地域を解説します。