ぶろくまん3

タメグチは世界を救う! プログレハードポップ系ソロアーティスト、みろく卍游楼 me-rockman-Jeuro によるタメ口ブログ

Contact Form 7 の日付項目が動かない?

f:id:rockmanalive:20210407205220j:plain

 

最近WordPressにハマっている(ダブルミーニング^^;)ろくまんだ。

 

WordPressでお問い合わせフォームと言えばContact Form 7が業界標準?となって久しいが他にもフォーム系プラグインはいっぱいあるのになんでかね。かく言う俺もContact Form 7以外試したことはない。。。

 

それにしてもこの Contact Form 7の奥が深いことと言ったら。。

 

Contact Form 7の今日ハマったこと。それが表題だ。

Contact Form 7 の日付項目が動かない

そんな基本的なことなぜ今まで気づかなかったかというと、、、

 

たいてい動くから(笑)*1

 

ブラウザ対応状況 

動かないのは一部の環境だけのようで、俺の環境では、なんとsafariが該当する。試してるのはmacOS Mojaveのsafari 14.0.3。そんなに古い環境ではない。他にはfirefoxも、とか書かれているが俺はインストールしてないので知らない。

 

Google Chrome 

日付項目、Chromeではこのようにパッと見てどう入力すべきか判断できる状態だ。

f:id:rockmanalive:20210407200254p:plain 

 

西暦年月日を8桁で区切り無しで連続入力すればうまい具合に勝手に区切ってくれる。

f:id:rockmanalive:20210407200350p:plain 

 

右側のアイコンクリックすればカレンダーからの選択も可能だ。

 f:id:rockmanalive:20210407200415p:plain

 

まあ今どきはこうでなくっちゃあな。

 

Microsoft Edge, iOS safari

ちなみにEdgeも同じだった。画像は省くが(笑)

実はiOSsafariもこんな感じでカレンダーが出てきて問題なく動く(数値入力は不可ぽいけど)

 f:id:rockmanalive:20210407200843p:plain

f:id:rockmanalive:20210407200859p:plain

 

macOS safari

ところがsafari

f:id:rockmanalive:20210407201215p:plain

 

あっさりしたインターフェースだ(笑)

まあこれでも、手入力すれば問題ないと思うのでやってみる。

f:id:rockmanalive:20210407201328p:plain

f:id:rockmanalive:20210407201404p:plain

f:id:rockmanalive:20210407201429p:plain

f:id:rockmanalive:20210407201447p:plain

 

全部エラー。。

 

Contact Form 7のdateフォーマット 

実は、Contact Form 7の日付項目が唯一受け付けてくれるフォーマットは、

f:id:rockmanalive:20210407201510p:plain

 

これ一択だった。

日付の区切り文字、「-」を使う習慣って日本人にあんまり無くね?

 

対処方法

function.phpにて 

もちろんググると諸先輩方が対策を教えてくださる。ただそれらはすべて「function.phpを汚せ」というもの。具体的には、

add_filter( 'wpcf7_support_html5_fallback', '__return_true' );

これを追記なのだが。。正直PHPはできるだけ汚したくない。CSSだけで済ませたい。3歩歩けば忘れる俺にとってあちこちイジると将来絶対ハマる原因になるのでな。

 

簡単で単純な対処 

という訳で、俺はこういう解決法にした。

f:id:rockmanalive:20210407201607p:plain

 

これはコンタクトフォームの編集画面で、

[date birthday placeholder "例2010-06-24"] 

としただけだ。これでわかるじゃん。 

 

公式サイトの見解

ちなみにContact Form 7ご本家のFAQにもこの件に絡んで説明がなされている。

 

要するに日付項目で勝手にカレンダー使えたりするのはHTML5の機能なわけで、safariはもちろんHTML5対応なのだが網羅してるわけではなくinput type=dateに関してはサポートされてないということらしい。多分な。

で、上のadd filterはContact Form 7が独自で用意してるHTML5対応機能をロードしてる。なぜデフォルトでロードしておかないかと言うと、当然その分パフォーマンスが落ちるからだな。

 

なら俺は1ミリ秒でもページスピードを稼ぎたい派なので使わない事にした。

 

さてキミはどうする?

 

 

*1:「動く」というのはこの場合、日付項目にて入力支援機能が正常に働くという意味な。