【EFO】エントリーフォーム最適化で実装したい具体的なコードまとめ

はじめまして。
制作の久保田です。

絶賛抜歯ブームのeccoで歯の痛みに耐えながら、EFOの具体的な対策方法をまとめました。
EFOにはどんな対策があって、具体的にどうやって実装するかの参考になればと思います。

EFOとは？

EFOとは、Entry Form Optimization（エントリーフォーム最適化）の略で、フォーム入力の煩わしさを改善して、お問い合わせや成約につなげる施策のことです。
具体的には

• 入力項目を絞って、手間を省く
• ステップをわかりやすく簡潔にする
• 入力に間違いがある場合、わかりやすく伝える
• セキュリティや個人情報の取り扱いで安心感をもたせる

などの施策を行います。

ここでは、かんたんに導入できるものから、少し手のこんだものまで、具体的な導入方法をいくつかご紹介します。

「郵便番号」を入力したら、「住所」を自動入力する

住所を入力するフォームで、例えば郵便番号に「4600011」と入力すると、住所に「愛知県名古屋市中区大須」が自動で入力されるような機能です。
実際に「名古屋市中区大須」を入力するには、少なくとも11フリックする必要があり、地味に面倒なのでユーザーにとっては嬉しい機能です。
プラグインで非常にかんたんに導入できるので、まず最初に導入を検討してみてください。

実装方法

自動入力のプラグインはいくつかありますが、ここではajaxzip3を使用して実装します。
CDNが配布されているため、以下のコードを読み込みます。

<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>

CDNを使用しない場合は、ajaxzip3のページからソースをダウンロードし、ajaxzip3.jsを読み込みます。
あとは、フォームを用意して、以下を実行するだけです。

AjaxZip3.zip2addr( [郵便番号3桁、または8桁], [郵便番号下4桁], [都道府県], [市区町村], [丁目番地], [町域大字] );

AjaxZip3.zip2addr の引数はそれぞれ、<input>タグのname属性の値になります。
具体的には、以下のように実行します。

<form>
    <input type="text" name="zip" placeholder="郵便番号">
    <input type="text" name="address" placeholder="住所">
</form>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
<script>
jQuery( function($) {
    $( 'form[name=zip]' ).on( 'blur', function() {
        AjaxZip3.zip2addr( this, '', 'address', 'address' );
    });
});
</script>

ここではjqueryを使用していますが、フォーム変更時のイベントで実行すればどういった書き方でもokです。

「名前」を入力したら「フリガナ」を自動入力する

細かいところですが、フリガナを自動入力することもできます。ちょっとしたことでもユーザーの手間を省くことたできるので、こちらも導入をおすすめします。

実装方法

jquery.autoKana.jsを使用することで、かんたんに実装できます。
配布元:  jquery.autoKana.js
jQuery本体のCDNはこちら: jQuery
ダウンロードして、jquery本体と、jquery.autoKana.jsを読み込みます。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="js/jquery.autoKana.js"></script>

jquery.autoKana の実行方法は以下になります。

$.fn.autoKana( '#name', '#kana', { katakana: [真偽値] } );

名前とカナの<input>タグを紐付けます。katakanaをtrueにすると、振り仮名はカタカナ表記になります。
具体的には以下のように実行します。

<form>
    名前: <input type="text" id="name">
    カナ: <input type="text" id="kana">
</form>

<script>
jQuery( function($) {
    $.fn.autoKana( '#name', '#kana' );
    // カタカナ表記の場合はこちら
    // $.fn.autoKana( '#name', '#kana', { katakana:true } );
}
});
</script>

項目に適したキーボードを表示する

実際にフォームを使用する際、日本語、英語、数字などの切り替えを行うのは結構手間だったりします。
これは、<input>タグの属性値を指定することで、正しいキーボードを呼び出すことができます。

実装方法

// メールを入力する
<input type="email"> // 英数字パネルが表示されます。

// 電話番号を入力する
<input type="tel"> // テンキーが表示されます。

// 数値を入力する
<input type="number"> // テンキーが表示されます。

// urlを入力する
<input type="url"> // 英数字パネルが表示されます。

// 日付を入力する
<input type="date"> // デイトピッカーが表示されます。

// パスワードを入力する
<input type="password"> // 英数字パネルが表示され、テキストは伏せ字で表示されます。

フォームの見た目がほぼ変わらないので、全て<input type=”text”>で指定しがちですが、上記のように動作には違いがあるため目的に合った属性値を指定するようにします。

入力確認画面を設置する

誤送信を防いだり、ユーザーに安心感を与えるためにも、入力後の最終確認画面を設置します。
弊社では、wordpressでのサイト制作が多いため、ここではContact Form 7に確認画面を実装する方法をご紹介します。

実装方法

Contact Form 7 add confirm という拡張プラグインを使用します。
プラグイン新規追加から、Contact Form 7 add confirmを検索し、インストール、有効化します。
有効化すると、フォームの編集画面から「確認ボタン」と「戻って編集ボタン」を選択できるようになります。
ショートコードは、[confirm “確認”][back “編集”]の2つです。

[confirm "確認"]
[back "編集"]
[submit "送信"]

送信ボタンと併記することで、確認ボタンは確認前のみ、送信ボタンは確認後のみ表示されるようになります。
確認画面の<input>要素にはwpcf7c-confというclassが付与され、readonlyになります。
必要に応じて、wpcf7c-confのスタイルを調整します。

入力が完了した項目にチェックマークをつける

eccoのフォームでも実装されてるように、入力に問題がなかった場合にチェックマークを付けます。

実装方法

ここは都合の良いプラグインが無いんで、jQueryで実装してみます。
まずはformを用意します。

<form>
<dl>
    <dt>名前</dt>
    <dd><input class="user-success" aria-required="true" type="text"></dd>
    <dt>フリガナ</dt>
    <dd><input class="user-error" aria-required="true" type="text"></dd>
</dl>
</form>

ここでもContact Form 7で実装する場合を例にしてみます。
Contact Form 7で必須項目にした場合、<input>タグにarea-required=”true”の属性が付与されます。
入力に問題があった場合は user-error、問題がなかった場合はuser-successのclassが付与されるので、これの値をチェックして親要素の背景を変更します。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
// check用の関数を定義
function input_check( tgt ) {
    // user-successのclassを持っていたら
    if( tgt.hasClass( 'user-success' ) ) {
        // 親要素にokのclassをつける
        tgt.parent().addClass( 'ok' );
    } else {
        tgt.parent().removeClass( 'ok' );
    }
}
// area-required="true"の要素に対して実行
$( 'input[aria-required="true"]' ).on( 'blur', function() {
    input_check( $(this) );
});
</script>

あとは、okのついた要素にstyleを指定すれば完了です。

.ok {
    background: url( check-ok.svg ) right center no-repeat;
}

残りの必須項目数を表示する

こちらも、eccoのフォームで実装されている機能です。
ここでもContact Form 7で実装する方法を見ていきます。

実装方法

まず、必須項目数と残りを出力するタグを用意します。

<p>残りの必須入力項目: <span class="num"></span> / <span class="items"></span></p>

itemsに必須項目数、numに残りの入力項目数をにセットします。実際の表示は1/6などになります。
ここの数値を計算してセットする方法は以下。

<script>
// 必須項目数をセット
var items = $( 'form' ).find( 'input[aria-required="true"]' ).length;
$( '.items' ).html( items );
</script>

必須項目はaria-required=”true”の属性をもった<input>要素の数なので、lengthで取得できます。

残りの項目数は、次の関数で動的に取得します。

function calc() {
    // 入力完了の数を初期化
    i = 0;
    // 必須項目の全てを取得し
    $( 'form' ).find( 'input[aria-required="true"]' ).each( function() {
        // user-success（入力okの項目）だったら項目数を足す
        if( $(this).hasClass( 'user-success' ) ) i++;
    });
    // items（必須項目数）からi（入力完了）の数を引いて数値をセット
    $( '.num' ).html( items - i );
}

上記で動的に未完了の項目数をセットできるので、ページの読み込み時とフォームの入力時に実行します。

<script>
// 読み込み時に初期化
$(window).on( 'load', function() {
    calc();
});
// フォームに変更があったら、再計算
$( 'input[aria-required="true"]' ).on( 'blur', function() {
    calc();
});
</script>

script部分をまとめると、以下のようになります。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
function calc() {
    i = 0;
    $( 'form' ).find( 'input[aria-required="true"]' ).each( function() {
        if( $(this).hasClass( 'user-success' ) ) i++;
    });
    $( '.num' ).html( items - i );
}

var items = $( 'form' ).find( 'input[aria-required="true"]' ).length;
$( '.items' ).html( items );

$(window).on( 'load', function() {
    calc();
});

$( 'input[aria-required="true"]' ).on( 'blur', function() {
    input_check( $(this) );
    calc();
});
</script>

必須項目を入力するまで、送信（確認）ボタンを無効にする

項目数が多い場合、必須項目を見落として、何度も確認をクリックすることがあります。未完了の場合送信ボタンをクリックできないようにすることで回避できます。

実装方法

先程の未完了項目を数える関数に、以下のコードを追加します。

function calc() {
    i = 0;
    $( 'form' ).find( 'input[aria-required="true"]' ).each( function() {
        if( $(this).hasClass( 'user-success' ) ) i++;
    });
    $( '.num' ).html( items - i );

    // [追加] 残り項目数が0だった場合に、submitの文字と、disabledを変更する
    if( $( '.num' ).text() == 0 ) {
        $( 'input[type="submit"]' ).val( '確認する' ).prop( 'disabled', false );
    } else {
        $( 'input[type="submit"]' ).val( '入力が完了していません' ).prop( 'disabled', true );
    }

}

上記で、送信（確認）ボタンのクリックを制御できます。

後半少し難しくなりましたが、eccoで行っているEFOをご紹介しました。
他にも、効果が出た！ってことがあったら随時ご紹介していきたいと思います。