如何讓表單 Contact Form 7 中禁止選擇週日

常見的民間店面預約功能

在 WordPress 網站中，Contact Form 7 (CF7) 是一個非常受歡迎的聯絡表單外掛。在某一次客戶的需求，店面保養維修週日公休，預約表單又有日期選擇器時，我們需要限制表單中日期欄位的選擇，例如禁止選擇週日。本文將透過簡單的 JavaScript 程式碼來實現這一功能。

實作步驟

準備階段： 確保您的 WordPress 網站已安裝並啟用 Contact Form 7 外掛。
程式碼編輯： 首先，您需要在網站的主題資料夾中找到 functions.php 檔案，或者使用 Code Snippet 外掛來新增以下 JavaScript 程式碼。

document.addEventListener('DOMContentLoaded', function() {
    var dateField = document.querySelector('input[name="your-service-date"]');
    if (dateField) {
        dateField.addEventListener('change', function() {
            var selectedDate = new Date(this.value);
            var day = selectedDate.getDay();
            if (day === 0) {
                alert('星期日不可選擇，請選擇其他日期。');
                this.value = ''; // 清空選擇
            }
        });
    }
});

運作原理

• 偵聽 DOMContentLoaded 事件： 確保整個文件加載完畢後才執行程式碼。
• 選擇日期欄位： 透過 querySelector 選擇特定的日期輸入欄位。
• 監聽日期變更事件： 當使用者改變日期時，觸發一個函數。
• 判斷選擇的日期： 利用 getDay() 方法獲取星期幾（星期日返回 0）。
• 禁止選擇週日： 如果選擇的是星期日，則彈出警告並清空選擇。
• 測試與調整： 在網站上測試功能是否正常運作，並根據需要進行調整。

如需要變更限制請修改返回日期數值即可，是否很簡單呢?