WordPress – Contact Form 7のフォールバック機能。HTML5未対応ブラウザのために

この記事は約3分で読めます。
スポンサーリンク

WordPressのプラグイン「Contact Form 7」はHTML5の入力タイプに対応したフォームタグをサポートしています( email , tel , url , number , range , date )。
date や number といった入力タイプは、通常のWebサイトではあまり必要のない入力タイプだと思いますが、旅行や宿泊、お店の予約フォームなどでは必要となってくるのではないでしょうか。
しかし、ブラウザにより、最新でもHTML5の全機能をサポートしていない場合があります。例えば、date 入力タイプ(カレンダーから日付をピックアップする UI)や number 入力タイプ(数値を入力するスピンボックス型 UI)をまだサポートしていない場合があり、その場合はカレンダーやスピンボックスの UI の代替として一般的なテキスト入力フィールドを提供します。これらはユーザーにとっては混乱の元となります。

そもそもHTML5の入力タイプを使わないという選択肢もあります。下記コードをテーマ(子テーマ)の functions.php に追加することで無効化できます。

<?php
add_filter( 'wpcf7_support_html5', '__return_false' ); //Contact Form 7 でHTML5の入力タイプを使用しない
?>

ただ、せっかくの素晴らしい UI を使わないのは勿体ないです。
そこで、「Contact Form 7」には、date , number 両入力フィールドのために「jQuery UI ベースのフォールバック機能」が用意されています。この機能はデフォルトでは無効化されていますが、有効化することで、Firefox でも Internet Explorer でもブラウザを問わず、HTML5がサポートされていない場合でも、date フィールドにはカレンダーの UI を、number フィールドにはスピンボックスの UI を提供することができるようになります。
ただし、この機能は追加の JavaScript と CSS をロードするので、パフォーマンス低下要因にもなります。date や number 入力フィールドを使わないWebサイトでは必要のない機能です。
もし date や number の入力フィールドを使っている場合は、この「jQuery UI ベースのフォールバック機能」は大変便利な機能だと思います。

このフォールバック機能の有効化は、下記コードをテーマ(子テーマ)の functions.php 追加するだけです。

<?php
add_filter( 'wpcf7_support_html5_fallback', '__return_true' ); //Contact Form 7 jQuery UI ベースのフォールバック機能
?>
Contact Form 7 は HTML5 の入力タイプをサポートしますか?
はい。Contact Form 7 3.4 以上からこれらの HTML5 入力タイプに対応したフォームタグをサ…

以上、ご参考になれば幸いです。

コメント

タイトルとURLをコピーしました