如何使用日期/時間選擇器創建 WordPress 表單

已發表: 2021-02-26

您想在 WordPress 表單中添加日期/時間選擇器字段嗎?

讓您的用戶直接在您的表單上選擇日期和時間非常簡單。

因此,在本文中,我們將向您展示如何在 WordPress 中輕鬆添加日期/時間選擇器表單字段,如果您想自定義它,還會提供一些提示。

如何使用日期/時間選擇器創建 WordPress 表單

使用 WPForms,添加一個允許人們選擇特定日期、時間或兩者的字段非常簡單。

這是使用日期/時間選擇器製作 WordPress 表單的分步教程:

WPForms 是最好的 WordPress Form Builder 插件。 免費獲取!

如果您更喜歡書面說明,請參見下文。

第 1 步:創建一個 WordPress 表單

您需要做的第一件事是安裝並激活 WPForms 插件。 您需要付費版本的插件,因為日期/時間選擇器字段在免費版本中不可用。 有關更多詳細信息,請參閱有關如何在 WordPress 中安裝插件的分步指南。

購買並安裝 WPForms 插件後,請轉到WPForms » 添加新表單以創建新表單。

在設置屏幕上,為表單命名並選擇要使用的表單模板。 最棒的是,WPForms 附帶了 100 多個預先設計的模板。

在我們的示例中,我們將使用Simple Contact Form模板。

簡單的聯繫表單模板

單擊模板後,WPForms 將為您生成一個簡單的聯繫表格。 它將加載以下字段:

  • 名字和姓氏
  • 電子郵件
  • 評論

現在讓我們使用表單構建器向表單添加字段。

第 2 步:自定義表單

您可以通過將其他字段從左側面板拖動到右側面板來添加它們。 然後,單擊該字段以進行任何更改。

您還可以單擊表單域並拖動它以重新排列表單上的順序。

因此,讓我們繼續轉到Fancy Fields並將日期/時間字段拖到您的表單上,無論您喜歡它的任何位置。

將日期時間選擇器字段添加到 wpforms

一旦它出現在您的表單上,您就可以將其上下拖動以將其放置在其他位置,然後再次單擊該字段以打開其設置並對其進行自定義。

單擊以編輯字段

當您單擊“日期/時間”表單字段時,您將看到以下選項:

  • 標籤:這是站點訪問者將在您的表單上看到的字段的標題。
  • 格式:您可以在此處調整日期格式,並要求您的客戶僅選擇日期、時間或兩者。
  • 描述:為字段添加描述。 這是為用戶添加說明或詳細信息的好地方。
  • 必填:選中此框後,用戶除非填寫此字段,否則無法提交表單。

如果您向下滾動並單擊Advanced Options ,您可以進一步自定義日期/時間選擇器字段,如果您願意,您可以在此處將日期/時間選擇器從日曆格式調整為下拉列表。

wordpress datetimepicker 在行動 wpforms

日期/時間選擇器是一個功能強大的字段,有很多很棒的設置和選項,讓我們仔細看看你可以用它做什麼。

場地大小

在這裡您可以選擇您想要的字段有多大。

日期類型

默認情況下,日期/時間選擇器字段將顯示日期和時間選項的字段。 您可以在此處選擇您希望該字段是顯示日曆的日期/時間選擇器還是具有月、日和年的下拉字段。

日期格式

在此字段中從月/日/年格式切換到日/月/年。

時間間隔

您可以在此處選擇 15 分鐘、30 分鐘或 1 小時(非常適合預訂表格)來增加或減少時間間隔。

時間佔位符

調整時間框內部的內容。

時間格式

在標準 12 小時製或“軍用”24 小時制之間進行選擇。

限制小時數(使用日期下拉格式)

調整某人可以輸入特定時間的範圍,例如您只在上午 9 點至下午 5 點開放。 在第 3 步中查看有關此設置的更多詳細信息。

限制天數(使用日期選擇器格式)

調整可用天數,例如,如果您只在工作日工作。 在第 3 步中查看有關此設置的更多詳細信息。

隱藏標籤和隱藏子標籤

此選項顯示或隱藏字段的標籤和子標籤。

CSS 類

此字段允許您在不影響其他字段的情況下設置特定字段的樣式。 您可以使用 CSS 更改顏色、間距等。

如果您想知道不同的日期/時間選擇器格式是什麼樣的,這裡是日期選擇器格式:

聯繫表格中的日期選擇器格式示例

日期下拉格式如下所示:

日期下拉字段 wpforms

無論您選擇哪種格式,都知道日期/時間選擇器字段是在表單上獲取準確數據的好方法。 日期將始終在日期/時間選擇器字段中以正確的格式進行驗證。

想要進一步定制嗎? 接下來,我們為您提供了一些更高級的選項。

第 3 步:高級日期/時間選擇器自定義

還有一些其他有趣的技巧,您可能想嘗試使用日期/時間選擇器字段:

  • 如果您想設置表單的外觀和佈局以匹配您的主題,請查看如何將自定義 CSS 添加到您的 WPForms。
  • 只希望有人填寫您的日期/時間選擇器表單一次? 如果您想了解如何限制用戶的條目,請查看有關如何限制 WordPress 表單條目數量的教程。
  • 需要有人為您提供精確到分鐘的超級特定時間嗎? 使用一段自定義代碼自定義日期/時間選擇器上的時間間隔。
  • 想要不同的日期/時間格式? 您可以使用任何可用的 PHP 變量來更改日期和時間格式。
  • 儘管日期/時間選擇器字段上還沒有條件邏輯,但您可以使用插件驗證年齡或使用日期/時間選擇器字段附近的“是/否”下拉字段來詢問用戶是否超過特定年齡。

完成自定義設置後,請繼續並點擊保存

第 4 步:限制日期 + 時間(可選)

如果您想限制可以在日期/時間選擇器字段中選擇哪些日期和時間選項,這很容易做到。

您可以對日期/時間選擇器字段進行大量控制。 你可以:

  • 限制可供用戶選擇的日期
  • 禁用過去的日期,這樣就沒有人可以選擇過去的一天
  • 限制人們可以選擇的次數

無論您需要在表單上使用哪一種,我們都會在有關如何限制“日期/時間選擇器”字段的選項的說明中為您提供幫助。

第 5 步:配置表單的設置

表單確認是在人們完成您的表單後顯示給他們的消息。 確認讓他們知道他們的表格已被處理,並讓您有機會告訴他們接下來需要採取哪些步驟。

WPForms 有 3 種確認類型可供選擇:

  1. 消息:這是 WPForms 中的默認確認類型。 當站點訪問者提交您的表單時,會出現一條簡單的消息,讓他們知道他們的表單正在處理中。
  2. 顯示頁面:這種確認類型會將您的員工帶到您網站上的特定網頁,感謝他們填寫日期/時間選擇器表單,並讓您告訴他們接下來需要做什麼。 如需幫助,請查看我們關於將客戶重定向到感謝頁面的教程。
  3. 轉到 URL(重定向):此選項適用於您希望將人們發送到包含在不同網站上找到的相關信息的特定頁面的情況。

因此,讓我們看看如何在 WPForms 中設置簡單的表單確認,以便您可以自定義人們在提交日期/時間選擇器表單時將看到的消息。

首先,單擊“設置”下“表單編輯器”中的“確認”選項卡。

datetimepicker 字段 wordpress 確認

然後,根據您的喜好自定義確認消息,然後點擊保存

如需其他確認類型的幫助,請參閱我們關於設置表單確認的文檔。

現在,讓我們設置您的表單通知。

第 6 步:配置您的表單通知

想要某人在您的表格上填寫的日期和時間立即通過電子郵件發送給您? 讓我們設置您的表單通知來做到這一點。

通知是自動向您自己、您的員工和填寫表格的人發送電子郵件的好方法。

wordpress datetimepicker 字段表單通知
除非您禁用此功能,否則每當有人在您的網站上提交表單時,您都會收到有關它的通知。

如果您使用智能標籤,您還可以在表單通知中獲取發送給您的日期和時間。

為此,只需使用此智能標籤在通知電子郵件中添加時間戳 – {date format=”m/d/Y”}

為 wordpress 日期/時間選擇器添加日期智能標籤

WPForms 還允許您在提交表單時通知多個人。

如需這一步的幫助,請查看我們關於如何在 WordPress 中設置表單通知的文檔。

最後,如果您想保持電子郵件的品牌一致,您可以查看有關向電子郵件模板添加自定義標題的指南。

自定義標題

很好。 您現在已準備好將日期/時間選擇器表單添加到您的網站。

第 7 步:將您的表單添加到您的站點

WPForms 允許您從博客文章、頁面、頁腳和側邊欄的不同位置添加表單。

首先,讓我們看一下最常見的選項:將您的表單嵌入到帖子或頁面中。

首先,在 WordPress 中創建一個新頁面或發布。 然後,在第一個塊(頁面標題下方的空白區域)內單擊,然後單擊“添加 WPForms”圖標。

帶有 wordpress 日期/時間選擇器的 wordpress 表單添加到頁面

方便的 WPForms 小部件將出現在您的塊內。 單擊出現的 WPForms 下拉列表,然後選擇要插入到頁面中的已創建表單之一。

選擇簡單聯繫表。

將日期選擇器插入到 wordpress

發布您的帖子或頁面,以便您的表單出現在您的網站上。

發布 wpforms wordpress 日期/時間選擇器

另一個可以向站點添加表單的地方是側邊欄小部件區域。

轉到外觀 » 小部件並將 WPForms 小部件添加到側邊欄。 之後,從下拉菜單中選擇 Simple Contact Form 並將您的更改保存到小部件區域。

後續步驟:立即使用日期/時間選擇器字段

你有它! 您現在知道如何將帶有日期/時間選擇器的 WordPress 表單添加到您的網站。

WPForms 日期/時間選擇器字段易於使用且適合移動設備,因此您的所有網站訪問者都可以使用它。 除了是一個很棒的 WordPress 日期/時間選擇器插件之外,WPForms 還提供了大量有用的功能。

只需查看 WPForms Pro 計劃中包含的內容:

  • Zapier 集成– 與 Google 日曆等數千種不同的網絡應用程序連接,因此您可以立即使用表單條目填寫日曆日期。
  • 100 多個模板– 再也不用從頭開始使用預構建的模板構建最流行的表單類型了。
  • 電子郵件營銷集成- 將您的日期/時間選擇器表單連接到最流行的電子郵件服務,以自動化您的營銷。
  • 離線表單——讓人們在重新連接互聯網後提交表單,不再丟失這麼多潛在客戶。
  • 多步表單– 將長表單分解為多頁表單,以保持高轉化率。
  • 登陸頁面– 只需單擊一下即可創建無干擾的表單頁面,讓更多人完成表單。
  • 安全表單– 使用不同的反垃圾郵件選項保護表單,例如自定義驗證碼、hCaptcha 或 Google reCAPTCHA v2 或 v3。
  • 對話形式– 觀看轉化率通過高度引人入勝的互動形式飆升。
  • 高級支持– 訪問友好且知識淵博的團隊,如果您需要有關網站表單的幫助,他們將幫助您朝著正確的方向前進。
  • ……還有更多

單擊此處立即開始使用日期/時間選擇器表單

另外,您想知道如何提高網站上的表單轉換率嗎? 查看這份設計表單的簡單方法彙總,以便人們完成它們。

你還在等什麼? 立即開始使用最強大的 WordPress 表單插件。

不要忘記,如果您喜歡這篇文章,請在 Facebook 和 Twitter 上關注我們。