您想创建带有日期选择器的 WordPress 表单吗?

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

在本文中,我们将向您展示如何轻松创建带有日期选择器的 WordPress 表单。

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

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

  • 要求用户输入生日的注册表单。
  • 用于选择订单的交货日期和时间的订单表格。
  • 用于选择租赁物品取车或还车日期的租赁物品表格。
  • 回电请求表单,让用户可以在需要就您的产品或服务联系他们时通知您服务。
  • 请假申请表,以便员工输入休假的开始和结束日期。
  • 住宿或服务网站的预约或预订表格。

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

话虽如此,让我们看看如何使用日期选择器轻松创建 WordPress 表单。您可以使用这些快速链接浏览本文:

  • 第 1 步:安装 WPForms 插件并选择模板
  • 第 2 步:向您的 WordPress 表单添加日期选择器字段
  • 第 3 步:配置高级选项日期时间选择器
  • 第 4 步:在您的网站上嵌入 WordPress 表单
  • 优化 WordPress 表单的终极技巧

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

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

有关详细说明,您可能需要查看我们有关如何安装 WordPress 插件的分步指南。

注意:对于本指南,您需要使用 WPForms 的高级版本,因为这是可用日期选择器字段的地方。也就是说,如果您使用我们的 WPForms 优惠券,那么您可以获得正常价格 50% 的折扣。

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

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

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

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

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

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

第 2 步:向您的 WordPress 添加日期选择器字段表格

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

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

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

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

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

完成后,单击“日期/时间”字段进行编辑。这将打开屏幕左侧的“字段选项”选项卡。

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

您还可以使用“格式”下拉菜单更改字段的日期格式。选项有“日期和时间”、“日期”或“仅时间”。如果您只想使用不带时间字段的日期来收集用户的出生日期,这可能会很有用。

其他然后,您可以填写描述文本,以提供有关用户需要在字段中输入的内容的更多上下文。

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

完成此操作后,只需单击顶部的“保存”按钮即可存储您的表单设置。

专业提示:如果您运营一个住宿网站并希望用户插入具体的住宿日期,那么您可以使用酒店预订表模板。它包括两个日期选择器字段:一个用于到达日期,另一个用于出发日期。

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

默认情况下,WordPress 表单上的日期选择器字段将是一个日历,旁边有一个时间下拉菜单。

将选择当前日期,但用户可以更改它以选择不同的日期。日期格式为月/日/年。

同时,时间下拉菜单默认为 12 小时制,间隔为 30 分钟。

然后用户可以选择最适合他们的时间段。

在某些情况下,您可能想要更改日期选择器设置。例如,您所在的国家/地区可能采用日/月/年或 24 小时日期和时间格式,而不是默认格式。

为此,您必须切换到左侧面板顶部的“高级”选项卡。

在这里,您可以调整日期选择器字段的大小。然后,在“日期”部分中,您可以将日期选择器从日历更改为日期下拉菜单。

如果表单空间有限并且日历看起来相当小,则将日期日历选择器切换到日期下拉菜单是一个好主意。

日期下拉菜单如下所示:

在下面,您可以将日期格式从月/日/年 (1/31/2024) 更改为日/月/年 (31/1/2024) 或月日年(2024 年 1 月 31 日)。

如果您选择日历日期选择器,则还可以在“日期”字段中插入占位符文本。您可以用您的日期格式填充它,让用户知道您正在使用什么格式,以免他们感到困惑。

此外,您可以启用“限制天数”开关来调整可以选择的日期范围。如果您仅在工作日运行服务,这将非常有用。

您也可以随意禁用过去的日期,以防止选择以前的日期。

接下来,让我们向下移动到“时间”部分来更改时间选择器。

在这里,您可以将间隔更改为 15 分钟或 1 小时,而不是 30 分钟。最好在此处输入占位符文本以显示您正在使用的时间格式。

时间选择器默认为 12 小时制,但如果您愿意,可以将其切换为 24 小时制。

此外,您还可以随时启用“限制时间”设置来指定服务的开始和结束时间。这样,用户就无法在您的工作时间之外进行预约。

除此之外,您还可以为日期选择器字段输入 CSS 类名称。这是一项高级且可选的功能,但您可以稍后使用它来使用代码覆盖表单的样式。

最后但并非最不重要的一点是,如有必要,您可以隐藏表单字段标签和/或子标签。

对表单感到满意后,您可以通过单击屏幕右上角的“保存”按钮来保存它。

第 4 步:在您的网站上嵌入 WordPress 表单

您现在已准备好将带有日期选择器的新表单添加到您的 WordPress 网站。为此,只需单击 t表单生成器顶部的“嵌入”按钮。

将出现一个弹出窗口,要求您选择现有页面以添加表单或从头开始为表单创建新页面。这两个选项都使用块编辑器,因此步骤非常相似。

将 WPForms 块添加到现有页面或新页面

要将表单插入现有页面,请单击“选择现有页面”按钮。之后,选择您的 WordPress 博客或网站上已有的页面之一,然后单击“开始吧!”

如果您想将表单添加到新页面,只需单击“创建新页面”按钮即可。

然后,为您的新页面命名,然后点击“开始吧!”

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

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

然后,输入“WPForms’进入块搜索栏。

只需将块拖放到页面上看起来最好的位置即可。

您现在所需要做的就是单击下拉菜单。

然后,选择您刚刚创建的表单。

在“块设置”侧栏中,您可以自定义表单字段、标签和按钮样式,使它们看起来更适合您的 WordPress 主题。

您可以更改每个元素的大小、边框半径和颜色。

您现在可以点击“更新”或“发布”按钮以使表单在您的网站上生效。

它在您的 WordPress 网站上应该如下所示:

如果您想将表单插入帖子而不是页面中,则可以创建新帖子或在块编辑器中打开现有帖子。

之后,只需按照与此方法相同的步骤将 WPForms 块添加到页面即可。

将 WPForms 块添加到小部件就绪区域

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

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

为此,只需从 WordPress 管理区域转到外观 » 小部件。然后,导航到所需的小部件就绪区域,然后单击其中的白色“+”添加块按钮。之后,您可以搜索 WPForms 块。

如果您看到两个选项,您可以选择其中一个,因为两者都执行相同的操作。

与之前的方法一样,只需选择您刚刚创建的表单即可。在“块设置”侧栏中,您可以配置设计,使其更适合您的 WordPress 主题。

对编辑感到满意后,只需点击“更新”按钮即可。

就是这样!

这是我们的表单的样子就像 WordPress 博客文章的底部一样:

使用短代码嵌入您的 WordPress 表单

如果 WPForms 块或小部件不起作用,您还可以使用短代码添加 WordPress 表单。

在“嵌入页面”弹出窗口中,只需单击“使用短代码”链接即可。然后,您将看到一个短代码,您可以将其复制并粘贴到页面、帖子或小部件就绪区域。

有关如何使用短代码的更多信息,请阅读我们有关如何在 WordPress 中添加短代码的文章。

优化 WordPress 表单的终极技巧

既然您已经知道如何使用日期选择器创建 WordPress 表单,那么让我们介绍一下将您的表单提升到新水平的最佳技巧:

  • 向您的表单提交者发送确认电子邮件 – 这样,用户将收到您已成功收到其条目的通知,并且您不会忘记他们选择的日期或时间。
  • 接受表单中的在线支付 – WPForms 支持流行的支付网关,例如 Stripe、PayPal、Square 和 Authorize.net。您可以收取一次性或定期付款,并且没有额外的交易费用。
  • 使较长的表单成为对话式表单 – 如果您有一个活动或用户注册表需要捕获大量信息,那么使其成为对话式表单可以提高表单完成率。
  • 防止联系表单垃圾邮件 – 您可以启用 WPForms 的内置反垃圾邮件保护和 reCAPTCHA 复选框来过滤我们的垃圾邮件表单条目。

我们希望本文能帮助您了解如何使用日期选择器创建 WordPress 表单。您可能还想查看我们关于如何创建电子邮件通讯的文章以及我们的最佳 WordPress 调查插件的最终列表。

如果您喜欢这篇文章,请订阅我们的 YouTube Word 频道按视频教程。您还可以在 Twitter 和 Facebook 上找到我们。

By

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注