Contact Form 7 でinput要素にtel 属性等入れてスマホ最適化する方法

英数字の入力時にスマホのキーボードが自動的に変わるようにする方法。

プラグインからは設定できないので、html5の属性をjQueryでいれるようにします。
具体的には、Contact Form7でinputを作る際にidをふり、そこに対してjQueryでtype属性を指定。

下記のようなjQueryをヘッダー部に入れておく。

[html]
<script type="text/javascript">
jQuery(function(){
jQuery(‘input#telephone’).prop(‘type’,’tel’);
jQuery(‘input#form_email’).prop(‘type’,’email’);
});
</script>
[/html]

====

※検証メモ
・普通は属性変更は .attr() を使うみたいだけど、これだと変わらなかった。
・inputにかけるのはclassだと変更ができなかった。

この記事を書いた人

mihoji

大阪でWEB屋さんをやっています。 WordPressを使ったサイト構築と、小規模な企業のマーケティング提案が得意です。 WordPressとIT系勉強会とビールがすき。