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

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

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

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

Adding a date picker to a WordPress form

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

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

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

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

Creating a new form using WPForms

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

Selecting the Simple Contact Form template to start building your form

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

The default contact form created by WPForms

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

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

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

The Date/Time field under the Fancy Fields section

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

The Date/Time field added to the form

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

您可以更改字段的标签,默认为"日期/时间".我们将在我们的领域使用"电话的首选时间".

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

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

Editing the date/time field to change the options

您也可以添加任何其他想要使用的新字段.只需单击"添加字段"选项卡,然后将该字段拖放到您的字段上.要编辑字段,只需点击它.

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

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

The default date picker (calendar style)

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

The default time picker (dropdown list at 30 minute intervals)

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

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

Viewing and changing the Advanced Options for the Date/Time field

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

Selecting the date format from the Date Options dropdown

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

The Date Dropdown field in action in a form

您还可以更改时间选择器.它默认为 12 小时制,但您可以根据需要将其切换为 24 小时制.您还可以将间隔更改为 15 分钟或 1 小时,而不是 30 分钟.

Changing the time intervals for your date picker

对表单感到满意后,您可以点击右上角的"保存"按钮进行保存.

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

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

您可以按照我们关于创建具有多个收件人的联系表单的教程中的说明进行操作.

将您的表单添加到您的网站

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

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

Adding the WPForms block to your page or post

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

Selecting the correct form from the WPForms dropdown

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

The finished date picker form live on the website

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

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

Mobile preview of date picker in a WordPress form

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

您可以通过转至 WPForms » 来更改您的表单.所有表格.然后,只需点击表单标题或标题下方的"编辑"链接即可对其进行编辑.

Editing a form you've already created in WPForms

一旦您保存表单,它就会在您的网站上自动更新.

我们希望本文能帮助您了解如何使用日期选择器创建 WordPress 表单.您可能还想查看我们关于如何在 WordPress 中阻止联系表单垃圾邮件以及如何在 WordPress 中跟踪和减少表单放弃的文章.

2

发表回复