hene

hene.dev

フォーム作成時に気をつけること

フォーム作成時に気をつけること

フォーム作成時に気をつけたほうが良いと思ったことについて書きました。

環境

iOS 12.2

入力内容に適したキーボードを表示する

f.telephone_field

電話番号入力ボックスを生成

= f.telephone_field :phone_number, class: 'c-text-field', placeholder: '08012345678'

input type="email" になります。

電話番号の入力欄を f.text_field にしていましたが、スマホで見たときに、数字を入力するキーボードが表示されるようにしたかったので変更しました。

f.email_field

メールアドレス入力ボックスを生成

= f.email_field :email, class: 'c-text-field', placeholder: '[email protected]'

input type="email" になります。

メールアドレスの入力欄も f.text_field にしていましたが、スマホで見たときに、英語のキーボードを表示したかったので変更しました。

変更後も普通のキーボードが表示されました。英語のキーボードを表示するようなやり方が分かれば追記します。

自動入力

名前のふりがななど、自動入力可能なところは、自動入力するようにする。ユーザが入力する項目を減らすことで、離脱率を下げます。

便利なライブラリが公開されているので、適したものを選んで使うようにしましょう。

自分は、GitHub - ryo-utsunomiya/vanilla-autokana: A Vanilla-JavaScript library to complete furigana automatically. を利用しました。

入力項目を減らす

入力項目が多いとめんどくさくなって、途中で離脱してしまうユーザもいると思うので入力項目はできる限り減らす。

また、フォームに必要ない情報も表示しないほうが良いでしょう。

進捗を表示

あとどれくらい入力・選択すれば終わるか、わかると離脱が減るかもしれません。

入力・選択するときにズームさせない

input 要素の文字サイズが 16px より小さいと、input 要素に入力・選択する際、画面がズームしてしまいます。

input 要素の文字サイズは 16px を下回らないようにしましょう。

参考: iOS で input のフォーカス時に画面がズームするのを防ぐ - Qiita

(iOS のみ？ Android 端末で調べていないのでわかりません・・・)

導線を減らす

フォーム入力中に他のページに遷移するリンクがあると、そっちに遷移してしまうことがあるので、できる限り導線を減らすようにする。

タブを閉じるときに警告メッセージを表示する

タブを閉じようとしたり/再読込しようとしたときに下記のようにダイアログボックスを表示させる。

ダイアログボックス

間違って、タブを閉じたり/再読込してしまいそうになったときの操作を防げます。

自分は、beforeunload - イベントリファレンス | MDN を使って、実装しました。

参考

おまけ？

Rails ドキュメントは、Rails で作られてた。

関連記事

← Back to home