実は簡単EFO！ JavaScriptが少し分かれば誰でも簡単に問い合わせフォーム最適化ができる
お問い合わせフォームの離脱を防ぐ、ECサイトでカゴ落ちを防ぐなどの用語に「EFO」という言葉がある。Googleで少し検索すれば関連サービスがたくさん出てくるのが分かるだろう。検索結果には広告まで出ているので、ニーズが多いと分かる。
このEFO、お金を払ってまでする価値はあるのだろうか。もちろん、本格的なEFOになればajaxでサーバーとデータ通信をするとか、機械学習と組み合わせて集客するとか本格的なサービスもあるが、入力補助をする程度であれば、JavaScriptの初心者でも十分に実装できる。試しに自分で作ってみたのだが、以下のようなシンプルな内容ならそんなに難しくない。
https://cat-marketing.jp/inquiry.php
今回の実装の要件として意識したのは以下の通り。
- 入力項目数を常時表示する
- 入力中の項目をアクティブにする
- 必須項目に漏れがあると送信ボタンを押せないようにする
- 必須項目に入力漏れがあるとどの項目が漏れているか分かるようにする
大企業のカスタマーサイトであればコールセンターと繋がるなどの高機能も実現できるだろうが、大規模サイトでもない限り、そこまでする必要はない。上記のような簡単な入力補助だけでも、例えば閲覧者に年配の人が多い会社のウェブサイトなどであれば、十分な効果があるだろう。
アクセス数の少ないお問い合わせフォームだが、ここで手を抜くと印象がまるで違うので、しっかり作り込むことを強くおすすめする。
EFOにJavaScriptを使う理由
httpの通信という性質上、原則として一度サーバーからクライアントに送信されたデータは書き換えることができない。したがってサーバーサイドのPHPなどの言語でだけではEFOは実装できない。そこで出番となるのがみんなが大好きJavaScriptである。
JavaScriptであればクライアント側、つまりデータを表示しているブラウザ側で動的に動かすことができる。サーバーと通信せず、ウェブサイト閲覧者のマウスやキーボード操作に応じた反応をコントロールできる。この辺りを正しく理解するにはhttpの知識が必須なので、興味がある人はぜひ勉強してください。提案の幅が、そして世界が広がる。
EFOによく使うJavaScriptとCSS
EFOに関する技術的な説明を少ししておこう。JavaScriptとCSSの以下の技術について知っていれば、HTMLのコーディングができる人でも見よう見まねで実装できるだろう。
- Javacriptのイベントonfocusとonblurを使いこなせ
- cssのdisplay:none、JavaScriptのaddclassとremoveclassを駆使せよ
- innerHTMLでタグの中身を動的に表示させる
onfocusとonblur
この2つのメソッドはEFOに絶対に欠かせない。入力フォームの入力欄にマウスポインタをあてるとき、またはマウスポインタが離れるとき、そういうタイミングについて制御できる。もし入力欄にマウスポイントがあたって、離れるときにデータが空ならその項目は入力されていないことになる。そういう場合を検知したら警告をだそうよ、とこういう寸法だ。
<input onfocus=“関数1” onblur=“関数2” name=“data1”>
関数は別途定義する必要があるが、例えばinputタグの隣に簡単な注意書きを用意しておいて、そのオンオフを関数で制御すればいい。簡単です。
addclassとremoveclass
表示と非表示はdisplay:noneを使う。この定義をしたクラスを用意しておいて、addClassとremoveClassで切り替える。例えば、デフォルトでは警告文はdisplay:noneを設定したclassで非表示にしておき、入力ミスを検知した場合にそのclassをremoveClassで取り除く。そうすれば警告文が表示される。
innerHTMLでタグの中身を動的に表示させる
JavaScriptのinnerHTMLでhtmlタグの中身を取得できる。上で紹介したお問い合わせフォームでは残りの入力項目数に応じて数字が減っていくのだが、innerHTMLでカウントした数字を表示させている。
以上のような感じで、特定のメソッドを組み合わせるだけでEFOは実装できる。あまり複雑に考える必要はない。問題は設計である。EFOを実装したい人は、「なんとなくこんな感じにしたい」ではなく「具体的にこういう動きをする」と出来上がる動きを細かく把握していなければならない。それについては世の中にすでにEFO対応済みのお問い合わせフォームはたくさんるから、そういうのを参考にすればいい。
