読者です 読者をやめる 読者になる 読者になる

kojiokanoのブログ

コーディング業務で困ったところをまとめています。

スマホでフォームをタップした時にテンキーが表示されるようにする

LPで電話番号などの数字を入力する項目はよくあると思います。スマホユーザーが項目をタップすると通常はテキストのキーボードが立ち上がりますが、最初からテンキーを表示してやることでページからの離脱を減らすことができるかと思います。

方法は以下これを足すだけ↓

<input type="tel">

↑をつけてやるだけでブラウザが最初からテンキーを立ち上げてくれます。

(アンドロイドもiphoneも最新のosが入っていれば対応していました)

LPの場合はhamlでさらにフォームを吐き出す感じなので↓のように赤文字部分を足すだけでOK

= f.text_field :tel, class: 'w100 validate[required]',type: 'tel',placeholder: '例:03-1234-5678',:"data-errormessage-value-missing" => '電話番号を入力してください。'

 

cv率上がりそうなので、スマホからの流入がある場合すべての数字入力フォームに使いましょう。

 

備考

input type="password" にすると英語のキーボードを表示

input type="text" にすると日本語キーボードを表示

input type="date" にすると日付の選択を表示

他にも色々とありますが、アンドロイドとiosによって表示が変わったりもするので検証して使ってみてください。