「Contact Form 7で予約フォームを作ったけれど、定休日や土日に予約が入ってしまう…」
CF7の標準機能では、カレンダーの日付を制限できないため、営業日以外にも予約が入り、後から個別に「この日はお休みです」と連絡する手間が発生しがちです。
以前ご紹介した【Flatpickr＋SCFを使った予約カレンダーの制限方法】の記事では、やや設定手順が多く、ある程度WordPressやプラグイン操作に慣れた方向けの内容でした。
今回の記事では、プラグインを使わず、スマホでも簡単に動作するJavaScriptだけでの設定方法を解説します。
初心者でもすぐに実装でき、土日・祝日・特定の定休日も自動で除外できるので、手軽に予約ミスを防ぐことができます。
- 基本フォームの作成方法
- 土日を除外するスクリプトの設定
- 祝日・定休日を個別に追加する方法
Contact Form 7の予約フォームで「日付制限」が必要な理由
予約フォームを設置していると、定休日や休業日にも予約が入ってしまうというトラブルが起こりがちです。
とくにContact Form 7では、標準機能のままだとカレンダーからどの日でも選べてしまうため、手動で「この日は休みです」と返信する手間が発生します。
たとえば次のようなケースです。
- 毎週水曜日が定休日なのに、水曜日に予約が入ってしまう
- 年末年始や祝日など、長期休業期間中に予約が入る
- スタッフ不在日や臨時休業日を都度メールで説明しなければならない
これでは、お客様にもスタッフにもストレスがかかります。
そこで有効なのが、「日付制限」機能を追加することです。
予約フォームのカレンダーから「土日」「定休日」「祝日」などを選べないように設定しておくことで、次のようなメリットがあります。
- 定休日や休業日の予約を自動でブロックできる
→ ヒューマンエラーを防止し、運営がスムーズになります。 - 返信・確認の手間を削減できる
→ 不要なメール対応や「この日は休みです」連絡を省略。 - ユーザーにとってもわかりやすいフォームになる
→ 「どの日が予約可能か」が視覚的に理解できるため、離脱率を減らせます。 - スマホからも直感的に操作できる
→ カレンダーUIでタップできる日が限定されるため、誤選択を防げます。
Contact Form 7自体には日付除外機能が標準搭載されていませんが、JavaScriptを使って簡単にカスタマイズすることが可能です。
まずは基本のCF7フォームを作成しよう
まずは、日付を入力できる基本の予約フォームを作ってみましょう。
Contact Form 7では、dateタイプのフォームタグを使うことで、カレンダーから日付を選択できるようになります。
基本のフォーム構成例
以下のコードを、CF7のフォーム編集画面に貼り付けてください。
<label> お名前（必須）<br>
[text* your-name] </label>
<label> メールアドレス（必須）<br>
[email* your-email] </label>
<label> ご希望日（必須）<br>
[date* your-date] </label>
<label> ご希望時間<br>
[select your-time "10:00" "11:00" "13:00" "14:00" "15:00"] </label>
<label> ご要望など<br>
[textarea your-message] </label>
[submit "送信する"]この状態でフォームを設置すると、日付入力欄にカレンダーアイコンが表示され、クリック（またはタップ）で日付を選べるようになります。
スマートフォンの場合、ブラウザによってカレンダーの表示方法が異なります。
- iPhone（Safari）：ネイティブの日付選択UIが自動で表示されます
- Android（Chrome）：カレンダー形式で表示されます
- PCブラウザ：クリックでカレンダーが開きます
もしカレンダーが表示されない場合は、次の2つを確認しましょう。
- 入力タイプが正しく
dateになっているか - 古いブラウザ（例：Internet Explorerなど）で開いていないか
必要に応じて、jQuery UIのDatepickerなどのライブラリを使うことで、どの環境でもカレンダー入力を統一できます。
土日を自動で除外する設定方法
次に、予約フォームのカレンダーから土日を選べないようにする設定を追加します。
Contact Form 7自体には日付制限の機能がないため、ここではJavaScriptを使ってカレンダーの日付を制御します。
dateフィールドにIDをつける- JavaScriptでカレンダーを制御するスクリプトを読み込む
1.フォームタグにIDを追加
先ほど作成したフォームの「日付」部分を、次のように編集します。
<label> ご希望日（必須）<br>
[date* your-date id:reserve-date] </label>これで、JavaScriptから特定の日付フィールド（reserve-date）を指定できるようになります。
2.JavaScriptで土日を除外する
次に、WordPress管理画面
→「外観」→「テーマファイルエディター」
→ footer.php を開いて、</body> タグの直前に以下を追加します。
「Insert Headers and Footers」や「Code Snippets」などのプラグインを使って、テーマを編集せずに <head> や <footer> にスクリプトを追加してもOKです。
<script>
document.addEventListener('DOMContentLoaded', function() {
const dateInput = document.getElementById('reserve-date');
if (!dateInput) return;
// 今日以降しか選べないように設定
const today = new Date().toISOString().split('T')[0];
dateInput.setAttribute('min', today);
// 日付選択時に土日をチェック
dateInput.addEventListener('change', function() {
const selected = new Date(this.value);
const day = selected.getDay(); // 0:日曜, 6:土曜
if (day === 0 || day === 6) {
alert('土日・祝日はご予約いただけません。別の日をお選びください。');
this.value = ''; // 日付をリセット
}
});
});
</script>
このスクリプトでは、
- 今日より前の日付を選べない
- 選択した日が土曜(6)または日曜(0)ならアラートを表示してリセット
という2つの制限を行っています。
はい、このスクリプトはスマホ対応です。
iPhone・Androidどちらでも動作しますが、一部ブラウザではアラート表示が簡略化される場合があります。
テストの際は、実際にスマホ実機で確認するのがおすすめです。
もし「最初から土日を押せないようにしたい」場合は、jQuery UIのDatepickerなどを使う方法もあります。
ただし、スマホ標準のカレンダーUIが使えなくなるため、この記事ではスマホ対応を重視したアラート方式を採用しています。
特定の定休日や祝日を除外する方法
土日以外にも、「毎週火曜日は定休日」や「年末年始など特定の日付は休み」といったケースもあります。
そんなときは、特定の日付を手動で除外する設定を追加することで柔軟に対応できます。
以下のように、jQuery UIの beforeShowDay 関数で指定の日付を除外します。
1.カレンダーを読み込むスクリプトに定休日リストを追加
<script>
document.addEventListener('DOMContentLoaded', function() {
const holidays = [
'2025-01-01', // 元日
'2025-05-03', // 憲法記念日
'2025-08-15', // お盆休み
'2025-12-31' // 年末
];
const closedDays = [2]; // 火曜定休（0:日〜6:土）
flatpickr('.wpcf7-date', {
dateFormat: 'Y-m-d',
minDate: 'today',
disable: [
function(date) {
// 土日または定休日を除外
return (date.getDay() === 0 || date.getDay() === 6 || closedDays.includes(date.getDay()));
},
// 特定日（祝日など）を除外
...holidays
]
});
});
</script>2.holidays 配列に休みたい日を追加
YYYY-MM-DD の形式で日付を追加すると、その日は選択できなくなります。
たとえば「2025年4月29日」を休みにしたい場合は、
'2025-04-29'を追加すればOKです。
3.flatpickrが動かない場合は？
テーマやプラグインによってはjQuery UI Datepickerを使っているケースもあります。
その場合は、同様に beforeShowDay を使って除外できます👇
jQuery(function($){
const holidays = ['2025-01-01', '2025-05-03', '2025-12-31'];
const closedDays = [2]; // 火曜定休
$('.wpcf7-date').datepicker({
beforeShowDay: function(date) {
const day = date.getDay();
const ymd = $.datepicker.formatDate('yy-mm-dd', date);
// 土日・定休日・祝日を除外
if (day === 0 || day === 6 || closedDays.includes(day) || holidays.includes(ymd)) {
return [false];
}
return [true];
}
});
});これで「毎週火曜＋祝日＋土日」を自動で除外した予約フォームが完成します✨
更新時期ごとに holidays 配列を更新すれば、季節休業にも対応できます。
フォームが正しく動作するか確認しよう
設定を保存したら、実際にフォームを開いてカレンダーをクリックし、土日や定休日が選択できないことを確認しましょう。
もし日付制限が反映されない場合は、次のポイントをチェックします。
JavaScriptが読み込まれているか
functions.phpやCF7スクリプトが正しく呼び出されていないと、日付制限が反映されません。
ブラウザの開発者ツール（F12キー）で「Console」タブを開き、エラーが出ていないか確認しましょう。
jQueryの日付フォーマット指定
yy-mm-dd などのフォーマット指定がフォームの日付入力形式と合っていないと、制限が効かない場合があります。
日本語設定では yy-mm-dd より yy/mm/dd のほうが安定するケースもあります。
キャッシュプラグインの影響
WP Fastest Cache などのキャッシュ系プラグインが、古いスクリプトを読み込んでいることがあります。
キャッシュを削除して再読み込みしてみてください。
まとめ｜土日・定休日を除外して予約ミスを防ごう
本記事では、Contact Form 7（CF7）の予約フォームで、土日や定休日、祝日を簡単に除外する方法を解説しました。
ポイントを整理すると以下の通りです。
- 日付制限の重要性
- 土日や定休日に予約が入るトラブルを防ぎ、管理者・ユーザー双方の手間を減らせます。
- 基本フォームの作成
dateタイプの入力欄を作り、IDを設定することでスクリプトから制御可能にしました。- スマホ対応のカレンダーUIでも正しく選択できることを確認しました。
- 土日を自動で除外
- JavaScriptで、土曜・日曜を選択した場合はアラート表示＋リセットする仕組みを追加しました。
- 特定の定休日や祝日も除外
holidays配列やclosedDays配列で、祝日や毎週定休日を簡単に追加できるようにしました。
- 動作確認とトラブル対処
- スクリプトの読み込み状況、日付フォーマット、キャッシュの影響を確認することで確実に動作させられます。
コメント