You are here:  Home » PHP » 如何使用日期选择器创建 WordPress 表单

您是否需要人们在您的网站上填写表格时选择日期?

也许您想知道打电话给他们的好时机,或者您想收集诸如出生日期等信息。这就是日期选择器字段可以提供帮助的地方。

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

将日期选择器添加到 WordPress 表单

使用日期选择器创建 WordPress 表单

对于本教程,我们将使用WPForms。它是目前最好的联系表单插件之一,您可以将其用于各种不同的表单。

您需要在您的站点上安装并激活WPForms插件。如果您不确定如何操作,请查看我们关于如何安装 WordPress 插件的分步指南。

激活插件后,转到WPForms »在 WordPress 仪表板中添加新的。

使用 WPForms 创建新表单

将出现 WPForms 构建器。首先,输入表单的名称。然后,将鼠标光标悬停在模板上并单击按钮将其选中。我们将使用简单联系表模板。

选择简单联系表单模板开始构建您的表单

WPForms 将使用该模板自动为您创建一个表单。这是默认的简单联系表格。

WPForms 创建的默认联系表格

您现在可以以任何您喜欢的方式编辑表单。

让我们添加日期选择器字段。

在表单构建器中,您将在右列中看到可以添加到表单的所有字段。向下滚动到花式字段部分,您将看到日期/时间字段。

花式字段部分下的日期/时间字段

将该字段拖放到表单上所需的位置。我们将它放在表单上的电子邮件字段下方。

添加到表单的日期/时间字段

接下来,单击该字段进行编辑。这将打开屏幕左侧的“字段选项”选项卡。

您可以更改字段的标签,默认为“日期/时间”。我们将在我们的字段中使用“首选电话时间”。

您还可以使用格式下拉菜单更改字段的格式。例如,您可能只想使用日期而不使用时间,例如出生日期字段。

如果您想将其设为必填字段,也可以选中必填框。这意味着用户必须先选择日期和时间,然后才能提交表单。

编辑日期/时间字段以更改选项

您也可以添加要使用的任何其他新字段。只需单击“添加字段”选项卡,然后将字段拖放到您的字段中。要编辑字段,只需单击它。

为您的日期选择器设置高级选项

默认情况下,表单上的日期选择器将是一个日历,旁边有一个时间下拉菜单。用户只需单击一天即可选择该日期。

默认日期选择器(日历样式)

时间下拉菜单默认为 12 小时制,间隔 30 分钟,如下所示:

默认时间选择器(以 30 分钟为间隔的下拉列表)

您可能想要更改日期选择器的工作方式。这在 WPForms 中很容易做到。在字段选项选项卡中,向下滚动到高级选项。

接下来,单击箭头打开该部分。

查看和更改日期/时间字段的高级选项

在这里,您可以进行很多更改。例如,您可能想要更改日期格式。默认值为 mm/dd/yyyy。

从日期选项下拉列表中选择日期格式

如果您愿意,您还可以从日期选择器切换到日期下拉菜单。在这种情况下,用户从下拉框中选择月、日和年,如下所示:

表单中的日期下拉字段

您还可以更改时间选择器。它默认为 12 小时制,但如果您愿意,可以将其切换为 24 小时制。您还可以将间隔更改为 15 分钟或 1 小时,而不是 30 分钟。

更改日期选择器的时间间隔

对表单感到满意后,您可以单击右上角的“保存”按钮将其保存。

您可能还想设置您的表格,以便填写表格的人获得他们提交的详细信息的副本。

这可能会有所帮助,例如,如果他们正在安排与您通话。他们将有他们预订的通话时间的电子邮件记录。

您可以按照我们教程中关于创建包含多个收件人的联系表单的说明来执行此操作。

将表单添加到您的网站

您可以将表单添加到站点上的现有页面(或帖子),也可以创建一个新页面。要创建新页面,请转到WordPress 仪表板中的页面»添加新页面。

然后,您需要向您的页面添加一个新块。单击 (+) 添加块,然后选择 WPForms 块。您可以在“小部件”部分找到它,也可以使用搜索栏搜索它。

将 WPForms 块添加到您的页面或帖子

接下来,您需要从 WPForms 下拉列表中选择您的表单,如下所示:

从 WPForms 下拉列表中选择正确的表单

这就是你需要做的。您现在可以发布您的页面,您的表单将在您的网站上生效。它应该看起来像这样:

完成的日期选择器表格在网站上发布

注意:表单的样式取决于您使用的WordPress 主题。

使用 WPForms 创建的所有表单都是开箱即用的移动设备友好型,可以在任何移动设备上使用。WPForms 日期选择器工具也适用于移动设备,适用于所有屏幕尺寸。

WordPress 表单中日期选择器的移动预览

测试您的表单以确保它按预期工作始终是一个好主意。如果您没有收到电子邮件但您确定您的通知设置是正确的,我们关于如何解决 WordPress 不发送电子邮件问题的文章应该会有所帮助。

您可以通过转到WPForms » All Forms来更改您的表单。然后,只需单击表单的标题或标题下方的“编辑”链接即可对其进行编辑。

编辑您已经在 WPForms 中创建的表单

保存表单后,它会自动在您的网站上更新。