ContactForm7×Safariで日付が入力できなくなってめっちゃ困った話

こんにちは！株式会社まちいろのフロントエンドエンジニア（仮）の日高です。
今回は、最新技術ではなくWordpressで困ったこととその解決法についてまとめてみました。

Wordpressまだまだ人気なの？

HTMLとCSSもほぼ知らない状態の新人日高が一番最初に担当したのがWordpress案件です。5年前？
今思えば、ライオンが子供崖から落とすより鬼畜ってる。
ほぼ独学でHTMLとCSSとWordpressとPHPとJavascriptを同時に学びつつ開発しました。

その頃からお世話になっているContact Form 7 プラグイン。
お問い合わせフォームを作る時は必ずと言ってもお世話になっています。
ありがとうContact Form 7。

Safariで日付型のフィールドが動かない件

Contact Form 7でお問い合わせを作る時に、日付フィールドを作ると、Chromeの場合フィールドをクリックすることでカレンダーが出てきてくれます。ありがたい！

ただ…Safariで使ってみるとクリックしても無反応で入力することができませんでした。

めっちゃ困った！！

Contact Form 7 のバグっぽい

さらに困ったことに、調べても調べても英語のページしか出てこない！
英語読めよって話ですが、できれば日本語でお願いしたい。
一生懸命英語を読んでみたところ、バグっぽい。困る。

どうやらFirefoxでも発生するパターンがあるらしい。

とりあえずプラグイン最新にしたり、本体最新にしたり手を尽くしてみましたが解決しませんでした。

add_filterで解決

色々読み進めたところ、function.phpでフックをかけて解決できるようです。

add_filter( 'wpcf7_support_html5_fallback', '__return_true' );

実際にやってみると確かに解決できました！
HTML5タグはContact Form 7のデフォルトではサポートされておらず、使用する場合は__return_trueを設定すると良いようです。

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

悩んだこと・ハマったことは共有しよう

Wordpressで構築したサイトの場合、悩んだ時・困った時の文献の多さは本当に助かります。
私も誰かのお役に立てればなぁと思うので、Noteにかいてみました。