お問合せを増やしたいときには、お問い合わせフォームの制作や改善が優先度の高い施策になります。ビジネスに活用するサイトでは集客から逆算したサイト作り意識しましょう。
今回はお問合せを増やすためのフォーム最適化を目的としたフォームの制作の方法と考え方を解説します。
Web365とは
Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。
今回は、WordPressでクライアントサイトを制作改善する際の提案・考え方の一部紹介です。
Web365について詳しく知りたい方は「Web365とは」ご覧ください。
この記事でわかること
成果事例 前年比200%の問い合せ増
クライアントの成果事例として、この考え方と作り方をベースにした問い合わせフォームで、実装した当月の20日間稼働し、前年比200%の問い合せ増を達成しました。
上記事例のように、お問い合わせフォームを変えるだけでも成果につながることもあります。
「目標から逆算した改善施策をする」ということは費用対効果から考えても重要ですのでサイト改善を考える際にはゴール前から改善していくことをおすすめします。
お問合せを増やしたいフォームの考え方
どう改善しようかと考えていたら、まずは下記リストの問合せしやすいフォームの改善項目を参考にしてください。
- ページのファーストビューでフォームが確認できる
- 問合せると何が得られるのかテキストや画像で伝える
- 入力情報は少なくする
- フォーム以外の情報は掲載しない
- 必須と任意項目が分かりやすいようにする
- 記入例をいれておく
- 郵便番号や住所などは自動入力対応する
考え方としては、
ユーザーがお問い合わせしたい、情報を得たいという気持ちが少なからずあるからページを訪問しますのでその解決案を提示できることを伝えましょう。
よって、
- 問合せに対してのハードルを下げる
- 何が得られるのかイメージしてもらう
- 入力効率を良くする
など画面の向こうにひとがいるということを意識して改善していきましょう。
お問合せを増やしたいフォームの制作例
冒頭の画像は、Web365のお問い合わせフォームページの画像です。
制作例として下記に貼ります。
さきほどのチェック項目を照らしてみると、
1 ページのファーストビューでフォームが確認できる
ファーストビューでフォームが確認できてますね。
2 問合せると何が得られるのかテキストや画像で伝える
テキストでご相談いただいたら、回答する旨をいれてますね。
資料請求などなら資料の画像などもいいと思います。
3 入力情報は少なくする
フォームの項目は4項目です。
項目は少ない方がハードルは下がります。しかし、ビジネスごとに適切な情報項目数は違うので、取得しても活用する可能性が少ない情報などがあれば思い切ってカットしましょう。
ちなみにさきの改善項目の
- 必須と任意項目が分かりやすいようにする
- 記入例をいれておく
も対応してます。
フォーム入力が楽しいというひとは少ないので、ユーザーの利便性を考えた設計を心がけましょう。
4 フォーム以外の情報は掲載しない
画像のお問い合わせページでは、
- 上部のグローバルナビゲーションや、
- 下部のフッターなどのリンクを
非表示にしてます。
できるだけフォームに集中してもらいやすいページを設計しましょう。
お問い合わせフォームのソースコード
当サイトはWord Pressで作成してます。
Word Pressでのお問い合わせはプラグイン「contact form7 」というものが簡単に作成できるので、おすすめです。
フォームのソースコード
下記のHTMLとCSSをコピペすれば同じフォームが作成できます。
HTML
<table class="table table-bordered table-striped table-contactform7">
<tr>
<th><span class="required-contactform7">必須</span><span class="title-contactform7">お名前</span></th>
<td>[text* your-name akismet:author watermark"例：山田 太郎"] </td>
</tr>
<tr>
<th><span class="required-contactform7">必須</span><span class="title-contactform7">メールアドレス</span></th>
<td>[email* your-email akismet:author_email watermark"例：×××@×××.com"]</td>
</tr>
<tr>
<th><span class="required-contactform7">必須</span><span class="title-contactform7">ご相談内容</span></th>
<td>[radio radio-256 use_label_element "HP分析提案" "HP制作改善" "HP運用改善" "講座" "その他"]</td>
</tr>
<tr>
<th><span class="required-contactform7">必須</span><span class="title-contactform7">メッセージ本文</span></th>
<td class="message-100">[textarea* your-message watermark"業種・目的・デザインイメージ・講座の希望内容など"]</td>
</tr>
</table>
<p class="text-xs-center">[submit class:btn class:btn-success class:btn-lg "相談する"]</p>
CSS
/***** コンタクトフォーム *****/.table-contactform7{ overflow: hidden;table-layout: fixed;}.required-contactform7{ padding: 5px; background: #DE8686; color: #fff; border-radius: 3px; margin-right: 3px;}.unrequired-contactform7{ padding: 5px; background: #BDBDBD; color: #fff; border-radius: 3px; margin-right: 3px;}.table-contactform7 th{ font-weight:bold; width:28%;}.table-contactform7 input,.table-contactform7 textarea{ max-width: 90% !important; margin: 5px 10px 10px 5px;}.address-100 input{ max-width: 90% !important; margin: 5px 10px 10px 5px;}.message-100 textarea{ width: 100%; margin: 5px 10px 10px 5px;}
.wpcf7-submit { width: 100%; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; background-image: linear-gradient(45deg, #00BCD4 0%, #009688 100%); color: #fff; border: none !important; margin: 0 auto; padding: 10px; display: block; box-sizing: border-box;}
下記はスマホサイズ時のフォームのCSS修正箇所です。適宜修正してください。
@media print, screen and (max-width: 599px) {
/* コンタクトフォーム */
.table-contactform7{ display:block;} .table-contactform7 tbody, .table-contactform7 tr{ display: block; width: 100%; } .table-contactform7 th{ width: 100%; display: block; margin: 0 auto; padding: 10px; text-align: left;}.table-contactform7 td{ display: list-item; list-style-type:none; margin:0; padding:0; width: 100%; border-top: none !important;}
}
以上です。ご活用ください。
フォーム制作改善してほしい方へ
自社サイトのフォーム改善を検討している方、お気軽にご相談ください。
制作料金のイメージですが、上記と同じものですと、
- Webサイトの中のソースコード確認
- サイトに合わせた実装
という作業工程で1万円から貴社のサイト状況、最適なフォーム仕様などにより、個別にお見積りさせていただきます。
Web制作+Webマーケティングの個別講座開講中
Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております
・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方
どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。
外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。
Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています
・成果にこだわるサイト制作改善をお望みの方
・自社にとって最適なweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方
是非Web365までご相談ください。
【パートナー募集】
Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング、Web改善のプラン検討している方
・社内のWebマーケティングのリテラシーを高めたい方
・分析から改善運用まで一括でサポート依頼したい方
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
・クライアントへのWeb改善プラン実行のディレクションサポート
・社内のGoogleアナリティクスなどのレクチャー
・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
・クライアントへのWeb広告運用代行
・クライアントへの計測ツール設定代行（Googleアナリティクス、eコマース、ヒートマップClarityなど）
まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。
