Wordpress Contact Form 7を利用して複数店舗の予約フォーム 営業時間、予約可能日の制限

Question

前提・実現したいこと

WordpressでContact Form 7を利用して複数店舗の簡単な予約フォームを作っています。
ただ店舗ごとに営業時間、予約可能日が異なるため
曜日を制限したり、
曜日によって時間を非表示にしたいです。

試したこと

現在は下記のようになっております。

[date* date-887 min:today+1day max:today+4week+1day]

[select* menu-611 "10:00" "11:00" "12:00" "13:00" "14:00" "15:00" "16:00" "17:00" "18:00"]

Form 7 Conditional Fieldsなどで試しましたが上手い方法が見つからず
苦戦しております。

Comments

[CaliforniaOG]

datepickerでは
下記のように選択できる日付を下記で制限しています。

<script>
$(function() {
var holidays = ['20220101', '20220102', '20220103', '20220104'];
$(".datepicker").datepicker( {//#以下はContact Form 7のフォームのIDを指定
minDate: "+1d",
maxDate: "+31d",
beforeShowDay: function (date) {
var ymd = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' + date.getDate()).slice(-2);
if (holidays.indexOf(ymd) != -1) {
// 祝日
return [false, 'ui-state-disabled'];
} else if (date.getDay() == 3) {
// 水曜日
return [false, 'ui-state-disabled'];
} else {
// 平日
return [true, ''];
}
}
});
});
</script>

[CaliforniaOG]

ここで選択された曜日を判別して
月曜日から金曜日は　11:00から20:00
土日は 12:00から19:00
といったものを実装したいです。

Answer 1

Contact Form 7 Conditional Fieldsを使う形で良いのではないでしょうか。
店舗数分[group] [/group]で囲って、ルール設定画面でどれを表示するか指定する感じです。

2店舗分の場合、Contact Form 7の投稿ページの「フォーム」タブに下記を入力し、

[select* shop_select "店1" "店2"]

[group shop1]
[date* date-887 min:today+1day max:today+4week+1day]
[select* menu-661 "10:00" "11:00"]
[/group]

[group shop2]
[date* date-887 min:today+5day max:today+4week+1day]
[select* menu-661 "14:00" "15:00"]
[/group]

[submit "送信"]

「Conditional fields」タブにて下記を設定すれば2店舗での振り分けができると思います。

show [shop1] if [shop_select] [equals] [店1]
show [shop2] if [shop_select] [equals] [店2]

参考「Contact Form 7 Conditional Fields」の基本的な使い方 | ワードプレステーマTCD

Comments

[CaliforniaOG]

回答ありがとうございます。

振り分けに関しては
表示内容も変わってくるので
店舗ごとに別ページになっております。

曜日の制限に関してはdatepickerを使用して実装できましたが

時間選択の前に日付選択があり
そこで選択された曜日によって
選択できる時間が変わるというものを実装したいです。

月曜日から金曜日は　11:00から20:00
土日は 12:00から19:00
などです。