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

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

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

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

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

Web365とは

Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。

今回は、WordPressでクライアントサイトを制作改善する際の提案・考え方の一部紹介です。

Web365について詳しく知りたい方は「Web365とは」ご覧ください。

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

成果事例 前年比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制作+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までご相談ください。

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

    執筆者:

    関連記事

    WordPressのテキストモードでタグボタンを追加する方法

    Web担当業務でクライアントサイトに見出しや太字などのタグがリセットされていたのでCSSの設定した際に、エディタ上のテキストモードでタグボタンを追加する方法を解説します。   下記画像の青枠 …

    【コピペ】WordPress、プラグインなしで、関連記事を同じか指定したカテゴリーで作成する方法

    【コピペ】WordPress、プラグインなしで、関連記事を同じカテゴリーか、指定したカテゴリーで作成する方法

    【コピペ】WordPress、プラグインなしで、関連記事を同じカテゴリーか、指定したカテゴリーで作成する方法の解説です。   【クライアント対応した実例】 必要性としては、 同じカテゴリーの記事を関連 …

    【解説】WordPressサイトが自動更新でログインできないときの対応一例(WPとEC系プラグインの競合エラー)

    WordPressサイトの各バージョンが自動更新され、気づいたらエラーでサイトが見れない、ログインできないときはありませか? 今回は、WordPressのバージョンアップによるエラー対応の方法について …

    インタビュー方法

    【コピペ】特定テキストにマウスがhoverしたときに背面に文字を出すCSS

    特定テキストにマウスがhoverしたときに、背面に関連の文字を出したいときってありませんか? 少しのCSSでサクッと対応できます。もちろんコピペできます。 特定テキストにマウスがhoverしたときに背 …

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

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

    ALTタグ入力の方法

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

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

    WordPressの企業サイト事例

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

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