WordPress, 實用技巧

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

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

常見的民間店面預約功能

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

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

實作步驟

準備階段: 確保您的 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)。
  • 禁止選擇週日: 如果選擇的是星期日,則彈出警告並清空選擇。
  • 測試與調整: 在網站上測試功能是否正常運作,並根據需要進行調整。

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

相關文章