WORDPRESS | Contact form 7にマイクロコピー挿入

      2017/10/07

みなさんこんにちはALEXです。EFOキャンペーンもいよいよ後半、あと三つで連載終了の予定です。いままで以下の記事をアップしました。

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

WORDPRESS | Contact Form 7 でメール送信ができない(1)

 

今回は、「マイクロコピー」についてお話しします。マイクロコピーはオレコンさんが本を出版されており皆様もご存じかとは思いますが、フォームの入力欄周辺に「短い文章」を添えてユーザーのフォーム入力を支援するものです。このマイクロコピーはアマゾンなどの大手ECがすでに取り入れており、実際に効果を上げているものです。当社も依然フォームでの離脱率が高く、対策が求められておりました。そこで、早速マイクロコピーを導入しています。実際にフォーム画面からフォーム送信に至るコンバージョン率が向上しているので、ぜひ皆さんにもお勧めします。

 

メッセージ本文にマイクロコピーを挿入する

従来のフォームのメッセージ本文の欄は真っしろしろの空白です。

ここにマイクロコピーを入れます。どのような文章を入れるのが効果的なのかは、運営するサイトのビジネスにもおりますが、当社はウェブマーケティングのコンサルティングをお勧めしているので

「例」ウェブマーケティングに関するお悩み事、アクセス解析に関するお悩み事などについて相談したい」という例文をプレースホルダーとして表示することにしました。

ここの部分の編集タグは以下のようになります。

[textarea your-message x4 placeholder "例)ウェブマーケティングに関するお悩み事、アクセス解析に関するお悩み事などについて相談したい"]

 

改良後の画面はこのようになっています。

 

とはいっても、プレースホルダーの問題は、1文字入力すると消えてしまうところです。

自分で作っておきながら「意味ないじゃんかよ」と思いました。そこで、文字を入れても消えないプレースホルダーを作りました。例文のこりますが、それが問題になるわけではありませんし。

ここの部分の編集タグは以下のようになります。

メッセージ本文<span class="requied">必須</span>
[textarea your-message x4 placeholder ]ウェブマーケティングに関するお悩み事、アクセス解析に関するお悩み事などについて相談したい[/textarea]

 

 CTAボタンの「送信する」を変更する

フォームを入力し、確認画面で入力内容をもう一度確認していただきいよいよ送信していただくわけですがそのCTAボタンがデフォルトの「送信する」ではコンヴァージョン率は上がりません。

ここは、「この内容で問い合わせる」という文章に書き替えるのが有効です。無料を強調したいのであれば「無料で問い合わせる」でもよいです。ここはフォームの編集画面を変えるだけです。変更前後で以下のように変わります。

 

まとめ

みなさんも自分でサイトを運営するだけでなく、いろいろなサイトで買い物やお問い合わせをされていらっしゃると思います。フォームでは、ほんの些細な使い勝手の悪さが離脱につながることはよくご存知かと思います。その時のユーザーとしての自分の気持ちを思い出しながらお問い合わせフォームに、どんなマイクロコピーを添えるとユーザ―様のアシストが有効かを考えてみましょう。Contact form 7でもマイクロコピーの挿入は全く問題なくできますので、トライなさってはいかがでしょうか?

 

有難うございました。

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 

 - ワードプレス