CVRアップのためのEFO5つのテクニック

EFO

EFO(エントリーフォーム最適化)のHTML、CSS等の技術情報。

1.入力フォームの拡大

通常のHTMLでは、この大きさ。

枠も広げて文字も大きくする。

使うのはCSS。inputに「height:40px;font-size:140%」

2.選択時背景色変更

カーソルが入っているときのフォームの背景色やボーダー(border)の色を変えることで、入力選択中の入力枠が分かりやすくなる。

#form1 input[type=text]:focus,#form1 textarea:focus
{
background:#bebeff;
border:#000099 1px solid;
}

3.全角と半角を自動で切り替える

メールや電話番号は半角が常識ですが、全角でも入力できる状態だと、全角で入力されてエラーになったり、後処理の面倒を回避。これが実は、まだ未解決&調査中・・・「ime-mode:disabled」というのはIE専用なので使っても、Chromeなどでは反応しない。

全角入力モード
半角入力モード

4.郵便番号からの住所自動入力

ショップサーブではすでに実装されていますが、フォームCGIやカートCGIを改造しようと思うとちょっと大変です。jqueryを使うとリアルタイムに入力されるので便利です。サンプルについて多数出回っているので省略。

5.必須入力をわかりやすく

「必須の項目が入力されていないと次に進めない」という方法もありますが、都合により省略。※必須と、とりあえず目立つように文字を入れておく。<span style=”color: red;”>※必須</span>

ABOUTこの記事をかいた人

ゆるい起業家。ECや飲食、コンサル、投資*などをいろいろやってます。座右の銘は「のらりくらり」。*マルチやネットワークではない。まっとうな投資。