木代成達也
Posted,  By 木代成達也
WEBの階

Contact Form 7で日付選択を実装する

フォームを作成するときに、日付を選択してもらう必要がある場合。
たとえば予約フォームなんかがそうだと思います。

ただ、日付を選択を自分で実装するのは少し大変だと思います。
普段使い慣れたCGIなどを使えれば実装も簡単にできると思いますが、環境に条件がある場合には制限があって普段の方法で実装することができない時があります。

今回はワードプレスで日付選択を実装するときに便利なものを見つけたので、記録しておくことにしました。

■ Contact Form 7 を使う

ワードプレスを使ったことのある人には有名だと思いますが Contact Form 7 を使用します。
プラグインをインストールして使いますが、「日付」のタグを挿入するのですが、そのまま使用するとHTML5のdate属性を持ったフォームが挿入されます。

こちらは端末によってUIは違いますが日付を選択できるフォームです。
これで良いように思えますが、こちらはパソコンのFirefoxやIEブラウザでは普通のtext属性で吐き出されてしまい、ただのテキストボックスになってしまいます。

手入力で日付を入力させるのはユーザーにとっては面倒だと思います。

そこで便利なのが

add_filter( 'wpcf7_support_html5''__return_false');

このタグを function.phpファイルに記述するだけでHTML5に対応していないブラウザでも日付を手入力せずに選択することができます。

本家サイトはこちらです

https://contactform7.com/ja/faq/does-contact-form-7-support-html5-input-types/

これでワードプレスのフォーム作成時にもブラウザを気にすることなく日付選択を実装することができます。
ありがたい

この記事はいかがでしたか?
  • 超いいね! (2)
  • いいね! (0)
  • そだねー (0)
このブログを書いたヒト
木代成達也
Webソリューション部 係長
Webソリューション部でコーディングを中心に担当しています。
HTML、CSS、PHP、Javascriptなどを日々勉強しています。
背中で語る男になりたいです。
WEBの階