スマホからのお買い物をもっと楽に!HTML5に対応した入力フォーム

スポンサーリンク

HTML5に対応したに入力フォームを作れば、スマホでの入力がぐっと楽になります。

特に、郵便番号や電話番号などの入力時には、指定の属性をあらかじめ付与しておくと自動でテンキーが表示されるようになるので、スマホユーザーの顧客が感じる注文の煩わしさを軽減することが出来ます。

Welcart対応テーマ スマホ表示

WelcartはまだXHTMLの入力フォームですので、今回はjQueryで属性値を変更させる方法で対応。いずれはWelcart側でもHTML5に移行していくかと思いますので、その場合には単にコードを削除するだけで済むように、簡易的なカスタマイズにしました。

もくじ

  1. HTML5の入力フォームについて
  2. e-mail部分はファイルを直接書き換え
  3. jQueryのファイルを作る
  4. functions.phpでjQueryのファイルを読み込む
  5. まとめ

1. HTML5の入力フォームについて

HTML5の入力フォームは、入力する内容を<input>や<select>の属性値として指定することで、入力内容と異なる情報を入れた時にエラーを出したり、必須項目であることを明示することが出来ます。

例:e-mailの入力の場合

XHTML以前 HTML5
<input type=”text”>  <input type=”email“>

e-mailアドレス以外(実際は@が入っていない文字列)を入力して「送信」すると、HTML5に対応しているブラウザならば以下の画像のようなエラーを自動で出してくれます。

HTML5の入力フォーム(email)

FireFoxの場合

また、属性値によっては、スマホ入力の際に適切なキー表示をしてくれるようになります。

スマホのテンキー

tel/number入力の場合

【2015/1/27追記】コメント欄よりご指摘頂きました。郵便番号入力欄をnumber属性にした場合、iPhoneではハイフンが入力出来なくなり、Paypalでの支払い時にエラーになるそうです。このカスタマイズを行う場合は、郵便番号入力時に自動でハイフン補完・住所入力を行ってくれるプラグインzipaddr-jpを併用することをおすすめ致します。
スマホemail入力

email入力の場合。「@」が最初から表示される

HTML5の入力フォームで指定できる属性値

今回はメールアドレス・数値入力部分等の属性のみのカスタマイズですが、HTML5では日付やカラーピッカー等の属性値がカバーされています。

<input>-HTML5タグリファレンス – HTMLクイックリファレンス

その他、プレースホルダー機能などもありますから、必要に応じて導入してもいいですね。

こちらの本にも詳しい説明がありますので、興味があればどうぞ。安定のエビスコム本。

HTML5 スタンダード・デザインガイド

2. Welcartの入力項目

Welcartお客様情報入力フォームは、プラグインが出力している部分がかなりあり、直接<input>項目をカスタマイズ出来るのはメールアドレスとパスワードの入力部分だけとなります。

Welcartのお客様情報入力

「プラグインが吐き出すため編集不可能」と書いてはいますが、フィルターフックを使えば一応出来ます。

パスワードは属性値が最初から「password」になっていますので、HTML5用に変更する必要はありません。

もし、既にメンバーページやお客様情報ページなどを使用中テーマに退避済みの場合には、直接メールアドレスの入力フィールドのtype属性をemailに書き換えてもOKです(その場合は、3で説明するメールアドレスのtype属性を書き換えるjQueryは不要となります)。

お客様が入力する項目があるページは以下の通りです。

  • wc_customer_page.php(お客様情報ページ)
  • wc_delivery_page.php(発送・支払い方法ページ)
  • wc_login_page.php(ログインページ)
  • wc_member_page.php(メンバーページ)
  • wc_new_member_page.php(新規メンバー登録ページ)
  • wc_lostpassword_page.php(パスワードを忘れた場合のページ)

※会員パスワード変更ページのwc_changepassword_page.phpは、わざわざHTML5にする部分がないため省いています。

それぞれのページの見え方をチェックして、どの入力フィールドにどんなidやclassがついているかチェックしておきましょう。

3. jQueryのファイルを作る

今回はカスタマイズを簡略化するために、全てjQueryで書き換えを行います。いずれWelcartもHTML5に対応される可能性もあるので、その際はこのファイルとファイルの読み込み命令を削除すればいいだけです。

メールアドレス部分

$('#loginmail,input[name="loginmail"],input[name*="mailaddress"]').attr('type', 'email');

ログインページ・メンバーページ・お客様情報ページでのメールアドレス入力部分を、HTML5に対応させます。

wc_customer_page.php(お客様情報ページ)での「会員の方はこちら」でのメールアドレス・パスワードの入力フィールドのid要素と、「会員でない方は~」のメールアドレス入力フィールドのid要素の計3つが、デフォルトでは全てmailaddress1になってしまっています。そのためセレクタの指定がやや面倒臭いことになっています。

数字部分

$('.quantity,#zipcode,#tel,#fax,.used_point').attr('type', 'tel');

上記で書き換えを行っているのは、左から順に以下の5つです。

  • 数量変更の数字入力
  • 郵便番号
  • 電話番号
  • FAX番号
  • ポイント使用の入力

ここでは全てtelとしました。numberという属性もありますが、半角入力を強制します。

Welcartのデフォルトでは郵便番号以外は半角入力強制となっているので、好みでnumberに変えても良いでしょう。

ふたつをまとめると・・・

まとめるとこんな感じです。

jQuery(function($){
 $('.quantity,#zipcode,#tel,#fax,.used_point').attr('type', 'tel');
 $('#loginmail,input[name="loginmail"],input[name*="mailaddress"]').attr('type', 'email');
});

テキストエディタなどで書いた上記コードはvalidation.js等の名前をつけ、使用中テーマ内にjsファイルとして保存します。

必須項目の「required」もつける場合

必須項目を示すrequiredという属性をinput内に入れておくと、フィールドが空の場合にはエラーが出ます。

Google Chromeの場合

Google Chromeの場合

jQueryでrequired属性をつける場合には、propという命令を使います。

$('input[name*="mailaddress"],#name1,#name2,#zipcode,#customer_pref,#member_pref,#address1,#address2,#tel,#password1,#password2').prop('required', true);

ただ、これだけでは「戻る」ボタンを押した時にも「必須です」が作動してしまい戻れなくなります。そこで、戻る関連ボタンでは無効にする命令も付け加える必要があります(未検証)。

今回の目的は「スマホでの入力を楽にする」だけですので、カスタマイズからは省きました。

4. functions.phpでjQueryのファイルを読み込む

WordPressでjQueryを動かすには、jQueryの本体が読み込まれている必要があります。jQueryはWordPressに付属していますので、以下のコードをfunctions.phpに書き込めばOK。wp_head()読み込み時に一緒に読み込まれます。

function my_scripts(){
   wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

更に、先ほど作成したvalidation.jsを読み込むには、以下のように書き足します。

function my_scripts(){
   wp_enqueue_script( 'jquery' );
   if( is_page( array( 'usces-cart','usces-member' )) ){
      wp_enqueue_script( 'validation', get_template_directory_uri() . '/validation.js', array(), '', true);
   }
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

3行目に入れたif文は、カートページまたは会員ページの場合にのみ、validation.jsを読み込むようにする命令です。

これで完了です。

5. まとめ

飽くまでもHTML5に対応したブラウザでしか作動しない点には注意ですが、XHTML以前のブラウザでもこのコーディングでエラーが出るわけではないため、安心して導入出来ます。

欠点もなくはありません。HTML5対応ブラウザによる項目チェックは「メールアドレスには@さえ入っていればいい」等になっており、やや不完全です。完全なチェック機能を求める場合には、jQuery-Validation-Engine等のプラグインを使ったほうがいいです。

都道府県セレクトにもValidationEngine適用

ただ、今回のカスタマイズはスマホからのお買い物では格段に入力が楽になりますので、HTML5でECサイトを作っている場合はカゴ落ち対策の一つとして取り入れても損はないでしょう。

いずれは標準でWelcartが対応してくれることに期待です。

10 Responses to “スマホからのお買い物をもっと楽に!HTML5に対応した入力フォーム”

  1. 正弘 より:

    いつもありがとうございます。現在、活用させていただいております。素晴らしいテーマだと感謝いたします。ひとつ気になったことがありコメントさせていただきます。自動でテンキーが表示されることに関して、iphoneのお客より「郵便番号の入力の際、テンキーになるとハイフンを入れることが出来ない。」「ハイフンを入れるために入力をアルファベットに変えようとしても、それもできない」「だから申し込みが出来ないので他の方法は無いか」というお声をいただきました。

    私自身確認したところ、アンドロイドではテンキーにハイフンがありますが、iphoneのテンキーにはありません。

    そうなると、郵便番号にハイフンが入らず、そのままpaypalの決済に移った場合、paypalの郵便番号のフォームの、2つの郵便番号フォームの最初のフォームに全ての郵便番号が入ってしまいエラーが起きてしまします。となると、payalので決済ができない状態になります。

    ipadではそのようなことはありません。iphoneだけだと思います。

    paypalでの決済が出来ずに注文が出来ないとなると、
    郵便番号だけは、テンキーではない方がいいかもしれないと思います。

    素晴らしいテーマに難癖をつけてるようで心苦しいのですが、
    一つの情報として、お納めくだされば幸いです。

    これからも、よろしくお願いいたします。

    お体、ご自愛くださいませ。

    失礼します。

    • まめ子(管理人) より:

      貴重なフィードバック、深謝致します。成る程、iphoneテンキーにはそのような問題がございましたか・・・。早速、次回更新時に反映させて頂こうと存じます。正弘様のサイトでこの問題を回避するために、例えばプラグインのzipaddr-jp(記事はこちら)を利用してみては如何でしょうか。入力者が全角で入れようがハイフンなしで入れようが、自動で「半角ハイフンあり」の郵便番号に変換してくれる上に、町名までは全て補完してくれるという便利なプラグインです(もちろん無料です)。宜しければご参考下さいませ。

  2. 正弘 より:

    ありがとうございます。さっそく、zipaddr-jpを導入しテストてみました。素晴らしい便利なプラグインです。テストしてみたところ、PCのプラウザでは、おっしゃってるようにハイフンに変換され住所も入力されます。

    ただ、、、スマートフォン(アンドロイド・iphonともに)では住所は自動入力されるのですが、郵便番号にハイフンが入らないみたいです。。。

    設定の「ガイダンス画面の出力」は「7桁~」にしています。

    少しいろいろやってみて素人なりに分かったことは、PCのフォームでは、「123-4567」とハイフンを入れて8桁まで入力までできますが、スマートフォンでは、7桁まで「123-456」しか入力できないようです。

    つまり、スマートフォンでハイフンが自動で入らなかったので、ハイフンを入れて入力してみると、今度は最後の数字が入力できなくなってしまうようで。。

    だから、数字だけを入れると、自動でハイフンが入る余裕がないのかな~とか考えてみたり。。。素人発想ですみません。

    こちらの環境や他のプラグインの影響かもしれませんね。。。

    せっかく、教えていただいたのにすみません。

    とりあえず、今の状況でこれからも活用させていただきます。

    いろいろと、すみません。

    これからも、よろしくお願いいたします。

    ありがとうございます。

    失礼します。

    • まめ子(管理人) より:

      成る程、今度はそのような問題が・・・手持ちの古いiPod touchで確かめてみましたが、確かにハイフンが入りませんね。細かく検証しておらず済みませんでした。プラグインの制作者の方にコンタクトしてみようと思います。

      • 正弘 より:

        お手数をおかけしまして、申し訳ありません。よろしくお願いいたします。

        • まめ子(管理人) より:

          プラグイン制作者の方曰く、1年程前よりスマホではハイフンなしの仕様に変更したとのこと。Paypalの件はご存知なかったそうで変更そのものはすぐに出来るそうですが、もしかしたらハイフンなしで構築されている方もいらっしゃる可能性もあり、お時間がある時にご対応を考えて下さるそうです。

  3. 正弘 より:

    ありがとうございます。よろしくお願いいたします。

    • まめ子(管理人) より:

      制作者の方からご連絡あり、「スマホでもハイフンあり」に仕様を変更下さったそうです。ご確認下さいませ。

      • 正弘 より:

        スマートフォン(アンドロイド・iphone)で確認させていただき、問題なくハイフンも住所も入りました。これでスマホからpaypal決済への移行もスムーズになります。お手間をおかけいたしました。ありがとうございました。感謝いたします。

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.