WordPressの定番お問合せプラグイン「ContactForm7」で、選択可能な日付、期間を制限した予約フォームが作成できることをご存じでしょうか

今回はすごく久しぶりに。WordPress関連の記事です。

かねてより、WordPressを使用した案件では、デファクトスタンダードのように
よく使われている、お問合せプラグイン「ContactForm7」がありますよね。

今回は、その「ContactForm7」に
「選択できる日付、期間を制限したDatePicker(日付選択)を表示する」方法について、書いていきたいと思います。

まずは結論から。次のコードで実現できます

<!-- (...中略...実際は他のお問合せ項目等が入ります) -->
<label class="form-label myLabel">ご希望の予約日：
[date date-*** class:myPicker min:next_Monday max:next_Monday+2days]
</label>
<!-- (...中略...実際は他のお問合せ項目等が入ります) -->

上記の、3行目に注目してください。
[date date-***]
というショートコードが、ContactForm7におけるDatePicker(日付選択)を表示する基本の記述です。
date-*** となっている部分は、
管理画面で「日付」パーツを選択した際に自動生成されるID番号が入ります。適宜置き換えて読んでください。

[date date-***]
↑この基本の記述に、いくつかのオプションを加えることによって、
「選択できる期間を指定したDatePicker(日付選択)を表示」することができる、というわけです。

具体的にどんなオプションが追加できるのか、次のセクションで書いていきたいと思います。

min:, max: オプションを加えることで、期間指定を加えたDatePickerが作成できます

上のセクションで書いたサンプルコードの指定、
[date date-*** class:myPicker min:next_Monday max:next_Monday+2days]
↑こちらの記述だと、「現時点から次の月曜日始まりで、そこから2日後まで」を選択できる記述になります。
つまり、翌週の月〜水曜日までを選択できるDatePickerが作成できます。

たとえば、開店日が週に数日などに限られているビジネスや店舗を運営されている
(本業の休みの日だけやってる飲食店とか、ネイルサロン、整体など)方がいたとして、
その曜日だけを予約日にしたい、月〜水曜日だけを営業日として予約を受け付けたい。
そんな場合に使える記述かと思います。

記述のフォーマットは、上記のほか、
min:YYYY-MM-DD
max:YYYY-MM-DD
の形で日付を直接指定する形でも可能です。

ただし、上で書いた例のように、
[date date-*** class:myPicker min:next_Monday max:next_Monday+2days]
↑このように相対的な日付を表すキーワードで指定しておいた方が、
アクセスしたその時点から見た「次の月曜日」「そこから+2日後まで」
といった指定ができるので(つまり、動的な日付指定ができるので)、
こちらの相対的なキーワードによる日付指定を使う方が、柔軟にいろいろなケースに対応できるかと思われます。

指定できる相対的なキーワードは、どんなフォーマットであれば良いのか

上のセクションでご紹介した、ContactForm7で作成したお問合せフォームで使用できる、
「選択できる日付、期間を指定したDatePicker(日付選択)」。
そこに指定する事が可能な日付、期間を表す事ができる
相対的なキーワードは、どんなフォーマットであれば良いのでしょうか。

ContactForm7の公式サイトの説明(こちらのページ)によると、
「ContactForm7 5.3 以降では DateTimeImmutable クラスでサポートされるすべての日付フォーマットが利用可能」
とのことです。

つまり、日付を表す相対的なキーワード(日付フォーマット)は、
「PHPがサポートしている、このページに記載のある記述であればだいたい対応している」ということです。
※ただし、
next Monday → next_Monday
next Monday+2days → next_Monday+2days
上記のように、半角スペースを _(アンダースコア)に置き換えて記述する事が必要となります。

この記事のまとめ

かねてより、WordPressを使用した案件ではデファクトスタンダードのように
よく使われている、お問合せプラグイン「ContactForm7」がありますよね。
今回は、その「ContactForm7」に、
「選択できる日付、期間を指定したDatePicker(日付選択)を表示する」方法について、記事を書いてみました。

この記事の中ほどにも書いた通り、
「週の決まった曜日だけ予約を受け付けたい」と言う様なニーズに対応する事が可能な、
便利な記述方法かと思います。
※ただし、この記述方法で対応しているのは
・翌週の月〜金( min:next_Monday max:next_Monday+4days )
・翌週の火〜金( min:next_Tuesday max:next_Tuesday+3days )
・翌々週の月〜金( min:1week_Monday max:1week_Monday+4days )
・翌々々週の火〜金( min:2week_Tuesday max:2week_Tuesday+3days )
といったように、「開始と期限が連続した曜日」の指定になります。
そのため、「月・水・金のみ予約を受け付け」のような指定には対応していない(現時点では)ため、
その場合は別途、他の手段を用意した方が良いと思われます。
ちなみに mix,max の他に
「step」というオプションもあるにはあるものの、これだと
「月・水・金」を指定しようとした場合(step=2と指定)、
ついでに日曜も指定されてしまうことになります。

上記の注釈で書いた制約はあるにせよ、
WordPressでContactForm7を使用している場合には、
知っておけば何かと役に立つ内容かと思われます。

この記事が、皆さんのより良いWeb制作体験につながれば嬉しく思います。

※この記事は、内容の品質向上を目的に随時更新を行う場合があります。