その入力フォームは大丈夫？

ショッピングカートやお問い合わせ、アンケートなどでは欠かせない入力フォーム。しかし、使いづらいものも多々見受けられます。以下のような使いづらい入力フォームは、訪問者に嫌がられ、入力フォームを設置した目的を達成できない原因になります。

• 入力項目が多すぎる
• 細かい入力制限がある
• 入力内容に合っていない入力方法
• どの入力項目に対応しているかわかりづらい
• どれが必須入力項目なのかわかりづらい
• 入力方法がわかりづらい
• デフォルトで入力されている値が誘導的・強要的
• 送信とキャンセルを間違えやすい
• ボタンのラベルとアクションの不一致
• 1つずつしかエラーを返さない
• エラーメッセージが高飛車
• エラーになった後で戻ると、入力した項目が全部消える
• 送信したことを後悔させてしまう
• ちゃんと送信できているか不安になる
• 返信がいつになるのかわからない
• メールフォーム以外の問い合わせ手段がない

せっかく入力フォームを設置するのですから、気分よく、目的を達成してもらいものですね。良い入力フォームを作るためのポイントを説明します。

その入力項目が本当に必要であればまだいいのですが、「なぜこの項目を入力しなければいけないのか？」という疑問が湧いてくるようなものはダメです。あと、アンケートであるなら調査目的もあった方がよいです。

フォーム設置側としてはついついあれもこれもと項目を増やしがちですが、入力フォームを使う目的を達成するのに必要最小限の項目数にしましょう。

なお、個人情報を収集する際は、プライバシーポリシーに関する文書をサイト内に置き、入力フォームのページからリンクを張って参照してもらう形をとるとよいです。

あるところでは半角英数字、別のところでは全角カタカナといったように、いちいちIMEのON/OFFを切り替えたり、ファンクションキーで文字種を切り替えるのは面倒です。ある程度パソコン操作になれていても面倒な操作です。初心者だと、現在、どの文字種で入力が行われているのかが把握できていなかったり、文字種の変換方法がわからないといったことも考えられるでしょう。

パスワードやID、ふりがな等でどうしても一定の文字種で入力して欲しい場面があるかとは思います。その場合は、入力する前にその旨を説明しましょう。これはアクセシビリティ上の配慮のためです。

また、サーバサイドスクリプト側で制御できる場合は積極的に活用していきましょう。（特にふりがな部分）

フォームの入力部品にはそれぞれ適・不適な場面があります。以下の表を参考にして下さい。

余裕があるのなら入力部品は縦並びのほうがいいです。横並びにするときは、入力部品と対応するラベルが明確になるよう、項目間に空白をもうけるなどしましょう。

また、明示的にLABEL要素で示すのも良い方法です。特に、チェックボックスやラジオボタンで有効です。入力部品だけでなく、ラベルをクリックしても、入力部品が反応します。アクセシビリティ上も良いことです。

LABEL要素で明示する場合にはLABEL要素のfor属性と入力部品のid属性が同じ値になるようにして下さい。例とHTMLソースを出します。

<input type="radio" name="yesor" id="yes" checked>
<label for="yes">はい</label><br>
<input type="radio" name="yesor" id="no">
<label for="no">いいえ</label><br>
<input type="submit" value="送信">

入力が必須な項目については、入力の前に必須であることを漢字で示して下さい。記号や色だけで必須項目であるのを示すのはアクセシビリティ上よくありません。

電話番号、郵便番号、クレジットカード番号など、ハイフンを入れるのか入れないのかわからない場合があります。入力前に入力例を示しましょう。もしくは、-で区切って入力部分を区切りましょう。

アンケートの場合は、中立性を保つようにして下さい。紙面で行うアンケートとは異なり、ラジオボタンで選択する場合はデフォルト値が入っていることが多いですが、（というより、(X)HTMLではラジオボタン群には１つのデフォルト値を選択しておかなければなりません。）誘導的な回答をさせるようなデフォルト値にしないで下さい。

また、会員登録や資料請求などでも、メールマガジンの購読などを強要するような選択肢は慎むべきです。

入力フォームで入力することを止める場合は、ブラウザを閉じてしまうのが大半です。わざわざ、<input type="reset">のタグを挿入する必要はありません。すなわち、リセットボタンは不要です。

また、入力項目を訂正するために「戻る」などのボタンを付けるときは、「戻る」を先につけて下さい。これはアクセシビリティ上の配慮のためです。

ボタンのラベルに書いてあることと、ボタンを押したときの動作は一致させるようにして下さい。「次へ」でいきなり入力完了やメール送信されても困ります。

入力エラーとなった場合は、エラーになった部分をまとめて返すようにして下さい。１つ１つ値をチェックしてエラーを返していると、怒られた気分が増していきます。

メッセージは否定形ではなく、肯定形で示すようにして下さい。

たとえば、半角英数字のみとなっている場合に他の文字種が入っていた場合には、「半角英数字で入力されていません。」ではなく、「半角英数字で入力して下さい。」と示すようにしましょう。

また、メッセージの言葉遣いも丁寧にして下さい。ただでさえ、エラーを犯してしまってしょぼくれているところに追い打ちをかけるような真似はダメです。

エラーになった後で入力画面に戻ると、入力した項目が全部消えるなんていうのは、最悪です。訪問者によっては、「もうええわ！」と拒絶反応を示すことでしょう。

パスワードなどを一部消すのも止めて下さい。新たなエラーの原因になります。私はよくこれで引っかかります。

FORM要素を使う場合にPOSTメソッドで送るメリットは、URLに送った値が出ないことです。一方、GETで送るとURLに送った値が出てしまいます。URLから個人情報が漏れるようなことがないようにして下さい。

フォームの送信ができた場合は、入力してくれた旨を感謝する完了メッセージを出しましょう。無事に送信された旨が訪問者に伝われば安心します。

特に商用サイトの場合に重要です。いつ品物が届くのか、会員登録が無事に済んだのか等は明記しておきましょう。

これも商用サイトの場合に重要です。問い合わせをしたいときに、メールフォームだとどこに送られるのかわかりません。電話番号、FAX番号などのインターネット以外での問い合わせ手段やメールアドレスの掲載をしましょう。そうすることで、訪問者のメールフォームに対する不安も緩和されます。