Contact Form 7 は HTML5 の入力タイプをサポートしますか?

This page is also available in English.

はい。Contact Form 7 3.4 以上からこれらの HTML5 入力タイプに対応したフォームタグをサポートします: emailtelurlnumberrangedate

HTML5 の入力タイプを使いたくない場合は、次のコードをテーマの functions.php ファイルに追加することで無効化できます:

add_filter( 'wpcf7_support_html5', '__return_false' );

最新のブラウザでも HTML5 の全機能をサポートしているわけではないのでご注意ください。例えば最新の Firefox でも date 入力タイプ(カレンダーから日付をピックアップする UI)や number 入力タイプ(数値を入力するスピンボックス型 UI)をまだサポートしていないため、カレンダーやスピンボックスの UI の代替として一般的なテキスト入力フィールドを提供します。ユーザーにとってはどのような形式の入力値を入れたら良いのかわからず、混乱させてしまうかもしれません。だったらすべてのブラウザがすべての HTML5 の機能をサポートするまで待った方が賢明じゃないか、そのように考えてしまうかもしれません。

でも待つ必要はありません!Contact Form 7 にはもっとましな解決策があります。Contact Form 7 は datenumber 両入力フィールドのために jQuery UI ベースのフォールバック機能を提供することができます。これを利用することで、Firefox でも Internet Explorer でも、date フィールドにはカレンダーの UI を、number フィールドにはスピンボックスの UI を、それぞれ提供することができるようになります。

デフォルトではこのフォールバック機能は無効化されています。この機能は追加の JavaScript と CSS をロードしますし(パフォーマンス低下要因)、datenumber 入力フィールドを使わないウェブサイトではそもそも必要がないためです。もし datenumber の入力フィールドを使っていて、この jQuery UI ベースのフォールバック機能を使いたい場合は、次のコードをテーマの functions.php ファイルに追加して機能を有効化してください:

add_filter( 'wpcf7_support_html5_fallback', '__return_true' );

関連項目: 必要な場合だけ JavaScript とスタイルシートをロードさせるには

WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。