wordpress知识库
网站首页 > 知识库 > wordpress知识 >

在wordpress表单中插入日期选择器字段

日期选择器字段是在wordpress表单上捕获日期相关信息的便捷方法。例如,可能需要知道用户的出生日期,或者您希望他们通过表单轻松安排服务预约。

在本文中,我们将向您展示如何使用日期选择器轻松创建wordpress表单。

如何使用日期选择器创建wordpress表单

为什么要使用日期选择器创建wordpress表单?

当您希望用户输入日期时,wordpress表单中的日期选择器字段非常有用。常见示例包括:

  • 要求用户输入其出生日期的注册表单。
  • 用于选择订单交货日期和时间的订单表单。
  • 用于选择租赁物料的取货或还车日期的租赁物料窗口。
  • 回拨请求表单,允许用户在他们希望就产品或服务与您联系时通知您。
  • 休假申请表,允许员工输入休假的开始和结束日期。
  • 住宿或服务网站的预约或预订表格。

与手动输入日期相比,日期输入字段是用户插入日期的一种更简单的方法。它确保日期格式在所有表单提交中保持一致,从而减少错误并改善用户体验。

第1步:安装WPForms插件并选择模板

第一步是安装WPForms。它是市场上联系表单最好的wordpress插件,可以非常轻松地在wordpress网站上创建各种表单,包括带有日期选择器字段的表单。

激活后,从wordpress仪表盘前往WPForms »添加新页面。

单击wordpress管理面板中的WPForms中的新增

这将引导您进入“选择模板”页面。

在选择模板之前,最好为wordpress表单命名,以便您以后可以轻松识别它。

在WPForms中命名新窗口

向下滚动,将在此处看到一堆可用的预制表单模板,其中许多模板已包含日期选取器字段。

举例来说,我们将使用简单联系表单模板,然后将日期选取器字段添加到其中。但请随意选择最适合模板。

做出选择后,只需单击“使用模板”按钮即可。

单击WPForms中的“使用模板”按钮

第2步:将日期选取器字段添加到wordpress表单

现在,将到达WPForms表单构建器。您会注意到左栏中的字段选项和屏幕右侧的表单预览。

默认情况下,“简单联系人表单”模板仅将姓名、电子邮件地址和注释字段添加到表单中。

出于演示目的,我们将向您展示如何将日期选择器字段添加到wordpress表单中。但是,如果模板已经有它,那么可以跳到此步骤的编辑部分。

需要做的是向下滚动到左栏中的“花式字段”部分,将在其中看到“日期/时间”字段。

只需将该字段拖放到表单上所需的位置即可。在本教程中,我们将其放在“电子邮件”字段的正下方。

将“日期时间”字段拖放到WPForms中的表单生成器中

完成此操作后,单击“日期/时间”字段进行编辑。这将打开屏幕左侧的“字段选项”选项卡。在这里,可以更改字段的标签,默认为“日期/时间”。我们将为我们的字段使用“首选电话通话时间”。

您还可以使用格式下拉菜单更改字段的日期格式。选项包括“日期和时间”、“日期”或“仅时间”。如果您只想使用没有时间字段的日期来收集用户的出生日期,这可能很有用。除此之外,可以填写描述文本,以提供有关用户需要在字段中输入的内容的更多上下文。最后,如果您想将其设为必填字段,可以选中“必填”框。这意味着用户必须先选择日期和时间,然后才能提交表单。完成此操作后,只需单击顶部的“保存”按钮即可存储表单设置。

在WPForms中配置窗口的常规设置

专业提示:如果您运行一个住宿网站,并希望用户为其住宿插入特定日期,则可以使用“酒店预订表单”模板。它包括两个日期选择器字段:一个用于到达日期,另一个用于出发日期。

步骤3:配置日期时间选取器的高级选项

默认情况下,wordpress表单上的日期选择器字段将是一个日历,旁边有一个时间下拉菜单。将选择当前日期,但用户可以更改它以选择其他日期。日期格式为月/日/年。

WPForms中的默认日期时间选取器日历

同时,时间下拉列表默认为12小时制,间隔30分钟。然后,用户可以选择最适合他们的时间段。

WPForms中的默认时间下拉选取器

在某些情况下,您可能需要更改日期选取器设置。例如,您可能所在的国家/地区遵循日/月/年或24小时日期和时间格式,而不是默认格式。为此,您必须切换到左侧面板顶部的“高级”选项卡。在这里,可以调整日期选取器字段的大小。然后,在“日期”部分,可以将日期选取器从日历更改为日期下拉菜单。

在WPForms中选择日期下拉列表类型

如果窗口空间有限且日历看起来相当小,则将日期日历选取器切换到日期下拉菜单是个好主意。日期下拉菜单如下所示:

WPForms的日期下拉菜单示例

在此之下,可以将日期格式从月/日/年(2024年1月31日)更改为日/月/年(2024年1月31日)或月日、年(2024年1月31日)。如果您选择日历日期选择器,则还可以在“日期”字段中插入占位符文本。可以用日期格式填充它,让用户知道您正在使用的格式,这样他们就不会感到困惑。

在WPForms中配置日期选取器的高级设置

此外,可以启用“限制天数”开关来调整可以选择的日期范围。如果您只在工作日运行服务,这将很有用。还可以随意禁用过去的日期,以防止选择以前的日期。

WPForms中“日期时间”字段的“限制天数”和“禁用过去日期”设置

接下来,让我们向下移动到“时间”部分以更改时间选择器。在这里,可以将间隔更改为15分钟或1小时,而不是30分钟。在此处输入占位符文本以显示您正在使用的时间格式也很好。时间选择器默认为12小时制,但如果您愿意,可以将其切换为24小时制。此外,请随时打开“限制时间”设置以指定服务的开始和结束时间。这样,用户就无法在工作时间之外进行预约。除此之外,您还可以为日期选取器字段输入CSS类名。这是一项高级的可选功能,但可以稍后使用此功能通过代码覆盖窗口的样式。最后但并非最不重要的一点是,如有必要,可以隐藏表单字段标签和/或子标签。一旦您对表格感到满意,可以通过单击屏幕右上角的“保存”按钮来保存它。

在WPForms中配置时间选取器字段的高级设置

第4步:在网站上嵌入wordpress表单

您现在可以使用日期选择器将新表单添加到wordpress网站。为此,只需单击表单构建器顶部的“嵌入”按钮即可。将出现一个弹出窗口,要求您选择要添加表单的现有页面或从头开始为表单创建新页面。这两个选项都使用块编辑器,因此步骤非常相似。

WPForms中的嵌入弹出窗口

将WPForms块添加到现有页面或新页面要在现有页面中插入表单,请单击“选择现有页面”按钮。之后,选择您在wordpress博客或网站上已有的页面之一,然后单击“Let’s Go!

选择要向其添加WPForms表单的现有页面

如果您想将表单添加到新页面,只需单击“创建新页面”按钮即可。然后,为新页面命名,然后单击“Let’s Go!

创建一个新页面以将WPForms表单插入到

这两种方法都会将您带到块编辑器,将在其中看到有关如何添加WPForms块的一些说明。

首先,单击“+”添加块按钮。

单击块编辑器中的“添加块”按钮以插入WPForms块

然后,在块搜索栏中输入“WPForms”。只需将块拖放到页面上看起来最好的位置即可。

在块编辑器中搜索WPForms块

您现在需要做的就是单击下拉菜单。然后,选择您刚刚创建的表单。

选择要在块编辑器中插入的WPForms窗口

在“阻止设置”侧边栏中,可以自定义表单字段、标签和按钮样式,使它们与wordpress主题搭配得更漂亮。可以更改每个元素的大小、边框半径和颜色。

块编辑器中的WPForms块设置侧边栏

您现在可以单击“更新”或“发布”按钮,使表单在网站上生效。在wordpress网站上,它应该看起来像这样:

使用WPForms制作的带有日期选取器的联系表单的示例

如果您想在文章而不是页面中插入表单,则可以在块编辑器中创建新文章或打开现有文章。之后,只需按照相同的步骤将WPForms块添加到页面中,就像在这种方法中一样。

将WPForms块添加到小部件就绪区域。如果您使用经典的wordpress主题,那么您可能希望在小部件就绪的页眉、页脚或侧边栏区域中显示表单。如果表单很短并且不占用太多空间,这可能是一个好主意。

注意:如果您使用的是块主题,则此方法不适用于网站。

为此,只需从wordpress管理区域转到Appearance » Widgets。然后,导航到您想要的小部件就绪区域,然后单击其中的白色“+”添加块按钮。之后,可以搜索WPForms块。如果您看到两个选项,则可以选择其中一个,因为两者都执行相同的操作。

在小组件就绪区域中添加WPForms块

与前面的方法一样,只需选择您之前刚刚创建的窗口即可。在“块设置”侧栏中,可以配置设计,使其更适合wordpress主题。一旦您对编辑感到满意,只需单击“更新”按钮。

WPForms小组件设置侧边栏

就是这样!以下是我们的表单在wordpress博客文章底部的样子:

具有日期选取器字段的WPForms表单小部件的示例

如果WPForms块或小部件不起作用,那么您也可以使用简码添加wordpress表单。在“嵌入页面”弹出窗口中,只需单击“使用简码”链接即可。然后,将看到一个简码,可以将其复制并粘贴到页面、文章或小部件就绪区域。

单击WPForms嵌入弹出窗口中的“使用简码”链接