十字架ラビアンローズ

EFO(入力フォーム最適化)に有用そうな様々なテクニックを、ソースや動作サンプルと併せて紹介。メールフォームを少しでも改善させたい人は必見!

  1. トップページ
  2. Webサイト構築
  3. 制作のコツ
  4. メールフォームを最適化する様々なテクニックまとめ

メールフォームを最適化する様々なテクニックまとめ

2015.1.15.Thu. 19:30

EFO(入力フォーム最適化)の重要さ、及び「こうしろ」「こういう事をするな」という指南をするサイトは多々見受けられますが、その一方でこの「こうしろ」のやり方を伝授しているサイトってあまり見かけないような気がするなーと思ったので、EFOに有用そうな色々なテクニックをまとめて紹介します。
※以下に紹介する手法はそれぞれ、あくまで一例です。

現在入力中のフォームに背景色を付加

CSSのセレクタ:focusを使用する事で、簡単に導入出来ます。
<input>は属性セレクタを用いて、特定のtype属性の場合にのみ背景色が適用されるようにすると良いでしょう。


form input[type="text"],
form input[type="password"],
form textarea,
form select
{
background-color:#ffffff;
}

form input[type="text"]:focus,
form input[type="password"]:focus,
form textarea:focus,
form select:focus
{
background-color:#ffcccc;
}

入力ミスのエラーメッセージをリアルタイムに表示

  1. jQueryValid8をダウンロードします。

  2. <head></head>内にて、JSファイル2点を外部ファイルとして読み込みます。
    (xxx … バージョンの数値)

    
    <script type="text/javascript" src="jquery-xxx.min.js"></script>
    <script type="text/javascript" src="jquery.valid8.js"></script>
    
  3. <script type="text/javascript"></script>にて、エラーメッセージを適用させる入力フォームの数だけ、オプション設定を記述します。

    
    $(document).ready(function(){
    /* something */
    });
    

以下、#ID等のようになっている箇所にそれぞれ、当該内容の指定を適用させたい入力フォームのIDを記述して下さい。

必須項目(デフォルト)

$('#ID').valid8();

何も指定しないと、エラー時に「Required」というメッセージが表示されます。

必須項目(文言指定)

$('#ID').valid8('入力必須項目です。');

エラーメッセージに任意の文言を指定する事が出来ます。

半角英数字のみ

$('#ID').valid8({
'regularExpressions' : [{
expression : /^[a-zA-Z0-9]+$/,
errormessage : '半角英数字のみ入力可能です。'
}]
});

半角英数字以外が入力された時にエラーメッセージが表示されます。

メールアドレス入力欄

$('#ID').valid8({
regularExpressions : [
{
expression : /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:¥.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?¥.)+(aero|asia|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel.ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|es|et|eu|fi|fj|fk|fm|.fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|.il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ro|rs|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tl|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)¥b$/,
errormessage : 'メールアドレスの書式が不正です。'
}
]
});

メールアドレスとして不適切な文言が入力された時にエラーメッセージが表示されます。

パスワード確認

function doesPasswordFieldsMatch(values){
if(values.password == values.verification){
return{
valid : true
}
}else{
return{
valid : false,
message : 'パスワードが違います。'
}
}
}

$('#1つめの入力欄のID').valid8('パスワードが入力されていません。');

$('#2つめの入力欄のID').valid8({
'jsFunctions' : [{
function : doesPasswordFieldsMatch,
values : function(){
return{
password : $('#1つめの入力欄のID').val(),
verification : $('#2つめの入力欄のID').val()
}
}
}]
});

1つめのパスワード入力欄と2つめのパスワード入力欄とで入力内容が異なる時にエラーメッセージが表示されます。

エラーメッセージは自動的に、クラス名「validationMessage」とID「#IDValidationMessage」が振られた<span></span>に囲まれて出力されます。
併せてCSSでspan.validationMessage {display:block;}等のようにしておくのも良いでしょう。
また入力フォームの親要素には、入力内容がOKだと「valid」・NGだと「error」というクラス名が動的に付加されます。

郵便番号を入力すると住所を自動で出力

  1. jQueryをダウンロードします。

  2. <head></head>内にて、jQueryと「jquery.jpostal.js」を外部ファイルとして読み込みます。
    (xxx … バージョンの数値)
    「jquery.jpostal.js」はダウンロードせずとも、直接ファイルを引っ張ってきて適用させる事が出来ます。

    
    <script type="text/javascript" src="jquery-xxx.min.js"></script>
    <script type="text/javascript" src="//jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>
    
  3. 郵便番号・住所の入力フォームを用意し、該当するそれらの全てにIDを適用させます。
    郵便番号の欄は1つ(7桁)でも2つ(3桁+4桁)でもOKです。
    住所の欄も、1つだけでも、都道府県名・市区町村名・番地等複数に分割していてもOKです。
    また都道府県名はプルダウンでもOKです。

  4. <script type="text/javascript"></script>にて、各入力フォームに指定したIDを交えて設定を記述します。

    
    $(window).ready(function(){
    $('#郵便番号のID').jpostal({
    postcode : [
    '#郵便番号のID'
    ],
    address : {
    '#都道府県名のID' : '%3',
    '#市区名のID' : '%4',
    '#町村名のID' : '%5'
    }
    });
    });
    

4.の設定項目の詳細は以下になります。
#ID等のようになっている箇所にそれぞれ、当該内容の指定を適用させたい入力フォームのIDを記述して下さい。

postcode : [],

郵便番号欄のIDを''で囲み記述します。
欄を2つ用意している場合は両方のIDを記述し、,で区切ります。


$('#郵便番号のIDその1').jpostal({
postcode : [
'#郵便番号のIDその1',
'#郵便番号のIDその2'
],
(中略)
});
address : {}

'#ID' : ''という形式で、住所欄のIDと変数とをセットで記述します。
欄を2つ以上用意している場合は,で区切ります。
変数はそれぞれ以下の項目に相当します。
市区名と町村名とを「港区赤坂」のように、合わせて1つの欄に出力されるようにしたい場合には、'#市区町村名のID' : '%4%5'のように記述する事が出来ます。

  • %3 … 都道府県名
  • %4 … 市区名
  • %5 … 町村名

特定箇所をクリックで入力項目の表示/非表示を切り替え

jQuery等の外部JSファイルは使用しません。

  1. <script type="text/javascript"></script>にて、以下のように記述します。
    IDには、表示/非表示を切り替えたい箇所のIDを指定します(#は不要)。

    
    function showhide(flg){
    if(flg == 0){
    document.getElementById("ID").style.display="block";
    }else{
    document.getElementById("ID").style.display="none";
    }
    }
    
  2. クリックする事で表示/非表示を切り替える事の出来るスイッチとなる箇所を、以下のように記述します。

    
    <span onclick="showhide(0)" onkeypress="showhide(0)">表示</span>
    <span onclick="showhide(1)" onkeypress="showhide(1)">非表示</span>
    

2.で指定した箇所をクリックする事で関数に数値を渡し、その数値を条件として分岐を行っています。
そして特定の数値の際に、指定したIDの箇所に指定したCSSプロパティを適用させるという内容になっています。
上記例ではdisplayblocknoneにしていますが、マークアップ内容によってはこれをtable-row等に適宜変更する必要があります。

またこの方法はあくまで、項目の表示/非表示を切り替えるという、見た目の変化を演出するものとなっています。
その為、特定条件下でのみ表示される項目を入力必須項目にするのは望ましくありません。
(あるいはシステムの方にてきちんとフォローされるようにしましょう)

動作サンプル

動作サンプル

また以下のリンクから、上述のテクニック一式の動作サンプルをダウンロード出来ます。
jQuery及び「jquery.valid8.js」は再配布に該当する為に同梱していませんので、お手数ですが配布元サイトより各自でダウンロードして下さい。
(※因みに「jquery.jpostal.js」はローカル環境では動作しませんのでご注意下さい)

  • index.html … 動作サンプルページ
  • css/style.css … 「index.html」用CSSファイル
  • js/customize.js … 上述のオプションを記述したJSファイル

動作サンプルダウンロード

また宜しければ、チェックボックス・ラジオボタンをスマホサイト風に表示させる方法も併せて参考にしてみて下さい。

Twitter

アーカイブ

全記事アーカイブ

ブログパーツ

  • アイラブ地元ブログパーツ