【簡単】エントリーフォーム最適化 EFO

【簡単】エントリーフォーム最適化 EFO

ちょっと前(2年くらい前かな?)に流行ったEFO(エントリーフォーム最適化)ですが、ここ最近も営業の電話を頂くようになりました。

月額3万円とのことなので当社では導入しませんが、自力で出来る範囲のEFOを行ってみたいと思います。

スポンサーリンク

まずは、世間で販売されているEFOツールの機能

1:全角と半角の制御

2:郵便番号をいれると、住所の自動入力

3:リアルタイムで入力項目のバリデート(正誤判定)

4:ふりがなの自動入力

5:補足情報は必要なとき(入力項目に来た時だけ)表示

6:ブラウザを閉じるときにアラート画面

何社か調べたけど、だいたいこの6点くらいでした。

個人的には、6は好きではないので、まずは1、2、3、4、5を行いたいと思います。

6を行ったら、離脱率が5%改善したので、6も行うことにします。

1:全角と半角の制御

これは、javascriptで全角英数文字を半角英数文字に変換させます。

2:郵便番号をいれると、住所の自動入力

これもjavascriptで、自動補完してくれるAjaxZip 3.0を利用すればOKです。

使い方は簡単で、下記のスクリプトを読みこませればOK。

使い方は、AjaxZip 3.0に詳しく書かれています。

下記のようなフォームの場合は、

efo0

onKeyUp="AjaxZip3.zip2addr('zip1','zip2','pref','address1','','address2');"
を付け足します。以下のように。

3:リアルタイムで入力項目の正誤判定

これももjavascriptで正誤判定してくれる、exValidationを利用します。

githubの右下のDownload Zipから、ファイルをダウンロードします。efo1

ダウンロードしたら、zipを解凍してscripts、stylesフォルダをUPします。

efo2

UP完了したら、該当ファイルを呼び出します。

あとは、バリデートのルールを書いていきます。

idで指定した部分のバリデートを行います。radio、checkbox以外は、必須項目に指定したい場合はchkrequiredをつけます。

Html5で有効になった、inputにrequired属性をつけると上手く作動しませんでした。

 4:ふりがなの自動入力

jquery.autoKanaを使用します。

jquery.autoKana.jsを読み込んで、対象の項目(名前のフォーム)とフリガナのフォームを記載します。ふりがなが、ひらがなの場合は、下記の , {katakana:true}を外せばOKです。

5:補足情報は必要なとき(入力項目に来た時だけ)表示

まずは、補足情報に適当なクラスをつけます。(notice1とします。)

1:そのnotice1をjqueryでhideします。

2:対象の項目にカーソルが来たら(focus)、1でhideした項目を表示(show)させます。

3:このままだと、showさせたままなので、カーソルが外れたら(blur)、またhideします。

6:ブラウザを閉じるときにアラート画面

下記のスクリプトを対象のページに入れればOKです。

実際のフォームデモ画面。

スポンサーリンク

シェアする