WordPressでホームページを作るには

【コピペ】お問合せを増やしたいフォームの制作の方法と考え方_前年比200%増の成果事例

投稿日:2020年1月20日 更新日:

お問合せを増やしたいフォームの制作の方法と考え方

お問合せを増やしたいときには、お問い合わせフォームの制作や改善が優先度の高い施策になります。ビジネスに活用するサイトでは集客から逆算したサイト作り意識しましょう。

今回はお問合せを増やすためのフォーム最適化を目的としたフォームの制作の方法と考え方を解説します。

成果事例 前年比200%の問い合せ増

クライアントの成果事例として、この考え方と作り方をベースにした問い合わせフォームで、実装した当月の20日間稼働し、前年比200%の問い合せ増を達成しました。

上記事例のように、お問い合わせフォームを変えるだけでも成果につながることもあります。

「目標から逆算した改善施策をする」ということは費用対効果から考えても重要ですのでサイト改善を考える際にはゴール前から改善していくことをおすすめします。

 

お問合せを増やしたいフォームの考え方

どう改善しようかと考えていたら、まずは下記リストの問合せしやすいフォームの改善項目を参考にしてください。

  1. ページのファーストビューでフォームが確認できる
  2. 問合せると何が得られるのかテキストや画像で伝える
  3. 入力情報は少なくする
  4. フォーム以外の情報は掲載しない
  5. 必須と任意項目が分かりやすいようにする
  6. 記入例をいれておく
  7. 郵便番号や住所などは自動入力対応する

 

考え方としては、

ユーザーがお問い合わせしたい、情報を得たいという気持ちが少なからずあるからページを訪問しますのでその解決案を提示できることを伝えましょう。

よって、

  • 問合せに対してのハードルを下げる
  • 何が得られるのかイメージしてもらう
  • 入力効率を良くする

など画面の向こうにひとがいるということを意識して改善していきましょう。

 

お問合せを増やしたいフォームの制作例

冒頭の画像は、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担当者として月額サポートします。

Web365は貴社のWeb担当者として、制作改善運用をワンストップ定額サポートしています

・成果にこだわるサイト制作改善をお望みの方
・良いweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方


是非Web365までご相談ください。






Web制作+Webマーケティングの個別講座開講中

Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております


・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方


どうぞWeb365の個別講座をご覧ください。

WordPressでホームページを作るには

執筆者:

関連記事

【完全網羅】WordPressの費用は?ホームページ作成運用の料金相場まとめ

企業でコーポレートサイトとしてWordPressを採用する際、費用はいくらかかるのか?相場やサービス別など網羅的にまとめました。 この記事読了後は、WordPressでの費用感が理解でき、収支計算の参 …

インタビュー方法

【テンプレート】事例紹介のインタビューページで大事な5項目と手順マニュアル解説

自社サイトで実績事例を紹介したい、インタビュー記事を作成したいと考えてはいませんか? クライアントサイトで、事例コンテンツ作成するときに、どんな構成で作成すると良いのか? インタビュー記事の訴求ポイン …

【note更新】自サイトの問合せを増やすためのサイトグロースマップの解説_簡易版

表題、自サイトの問合せを増やすためのサイトグロースマップの解説です。 自身のビジネス用のWebサイトを作る上での最終的な目標は、 ・問い合わせを増やす・購入を増やす というところがゴールではないでしょ …

Web編集で文字が斜体にならないときの理由と2つの対応方法

Web編集で文字が斜体にならないときの理由と2つの対応方法です。斜体とはイタリック文字のことです。編集エディタ上ですと、「I」タグのボタンを押すスト斜体になるあの斜体のことです。サイトの作りでは、デフ …

ALTタグ入力の方法

【Webマーケティング】画像検索一覧に表示させる方法なら、ALTタグ入力がおすすめ

ビジュアル商材を扱っているサイトですと画像検索からの流入も意識したいですね。どんな対策があるか知っていますか? そんなときは、画像のALTタグの入力がおすすめです。 ALTタグの入力で画像検索で自商材 …

【note更新】WordPress管理画面のカスタムフィールド入力で、DB情報のサジェスト機能実装の方法

表題、WordPress管理画面のカスタムフィールド入力で、DB情報のサジェスト機能実装の方法の解説です。 例えばWordPressで、定期イベント開催など、ゲストの名前を入力していく、過去に登壇履歴 …

fontAwesomeが表示されない対処方法はフォントファミリーに設定すること

このサイトなのですが、fontAwesomeという、外部サイトの情報から矢印やメール電話などアイコンを表示してくれるCSSを連携しています。初期設定やバージョン更新でよくあるのですが、そのアイコンが表 …

^
;