ブログ

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

2015.10.22

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

ECサイト等において、エントリーフォーム最適化(EFO)を行うことは、成約率向上につながります。

そこで本記事では、Javascriptを用いてホームページからの問い合わせを増やす方法を解説致します。コストをかけずにエントリーフォームを最適化し、成約率をアップさせたいウェブ管理者の方、必見です。

Javascriptを盛り込む前のhtmlソースコード

まずはJavascriptを盛り込む前のhtmlソースコードと、それをブラウザで表示したエントリーフォーム(デモ)を紹介します。

今回はなるべく分かりやすくするため、CSSは設定しておりませんのでご了承下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<h2>エントリーフォーム</h2>
<p>・お名前</p>
<p>姓(漢字)<input type="text" id="user_name" placeholder="田中"> 名(漢字)<input type="text" id="user_name2" placeholder="太郎"></p>
<p>姓(かな)<input type="text" id="user_name_kana" placeholder="たなか"> 名(かな)<input type="text" id="user_name_kana2" placeholder="たろう"></p>
<p>・ご住所</p>
<p>〒<input type="text" name="zip11" size="10" placeholder="郵便番号"></p>
<p> <input type="text" name="addr11" size="60" placeholder="住所"></p>
</body>
</html>

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

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

・お名前

姓(漢字) 名(漢字)

姓(かな) 名(かな)

・ご住所


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

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

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

まず必要な以下のJavascriptファイルをダウンロードします。

・jQuery.autoKana.js
・jQuery-1.11.3.mim.js

ダウンロードした際、上記と同じファイル名のJavascriptのファイルが入っていると思いますので、それらをエントリーフォームのhtmlと同じディレクトリに保存して下さい。

次に、以下のJavascriptコードを、html内のbodyタグの中に挿入します。

<script src="./jquery-1.11.3.min.js"></script>
<script src="./jquery.autoKana.js"></script>
<script type="text/javascript">
    $(document).ready(
        function() {
        	$.fn.autoKana('#user_name', '#user_name_kana', {
                	katakana : false  //true:カタカナ、false:ひらがな(デフォルト)});
        	$.fn.autoKana('#user_name2', '#user_name_kana2', {
                	katakana : false  //true:カタカナ、false:ひらがな(デフォルト)});
	        });
</script>

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

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

住所を自動で表示するJavascriptは、ウェブ上にファイルがありますので、先ほどのようにファイルをダウンロードして保存する必要はありません。

以下のコードをhtmlのheadタグ内に挿入することで、ウェブに存在するJavascriptファイルを呼び出してくれます。

<script type="text/javascript" src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js"></script>

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

onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');"

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

今回は簡単にできる工夫でエントリーフォームを最適化できる方法をご紹介致しました。

すぐに実践できる内容なので、是非あなたのサイトでも活用してみて下さい。

ホームページ制作・LP制作

集客やサイト改善などWebに関することなら、
何でもお気軽にお問い合わせください

ウェブ集客のご相談、見積り依頼などは、こちらからお問い合わせください

ご相談・お問い合わせ

サービスや実績などをまとめた会社案内は、こちらからダウンロードできます

会社資料ダウンロード

お急ぎの方はお電話でも相談いただけます

0120-439-241