如何使用日期/时间选择器创建 WordPress 表单

您想在 WordPress 表单中添加日期/时间选择器字段吗？

让您的用户直接在您的表单上选择日期和时间非常简单。

因此，在本文中，我们将向您展示如何在 WordPress 中轻松添加日期/时间选择器表单字段，如果您想自定义它，还会提供一些提示。

如何使用日期/时间选择器创建 WordPress 表单

使用 WPForms，添加一个允许人们选择特定日期、时间或两者的字段非常简单。

这是使用日期/时间选择器制作 WordPress 表单的分步教程：

如果您更喜欢书面说明，请参见下文。

第 1 步：创建一个 WordPress 表单

您需要做的第一件事是安装并激活 WPForms 插件。 您需要付费版本的插件，因为日期/时间选择器字段在免费版本中不可用。 有关更多详细信息，请参阅有关如何在 WordPress 中安装插件的分步指南。

购买并安装 WPForms 插件后，请转到WPForms » 添加新表单以创建新表单。

在设置屏幕上，为表单命名并选择要使用的表单模板。 最棒的是，WPForms 附带了 100 多个预先设计的模板。

在我们的示例中，我们将使用Simple Contact Form模板。

单击模板后，WPForms 将为您生成一个简单的联系表格。 它将加载以下字段：

• 名字和姓氏
• 电子邮件
• 评论

现在让我们使用表单构建器向表单添加字段。

第 2 步：自定义表单

您可以通过将其他字段从左侧面板拖动到右侧面板来添加它们。 然后，单击该字段以进行任何更改。

您还可以单击表单域并拖动它以重新排列表单上的顺序。

因此，让我们继续转到Fancy Fields并将日期/时间字段拖到您的表单上，无论您喜欢它的任何位置。

一旦它出现在您的表单上，您就可以将其上下拖动以将其放置在其他位置，然后再次单击该字段以打开其设置并对其进行自定义。

当您单击“日期/时间”表单字段时，您将看到以下选项：

• 标签：这是站点访问者将在您的表单上看到的字段的标题。
• 格式：您可以在此处调整日期格式，并要求您的客户仅选择日期、时间或两者。
• 描述：为字段添加描述。 这是为用户添加说明或详细信息的好地方。
• 必填：选中此框后，用户除非填写此字段，否则无法提交表单。

如果您向下滚动并单击Advanced Options ，您可以进一步自定义日期/时间选择器字段，如果您愿意，您可以在此处将日期/时间选择器从日历格式调整为下拉列表。

日期/时间选择器是一个功能强大的字段，有很多很棒的设置和选项，让我们仔细看看你可以用它做什么。

场地大小

在这里您可以选择您想要的字段有多大。

日期类型

默认情况下，日期/时间选择器字段将显示日期和时间选项的字段。 您可以在此处选择您希望该字段是显示日历的日期/时间选择器还是具有月、日和年的下拉字段。

日期格式

在此字段中从月/日/年格式切换到日/月/年。

时间间隔

您可以在此处选择 15 分钟、30 分钟或 1 小时（非常适合预订表格）来增加或减少时间间隔。

时间占位符

调整时间框内部的内容。

时间格式

在标准 12 小时制或“军用”24 小时制之间进行选择。

限制小时数（使用日期下拉格式）

调整某人可以输入特定时间的范围，例如您只在上午 9 点至下午 5 点开放。 在第 3 步中查看有关此设置的更多详细信息。

限制天数（使用日期选择器格式）

调整可用天数，例如，如果您只在工作日工作。 在第 3 步中查看有关此设置的更多详细信息。

隐藏标签和隐藏子标签

此选项显示或隐藏字段的标签和子标签。

CSS 类

此字段允许您在不影响其他字段的情况下设置特定字段的样式。 您可以使用 CSS 更改颜色、间距等。

如果您想知道不同的日期/时间选择器格式是什么样的，这里是日期选择器格式：

日期下拉格式如下所示：

无论您选择哪种格式，都知道日期/时间选择器字段是在表单上获取准确数据的好方法。 日期将始终在日期/时间选择器字段中以正确的格式进行验证。

想要进一步定制吗？ 接下来，我们为您提供了一些更高级的选项。

第 3 步：高级日期/时间选择器自定义

还有一些其他有趣的技巧您可能想尝试使用日期/时间选择器字段：

• 如果您想设置表单的外观和布局以匹配您的主题，请查看如何将自定义 CSS 添加到您的 WPForms。
• 只希望有人填写您的日期/时间选择器表单一次？ 如果您想了解如何限制用户的条目，请查看有关如何限制 WordPress 表单条目数量的教程。
• 需要有人为您提供精确到分钟的超级特定时间吗？ 使用一段自定义代码自定义日期/时间选择器上的时间间隔。
• 想要不同的日期/时间格式？ 您可以使用任何可用的 PHP 变量来更改日期和时间格式。
• 尽管日期/时间选择器字段上还没有条件逻辑，但您可以使用插件验证年龄或使用日期/时间选择器字段附近的“是/否”下拉字段来询问用户是否超过特定年龄。

完成自定义设置后，请继续并点击保存。

第 4 步：限制日期 + 时间（可选）

如果您想限制可以在日期/时间选择器字段中选择哪些日期和时间选项，这很容易做到。

您可以对日期/时间选择器字段进行大量控制。 你可以：

• 限制可供用户选择的日期
• 禁用过去的日期，这样就没有人可以选择过去的一天
• 限制人们可以选择的次数

无论您需要在表单上使用哪一种，我们都会在有关如何限制“日期/时间选择器”字段的选项的说明中为您介绍。

第 5 步：配置表单的设置

表单确认是在人们完成您的表单后显示给他们的消息。 确认让他们知道他们的表格已被处理，并让您有机会告诉他们接下来需要采取哪些步骤。

WPForms 有 3 种确认类型可供选择：

1. 消息：这是 WPForms 中的默认确认类型。 当站点访问者提交您的表单时，会出现一条简单的消息，让他们知道他们的表单正在处理中。
2. 显示页面：这种确认类型会将您的员工带到您网站上的特定网页，感谢他们填写日期/时间选择器表单，并让您告诉他们接下来需要做什么。 如需帮助，请查看我们关于将客户重定向到感谢页面的教程。
3. 转到 URL（重定向）：此选项适用于您希望将人们发送到包含在不同网站上找到的相关信息的特定页面的情况。

因此，让我们看看如何在 WPForms 中设置简单的表单确认，以便您可以自定义人们在提交日期/时间选择器表单时将看到的消息。

首先，单击“设置”下“表单编辑器”中的“确认”选项卡。

然后，根据您的喜好自定义确认消息，然后点击保存。

如需其他确认类型的帮助，请参阅我们关于设置表单确认的文档。

现在，让我们设置您的表单通知。

第 6 步：配置您的表单通知

想要某人在您的表格上填写的日期和时间立即通过电子邮件发送给您？ 让我们设置您的表单通知来做到这一点。

通知是自动向您自己、您的员工和填写表格的人发​​送电子邮件的好方法。

除非您禁用此功能，否则每当有人在您的网站上提交表单时，您都会收到有关它的通知。

如果您使用智能标签，您还可以在表单通知中获取发送给您的日期和时间。

为此，只需使用此智能标签在通知电子邮件中添加时间戳 – {date format=”m/d/Y”}

WPForms 还允许您在提交表单时通知多个人。

如需这一步的帮助，请查看我们关于如何在 WordPress 中设置表单通知的文档。

最后，如果您想保持电子邮件的品牌一致，您可以查看有关向电子邮件模板添加自定义标题的指南。

很好。 您现在已准备好将日期/时间选择器表单添加到您的网站。

第 7 步：将您的表单添加到您的站点

WPForms 允许您从博客文章、页面、页脚和侧边栏的不同位置添加表单。

首先，让我们看一下最常见的选项：将您的表单嵌入到帖子或页面中。

首先，在 WordPress 中创建一个新页面或发布。 然后，在第一个块（页面标题下方的空白区域）内单击，然后单击“添加 WPForms”图标。

方便的 WPForms 小部件将出现在您的块内。 单击出现的 WPForms 下拉列表，然后选择要插入到页面中的已创建表单之一。

选择简单联系表。

发布您的帖子或页面，以便您的表单出现在您的网站上。

另一个可以向站点添加表单的地方是侧边栏小部件区域。

转到外观 » 小部件并将 WPForms 小部件添加到侧边栏。 之后，从下拉菜单中选择 Simple Contact Form 并将您的更改保存到小部件区域。

后续步骤：立即使用日期/时间选择器字段

你有它！ 您现在知道如何将带有日期/时间选择器的 WordPress 表单添加到您的网站。

WPForms 日期/时间选择器字段易于使用且适合移动设备，因此您的所有网站访问者都可以使用它。 除了是一个很棒的 WordPress 日期/时间选择器插件之外，WPForms 还提供了大量有用的功能。

只需查看 WPForms Pro 计划中包含的内容：

• Zapier 集成– 与 Google 日历等数千种不同的网络应用程序连接，因此您可以立即使用表单条目填写日历日期。
• 100 多个模板– 再也不用从头开始使用预构建的模板构建最流行的表单类型了。
• 电子邮件营销集成– 将您的日期/时间选择器表单连接到最流行的电子邮件服务，以实现营销自动化。
• 离线表单——让人们在重新连接互联网后提交表单，不再丢失这么多潜在客户。
• 多步表单– 将长表单分解为多页表单，以保持高转化率。
• 登陆页面– 只需单击一下即可创建无干扰的表单页面，让更多人完成表单。
• 安全表单– 使用不同的反垃圾邮件选项保护表单，例如自定义验证码、hCaptcha 或 Google reCAPTCHA v2 或 v3。
• 对话形式– 观看转化率通过高度引人入胜的互动形式飙升。
• 高级支持– 访问友好且知识渊博的团队，如果您需要有关网站表单的帮助，他们将帮助您朝着正确的方向前进。
• ……还有更多

单击此处立即开始使用日期/时间选择器表单

另外，您想知道如何提高网站上的表单转换率吗？ 查看这份设计表单的简单方法汇总，以便人们完成它们。

你还在等什么？ 立即开始使用最强大的 WordPress 表单插件。

不要忘记，如果您喜欢这篇文章，请在 Facebook 和 Twitter 上关注我们。