如何輕鬆在WordPress中建立帶日期選擇器的表單
更新日期：2024年6月24日 | 編輯部撰稿 | 評論者：Syed Balkhi
你是否想要在WordPress中建立一個帶日期選擇器的表單？
日期選擇器欄位是一種方便的方法來捕獲與日期相關的信息。舉例來說，你可能需要知道用戶的出生日期，或者希望他們能夠通過表單輕鬆安排服務的預約。
在本文中，我們將向你展示如何輕鬆地在WordPress中建立一個帶日期選擇器的表單。
為什麼要建立帶日期選擇器的WordPress表單？
當你希望用戶輸入日期時，帶日期選擇器的欄位非常有用。
常見的例子包括：注冊表單要求用戶輸入出生日期；訂單表單讓用戶選擇送貨日期和時間；租賃物品表單選擇取件或返件日期；回電請求表單以便用戶告訴你何時他們希望被聯繫；請假申請表單讓員工輸入休假開始和結束日期；住宿或服務網站的預約表單。
相比手動輸入來說，日期選擇器讓用戶更能輕鬆插入日期，並確保日期格式在所有表單提交中保持一致，從而減少錯誤並改善用戶體驗。
步驟1：安裝WPForms插件並選擇模板
第一步是安裝WPForms。這是市場上最佳的WordPress聯絡表單插件，它可以讓你輕鬆地在WordPress網站上建立各種表單，包括帶日期選擇器的表單。
詳細的指導，你可以參考我們的分步教學指南「如何安裝WordPress插件」。
注意：這個指南需要使用WPForms的高級版本，因為日期選擇器字段屬於該版本。但如果你使用我們的WPForms折扣碼，可以節省50%的常規價格。
激活後，從WordPress儀表板進入WPForms » 新增頁面。
這將引導你到「選擇模板」頁面。在選擇模板之前，最好先命名你的WordPress表單，以便之後能夠輕鬆識別。
向下滾動，你會看到這裡有許多預先製作好的表單模板，其中許多已包含日期範圍字段。
本例中，我們將使用「簡單聯絡表單」模板，並向其中添加日期選擇器字段。但你可以隨意選擇適合你的模板。選好後，點擊「使用模板」按鈕。
步驟2：向WordPress表單添加日期選擇器字段
現在，你將進入WPForms表單構建器。你會注意到屏幕左側的字段選項和右側的表單預覽。
默認情況下，「簡單聯絡表單」模板僅包含姓名、電子郵件地址和評論欄位。為演示用途，我們將向表單中添加一個日期字段。如果你的模板已有此字段，可以跳過此步驟的編輯部分。
你需要做的是向下滾動到左列中的「高級字段」部分，在那裡你會看到「日期/時間」字段。只需將該字段拖放到你想要的位置。在本例中，我們將其放置在電子郵件字段下方。
完成後，點擊「日期/時間」字段進行編輯。這將在屏幕左側打開「字段選項」標籤。
在這裡，你可以更改該字段的標籤，默認標籤是「日期/時間」，我們將其更改為「電話聯絡的優先時間」。
你也可以使用「格式」下拉菜單更改字段日期格式。選項包括日期和時間、日期或僅時間。如果你希望僅使用日期而不需要時間字段來收集用戶的出生日期，這將非常有用。
除此之外，你可以填寫描述文本，為用戶提供更多的入欄提示。
最後，如果你希望此字段為必填項，可以選中「必填」框。這意味著用戶必須選擇日期和時間才能提交表單。
完成後，點擊頂部的「保存」按鈕以保存表單設置。
步驟3：配置日期時間選擇器的高級選項
默認情況下，日期範圍選擇器字段將是帶有時間下拉選單的日曆。
當前日期將被選中，但用戶可以更改以選擇不同的日期。日期格式為月/日/年。
時間下拉菜單預設為12小時制，間隔為30分鐘。用戶可以選擇最適合他們的時間段。
在某些情況下，你可能需要更改日期選擇器設置。例如，你的國家使用日/月/年或24小時制格式而不是默認的格式。
要這麼做，需要切換到左側面板頂部的「高級」標籤。在這裡，你可以調整日期選擇器字段的大小。然後，在「日期」部分，將日曆選擇器更改為日期下拉選單。
若該表單欄位有空間限制，將日曆選擇器更改為日期下拉選單是一個好主意。以下是日期下拉選單的外觀：
在此之下，你可以將日期格式從月/日/年（1/31/2024）更改為日/月/年（31/1/2024）或月 日，年（2024年1月31日）。
如果你選擇日曆日期選擇器，也可以在「日期」字段中插入佔位符文本。你可以填寫你的日期格式，以讓用戶知道你所使用的格式，這樣他們不會感到困惑。
此外，可以啟用「限制天數」開關來調整可以選擇的日期範圍。如果你僅在平日提供服務，這將非常有用。
也可以禁用過去日期來防止選擇之前的日期。
接下來，讓我們移動到「時間」部分以更改時間選擇器。這裡你可以將間隔更改為15分鐘或1小時而不是默認的30分鐘。最好在這裡輸入佔位符文本以顯示你使用的時間格式。
時間選擇器預設為12小時制，但你可以切換為24小時制。
也可以啟動「限制時間」設置來指定服務的開始和結束時間。這樣用戶就不能在營業時間外預約。
另外，你可以為日期範圍字段輸入CSS類名。這是一個高級且可選的功能，稍後你可以使用代碼覆蓋表單樣式。
最後，你可以在必要時隱藏表單字段標籤和/或副標籤。
當你對新表單感到滿意時，可以點擊屏幕右上角的「保存」按鈕保存表單。
步驟4：將表單嵌入到你的網站
現在，你可以將新建立的帶日期選擇器的表單嵌入到WordPress網站。為此，只需點擊表單構建器頂部的「嵌入」按鈕。
彈出窗口將要求你選擇一個現有頁面來添加表單，或者從頭開始創建一個新頁面。這兩個選項都使用區塊編輯器，因此步驟相似。
在現有頁面或新頁面中添加WPForms區塊
要在現有頁面中插入表單，點擊「選擇現有頁面」按鈕。然後選擇你在WordPress博客或網站上已有的頁面之一，並點擊「開始」。
如果要將表單添加到新頁面，只需點擊「創建新頁面」按鈕。然後，為新頁面命名，點擊「開始」。
這兩種方法都將帶你進入區塊編輯器，在這裡你會看到一些關於如何添加WPForms區塊的說明。首先，點擊「+」添加區塊按鈕。然後，在區塊搜索欄中輸入「WPForms」。只需將區塊拖放到頁面上合適的位置。
現在只需點擊下拉菜單。然後，選擇你剛才建立的表單。在區塊設置側邊欄中可以自定義表單欄位、標籤和按鈕樣式，使它們與你的WordPress主題更好匹配。你可以更改每個元素的大小、邊框半徑和顏色。
現在，可以點擊「更新」或「發布」按鈕使表單在網站上生效。它應該看起來像這樣：
如果你希望在帖子中插入表單而不是頁面，則可以在區塊編輯器中創建新帖子或打開現有帖子。然後，按照同樣的步驟將WPForms區塊添加到頁面中。
將WPForms區塊添加到小工具區域
如果你使用的是傳統的WordPress佈景主題，則可能希望在小工具準備區域（如標頭、頁尾或側邊欄）顯示你的表單。如果你的表單相對較短且不佔用過多空間，這會是一個好主意。
注意：如果你使用的是區塊主題，則此方法將不適用於你的网站。
為此，只需進入WordPress管理界面的「外觀」 » 「小工具」。然後，導航到你願意添加區塊的小工具區域並點擊裡面的白色「+」添加區塊按鈕。之後，你可以搜索WPForms區塊。
如果你看到兩個選項，可以選擇任意一個，因為它們的功能相同。同樣，選擇你剛才建立的表單。在區塊設置側邊欄中可以配置樣式，使其更符合你的WordPress主題。
滿意編輯後，只需點擊「更新」按鈕。
到此為止！以下是我們的表單在WordPress博客帖子底部的外觀：
使用短碼嵌入WordPress表單
如果WPForms區塊或小工具無法工作，你也可以使用短碼添加WordPress表單。在「嵌入到頁面」彈出窗口中，點擊「使用短碼」鏈接。之後，你會看到一個短碼，你可以將其複製並粘貼到頁面、帖子或小工具區域中。
有關如何使用短碼的更多信息，請閱讀我們的文章《如何在WordPress中添加短碼》。
優化WordPress表單的最佳提示
現在你已經知道如何向表單中添加日期選擇器字段，讓我們來介紹一些最佳提示，以將你的表單提升到新的層次：
– 向表單提交者發送確認郵件：這樣用戶會收到通知，確認你的收到，並且不會忘記他們選擇的日期或時間。
– 在表單中接受在線付款：WPForms支持流行的支付網關，如Stripe、PayPal、Square和Authorize.net。你可以收集一次性或定期付款，且無需支付額外的交易費用。
– 使長表單更具互動性：如果你有需要捕捉大量信息的活動或用戶註冊表單，使其更具互動性可以提高表單完成率。
– 防止聯絡表單垃圾信息：你可以啟用WPForms的內置防垃圾保護和reCAPTCHA驗證框來過濾垃圾信息。
– 遵循我們的聯絡表單設計最佳實踐：這個指南可以引導你設計最佳的WordPress表單，以轉化普通訪問者為潛在客戶或消費者。
– 閱讀我們的專家指南《如何創建互動表單》：WPForms的聯合創始人Jared Atchison向你提供了如何使表單更具吸引力的建議，從使用條件邏輯到加入豐富媒體內容。
我們希望本文幫助你學會如何在WordPress中建立帶日期選擇器的表單。你可能還會想要查看我們的文章《如何在WordPress中建立多頁表單》和《最佳WordPress調查插件推薦列表》。如果你喜歡這篇文章，請訂閱我們的YouTube頻道以獲取更多WordPress視頻教程。你也可以在Twitter和Facebook上找到我們。