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で独自のショートコードを作成し、本文に挿入する方法を解説します。お決まりの文章や、機能などは、ショートコードを書くだけで、ページに実装できると効率的です。ショートコードの作成方法と、 …

【簡単】商材ページ、13のポイントを意識して簡単につくる方法

クライアントサイトで、実際にコンテンツ作成するときに、重要なページ商材ページがあります。 どんな構成で作成すると良いのか? 商材自体の訴求ポイントの項目と、Webコンテンツとしての構成面と合わせて、1 …

スマホページで最下部にお知らせなどを固定表示させる方法【コピペ対応】

­スマホでサイトを閲覧すると出てくる、最下部の案内を自サイトで表示させたいときの方法です。 クライアントサイトでのケース、WordPressのテーマOnepress使用の場合の方法を解説します。 st …

WordPressの企業サイト事例

WordPressの企業サイト事例とテーマ選【徹底解説】

  【5分で読めます】 WordPressで企業サイト構築の検討に役立つ記事です。 WordPressで企業サイトを構築するメリット・デメリットやWordPressの企業サイトに向いてるか判 …

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

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

【秒速解決】WordPressの管理画面が真っ白の対処法_サーバー【ロリポップ】

Word Pressのログイン画面だったり、管理画面が真っ白になってお手上げ、という事象があります。管理しているサイトで発生したので、対処解決方法を解説します。     WordPressの管理画面が …

検索上位へのSEO対策、記事をGoogleサーチコンソールにフェッチしよう

サイトを検索上位に上げたいときのSEO対策です。 まずは、書いた記事を公開したらGoogleサーチコンソールにフェッチしましょう。 その理由と方法を解説します。   Googleサーチコンソ …

^
;