エントリーフォームを最適化し、ホームページからの問い合わせを増やす方法

こんにちは、松井です。
ECサイト等において、エントリーフォーム最適化(EFO)を行うことは、成約率向上につながります。そこで本記事では、Javascriptを用いてホームページからの問い合わせを増やす方法を解説致します。コストをかけずにエントリーフォームを最適化し、成約率をアップさせたいウェブ管理者の方、必見です。

まずはJavascriptを盛り込む前のhtmlソースコードと、それをブラウザで表示したエントリーフォーム(デモ)を紹介します。今回はなるべく分かりやすくするため、CSSは設定しておりませんのでご了承下さい。

***************************************************************************************

エントリーフォーム(デモ)

・お名前

姓(漢字) 名(漢字)

姓(かな) 名(かな)

・ご住所

 
***************************************************************************************

コードのinputタグの中に、「placeholder=”田中”」などという記述があると思います。これはテキスト入力欄に記入例を表示させる記述で、ユーザーにとって分かりやすくする為の工夫です。
しかしこのままでは、上の入力が「面倒だ」と思い、離脱してしまうユーザーが現れる可能性があります。その改善策として、以下でふりがな、住所を自動入力させる機能の導入をご紹介致します。

ふりがなが自動で入力されるJavascript導入方法

まず必要な以下のJavascriptファイルをダウンロードします。
・jQuery.autoKana.js
・jQuery-1.11.3.mim.js
ダウンロードした際、上記と同じファイル名のJavascriptのファイルが入っていると思いますので、それらをエントリーフォームのhtmlと同じディレクトリに保存して下さい。
次に、以下のJavascriptコードを、html内のbodyタグの中に挿入します。

コードの1、2行目は、先ほど保存したJavascriptファイルをローカルで呼び出すコードです。src=”直後の ./ が重要で、これは「htmlファイルと同じ階層にある」ことを示します。

郵便番号から自動で住所が表示されるJavascript導入方法

住所を自動で表示するJavascriptは、ウェブ上にファイルがありますので、先ほどのようにファイルをダウンロードして保存する必要はありません。以下のコードをhtmlのheadタグ内に挿入することで、ウェブに存在するJavascriptファイルを呼び出してくれます。

次に郵便番号を入力するinputタグに、以下のコードを属性として挿入します。

郵便番号を入力しただけで住所が自動で表示されるようになりました。
***************************************************************************************

エントリーフォーム(デモ)

・お名前

姓(漢字) 名(漢字)

姓(かな) 名(かな)

・ご住所

 
***************************************************************************************


今回は簡単にできる工夫でエントリーフォームを最適化できる方法をご紹介致しました。すぐに実践できる内容なので、是非あなたのサイトでも活用してみて下さい。

関連記事

ページ上部へ戻る

 

 

Google+