お問い合わせフォームの内容を入力する際、数字専用のキーボードが表示されたら便利だと感じたことはありませんか？
お問い合わせフォームの入力が多い場合、入力が面倒になり途中で入力をやめてしまう恐れがあります。
そんな場面で役立つのが、スマホでキーボードのタイプを指定できるinputmode属性です。
今回の記事では、WordPressプラグインの「Contact Form 7」でこのinputmode属性を指定するご紹介したいと思います。

Contact Form 7でスマホで数字キーボードをデフォルトにする方法

入力フィールドのキーボードタイプを指定する際には、inputmode属性を指定することで行います。しかし、「Contact Form 7」を使用する場合、プラグインの機能だけではキーボードのタイプを指定することは出来ません。
「Contact Form 7」の場合は、「jQuery」を利用して、inputmode属性を追加することでキーボードのタイプを指定する必要があります。

以下が、「jQuery」を利用して、inputmode属性を追加するコードです。

$(function(){
    $('input').attr('inputmode', 'numeric');
});

上の例では、フィールドのキーボードタイプは数値入力用が表示されます。
idやclassを指定することで特定の入力フィールドのみ変更することも出来ます。

「Contact Form 7」を利用せずフォームを自作する場合は直接inputタグにinputmode属性を指定する方が確実です。しかし、同様に「jQuery」を利用したこのコードでも指定することが出来ます。

その他のキーボードタイプ

inputmode属性は他にもあります。

inputmode=”none”

キーボードは表示されません。何もしていない場合、スマホではテキストを入力することが出来なくなります。

$(function(){
    $('input').attr('inputmode', 'none');
});

inputmode=”text”

標準のキーボードが表示されます。inputmode属性の指定がない場合に表示されるキーボードのタイプはこちらです。
アルファベット、数字、句読点などの一般的な文字を入力するのに適したキーボードが表示されます。

$(function(){
    $('input').attr('inputmode', 'text');
});

inputmode=”tel”

電話番号入力用のキーボードが表示されます。
このキーボードには、数字、ハイフン、および一般的な電話番号の記号が含まれています。電話番号を入力するのに便利です。
ただし、電話番号を入力するフィールドはinput type="tel"を使用するようにします。
「Contact Form 7」の場合は、「電話番号」で生成されるタグがinput type="tel"になります。

$(function(){
    $('input').attr('inputmode', 'tel');
});

inputmode=”url”

URL入力用のキーボードが表示されます。
このキーボードには、アルファベット、数字、および一般的なURL文字（”/”, “.”, “?”など）が含まれています。URLを入力するのに便利です。
ただし、URLを入力するフィールドはinput type="url"を使用するようにします。
「Contact Form 7」の場合は、「URL」で生成されるタグがinput type="url"になります。

$(function(){
    $('input').attr('inputmode', 'url');
});

inputmode=”email”

メールアドレス入力用のキーボードが表示されます。
このキーボードには、アルファベット、数字、”@”、”.”、”/”などのメールアドレスに使用される文字が含まれています。メールアドレスを入力するのに便利です。
ただし、メールアドレスを入力するフィールドはinput type="email"を使用するようにします。
「Contact Form 7」の場合は、「メールアドレス」で生成されるタグがinput type="email"になります。

$(function(){
    $('input').attr('inputmode', 'email');
});

inputmode=”numeric”

数値入力用のキーボードが表示されます。

$(function(){
    $('input').attr('inputmode', 'numeric');
});

inputmode=”decimal”

数値入力用のキーボードが表示されます。

$(function(){
    $('input').attr('inputmode', 'decimal');
});

inputmode=”search”

検索用のキーボードが表示されます。通常のテキスト入力キーボードとは異なり、検索に関連するキー（例えば、検索ボタンなど）が含まれています。検索ボックスに最適です。
ただし、検索ワードを入力するフィールドはinput type="search"を使用するようにします。
「Contact Form 7」の場合は、input type="search"は利用出来ないので、利用する場合はこの方法を利用します。

$(function(){
    $('input').attr('inputmode', 'search');
});

まとめ

いかがでしたか？
キーボードタイプを予め指定することでユーザーが入力しやすいキーボードが表示されます。
こうすることでユーザーが入力を途中でやめてしまうのを少しは防ぐことが出来るかもしれませんね。