EFOを意識した問い合わせフォームの入力制御方法

お問い合わせフォームなどでの入力項目の制御方法について紹介いたします。

モバイルファーストなサイトでは、フォームなどユーザーが入力を必要とする項目を使いやすくする為、フロントエンドで様々な工夫が行われています。
その中でも特に多い対策は下記になると思います。

1. 入力キーボードの制御

2. 文字の自動変換

3. 入力エラーのリアルタイム表示

今回はこちらを順に説明致します。

１．入力キーボードの制御

入力項目をタップした際に表示されるキーボードの種類を指定できます。
指定方法は2通りあります。

1-1. input type

input typeは入力項目の種別を指定するオプションですが、
一部の値には表示されるキーボードの種類が変化するものがあります。

●email
　英字キーボードが表示されます。

入力に関しては全ての文字種が入力可能です。但しマルチバイト文字はPunycodeに自動変換されて表示されます。

<input type="email" id="name" name="name">

●number
　数字キーボードが表示されます。

入力に関しては半角数字、ドット、ハイフン、アルファベットのEが入力可能になります。（指数表示の為、アルファベットのEが入力可能になります）

<input type="number" id="name" name="name">

●tel
　数字キーボードが表示されます。

基本的に全ての文字が入力可能です。
※その他に「date」や「password」などもキーボードの種類が変化します。

<input type="tel" id="name" name="name">

input typeではキーボード表示の変化に加え、入力可能な文字種も制限され、「email」や「tel」については入力エラーの際にエラー表示も自動で表示がされます。

1-2. inputmode

inputmodeは表示するキーボードだけを変化させます。
input typeのように入力文字種が限定されたり、自動でエンコードされたりなどは発生しません。
またスマートフォン端末により表示されるキーボードタイプが異なります。

<input type="text" inputmode="email" id="name" name="name">

２．文字の自動変換

電話番号やメールアドレスなど、全角半角どちらの入力もありえる項目の場合、
内容を揃える為、全角・半角などに自動で変換して再表示します。
変換はJavaScriptで行いますが、変換を行うタイミングは2パターン考えられます。

2-1. 文字が入力されたタイミング

文字が入力される度に変換処理を行います。
入力に対しリアルタイムに変換、表示されるので見た目は良いですが、
漢字変換があるマルチバイトを扱う場合、漢字確定前に変換が起こる等の不具合が発生することがあるので注意が必要です。
また古いブラウザやスマートフォン端末を使用した際、処理が重くなりがちです。

let elem = document.getElementById('name');
elem.addEventListener('input', function(){
  /* 文字の変換処理 */
});

2-2. フォーカスが外れたタイミング

入力項目からフォーカスが外れた際に変換処理を行います。
全ての入力が完了した後に変換を行うので、入力サポートとしてはこちらの対応が適切だと考えます。

let elem = document.getElementById('name');
elem.addEventListener('blur', function(){
  /* 文字の変換処理 */
});

３．入力エラーのリアルタイム表示

入力された文字のエラーチェックをフロントで行い、エラー文言を表示します。
基本的にはJavaScriptで行いますが、HTMLでも簡易的に対応が可能です。

3-1. HTMLでのエラーチェック

input typeではメールアドレスなど一部でエラー表示が行われます。
また、pattern属性を使用すると正規表現での判定を行い、エラー表示が行えます。
ただフォーカスが外れたタイミングでのエラー表示ができなかったり、エラー表示のデザインがブラウザによってカスタムができなかったりと使いづらい部分が多いです。
また、そもそも対応をしていないブラウザもあります。

3-2. JavaScriptでのエラーチェック

JavaScriptでは自由に判定内容を作成できるので細かい内容のエラーチェックが可能です。
ただ作り込む必要があるため、工数・工期はHTMLでの対応に比べ大きくなります。

３つの対策ではそれぞれの方法にメリット・デメリットが存在しますが、
どれを選ぶかはリアルタイムでのエラー表示を行うかどうかで判断するのが良いと思います。

●リアルタイムエラーチェックが無い場合

1. 入力キーボードの制御
   HTMLのinput type + inputmodeで表示キーボードを指定しましょう。

2. 文字の自動変換
   JavaScriptでフォーカスが外れたタイミングで行いましょう。

3. 入力エラーのリアルタイム表示
   HTMLのpatternでそもそも入力をできなくしましょう。

●リアルタイムエラーチェックがある場合

1. 入力キーボードの制御
   HTMLのinputmodeで表示キーボードを指定しましょう。

2. 文字の自動変換
   JavaScriptでフォーカスが外れたタイミングで行いましょう。

3. 入力エラーのリアルタイム表示
   JavaScriptで作り込みましょう

スマートフォンからのソフトウェアキーボードの使用が増えた現在では、
フロントエンドでのこれらの対策をしっかり行い、ユーザビリティの向上を目指しましょう。

---

メタフェイズでは、フォームの作成からコーポレートサイトのCMS構築やECサイトの制作などシステム開発に関しても対応しております。
ご相談の内容に関わらず、お気軽に、お問い合わせ・ご相談ください。

🖥  コーポレートサイト  🖥 

株式会社メタフェイズ

🎨 制作実績はこちら 🎨

---

🩺   Webサイト診断ツール  🩺 
メタフェイズのノウハウを集結させた
オリジナルの簡易Webサイト診断ツール

戦略に強いWeb制作のプロによるWebサイト診断 | 株式会社メタフェイズ

Webサイトの課題発見や、
リニューアルの参考にご活用ください。

---