アクセスがあるサイトでお問い合わせを改善させたいって時にやる、エントリーフォーム最適化です。
お問い合わせフォームを直すだけでコンバージョン率が上がるかと言われると疑問に思うことは多いが、やはり最適化されているフォームはやっぱ使いやすいので、できる限り実装していきましょう。
やり方はいろいろあると思いますが、ディレクターレベルで設置できるないようでご紹介。
※できる限り、バリデーションJS(Validation.js)は使わない方法です。
エントリーフォーム最適化(EFO) で実装した事
ばっとまとめると下記の内容になります。これは最低限で手っ取り早く実装ができます。
- 入力フォーム最適化(EFO)
- お問い合わせページから離脱を防ぐためできる限り別ページにリンクを消す。
- お問い合わせページに強みを入れる
- フォームのページに必要のない要素はすべて削除
- フォームの流れを書いてあげる
- できる限り入力項目(入力フォーム)を減らす。
- 必須項目もできる限り減らす
- 日付はカレンダー表示で入力させる
- 時間などはできる限りセレクタで入力（選択させれるものはすべてセレクタ、ラジオボタンに）
- 必須項目は色をつけてあげる（入力ができたら色を消す）
入力フォーム最適化(EFO) inputをうまく使う
- 入力するテキストの種類に合わせたキーボードを表示させる
- Tabキーで次の入力項目にフォーカスされるようにする
- 住所は郵便番号から自動検索出来るようにする
- タップしやすい入力フィールドやボタンの大きさにする
- チェック項目はラベルをクリック・タップでもチェックが付くようにする
- autofocus属性を使用し、ページが読み込まれた段階で一つ目の入力フィールドにフォーカスが当たるようにする。
|
1 2 3 4 5 6 7 8 9 10 |
姓 <input type="text" name="family-name" autocomplete="family-name"> 名 <input type="text" name="given-name" autocomplete="given-name"> 電話番号 <input type="tel" name="tel" autocomplete="tel"> メールアドレス <input type="email" name="email" autocomplete="email"> 郵便番号 <input type="number" name="postal-code" autocomplete="postal-code"> |
お問い合わせページから離脱を防ぐためできる限り別ページにリンクを消す
通常ページではグローバルメニューなど別ページに画面遷移させるために必要な要素ですが、お問い合わせのページではガッツリ削ります。
■通常のページ
■お問い合わせフォームのページ
※今回参考にさせていただきましたサイト（https://www.loungemembers.com/）
お問い合わせページに強みを入れる
強みがあれば入れてください。できる限り入れる。キャンペーン(買取5000円)アップなど今申込もうと思わせる期限付きのものが一番いいです。
フォームのページに必要のない要素はすべて削除
必要ない説明文などは徹底的に削除省略。読ませるよりもさっさとフォームを入力させましょう。
フォームの流れを書いてあげる
簡単に申し込めますよ・・・。ってことを示して上げましょう。
例：入力画面→確認画面→完了
できる限り入力項目(入力フォーム)を減らす。
不要なものは削りましょう。
例：メールアドレスの確認など
※メールアドレスの確認はあるとミスを減らせて便利ですが、メールアドレスの入力は面倒くさいので、電話番号の入力があれば連絡がとれるので削りましょう。
必須項目もできる限り減らす
なくてもなんとかなる、ふりがな や 生年月日 や 性別 など 必須をできる限り減らす。
日付はカレンダー表示で入力させる
日付を入れさせる場合は、セレクタで 月、日を入れさせず、カレンダーで入力させましょう。
時間などはできる限りセレクタで入力（選択させれるものはすべてセレクタ、ラジオボタンに）
できる限り、キーボードで入力させることは減らします。
時間などはセレクタで選択させてあげましょう。
必須項目は色をつけてあげる（入力ができたら色を消す）
必須項目は色を替えてわかりやすいようにしましょう。入力がしっかりできたところは、色を白などにしてあげる。
エントリーフォーム最適化(EFO) コピペ用サンプルソース
細かな部分は調整しながら使うこと。 ※今後追記していきます。
お問い合わせフォームの流れ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!-- HTML --> <ul class="contact-flow"> <li class="is-active">お申し込み内容のご入力</li> <li>入力内容の確認</li> <li>完了</li> </ul> <!-- CSS --> .contact-flow { display: flex; clear: both; margin-top: 10px; margin-bottom: 30px; border-radius: 25px; overflow: hidden; } .contact-flow li { width: 33.33333%; font-size: 124%; font-weight: bold; padding: 30px 10px; text-align: center; background-color: #eee; } .contact-flow li:nth-child(1) { background-color: #e0e0e0; } .contact-flow li:nth-child(2) { background-color: #ebebeb; } .contact-flow li:nth-child(3) { background-color: #f6f6f6 background-image:none !important; } .contact-flow li.is-active { width: 35%; color: #fff; background: url(/img/contact_flow_arrow.png) no-repeat right center; background-color: black; } |
入力フォーム input でできる限り最適化
type=”number” type=”email”はブラウザ・バージョンごとに挙動が違うため扱いに注意
自動入力を無効にする場合は、autocomplete属性をoffにする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
姓名 <input type="text" name="name" autocomplete="name"> 姓 <input type="text" name="family-name" autocomplete="family-name"> 名 <input type="text" name="given-name" autocomplete="given-name"> 電話番号 <input type="tel" name="tel" autocomplete="tel"> メールアドレス <input type="email" name="email" autocomplete="email"> 郵便番号 <input type="number" name="postal-code" autocomplete="postal-code"> 都道府県 <input type="text" name="address-level1" autocomplete="address-level1"> 市区町村 <input type="text" name="address-level2" autocomplete="address-level2"> 番地・マンション名（1行目） <input type="text" name="address-line1" autocomplete="address-line1"> 番地・マンション名（2行目） <input type="text" name="address-line2" autocomplete="address-line2"> 会社名 <input type="text" name="organization" autocomplete="organization"> |
必須項目を色替えしてあげてわかりやすく
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!-- Js --> <script> $(function(){ $('.js-required input[type=text],.js-required textarea,.js-required select').css({ backgroundColor: '#fff' }); $('.js-required input,.js-required textarea,.js-required select,.js-required option').each(function(){ if(this.value == ""){ $(this).css("background-color","#ffebeb"); } else { $(this).css("background-color","#ffffff"); } }); $('.js-required input,.js-required textarea,.js-required select,.js-required option').blur(function(){ if(this.value == ""){ $(this).css("background-color","#ffebeb"); } else { $(this).css("background-color","#ffffff"); if($('#js-kana1').val() == "") { $('#js-kana1').css("background-color","#ffebeb"); } else { $('#js-kana1').css("background-color","#ffffff"); } if($('#js-kana2').val() == "") { $('#js-kana2').css("background-color","#ffebeb"); } else { $('#js-kana2').css("background-color","#ffffff"); } } }); }); </script> <!-- Js --> <table> <tr> <th scope="row">お名前</th> <td class="js-required"> <input type="text" name="お名前" placeholder="例：山田 太郎" required> </td> </tr> </table> |
