如何允许访问者复制表单字段

已发表: 2024-06-14

很多时候,您的表单用户可能希望他们可以简单地复制表单上的字段。 用户只需重复即可轻松添加额外姓名、联系方式、工作时间等字段。

现在,有了 WPForms Repeater 字段,您的网站用户就可以做到这一点! 在本教程中,我将向您展示如何修改表单以允许重复字段,只需 5 个步骤。

如何允许访问者复制表单字段

在本文中

  • 1. 选择或创建您的表单
  • 2.添加中继器字段
  • 3. 显示行或块
  • 4. 选择布局
  • 5. 自定义按钮视图
  • 奖励:中继器领域的实际应用
  • 常问问题

首先,获取 WPForms

好吧,我知道我说过本教程只需要 5 个步骤,所以这看起来是额外的。 但是,您需要在 WordPress 网站上安装并激活 WPForms 才能复制表单上的字段,这是必然的情况。

WPForms home

因此,首先获取 WPForms 插件!

1. 选择或创建您的表单

Repeater 字段是您通过 WPForms 构建的表单中包含的一个很棒的功能。 有了它,您的表单用户可以添加更多条目或复制表单的整个块。

但您不必构建全新的表单来开始允许用户复制字段。

您可能已经使用了网站上的表单,并希望通过“转发器”字段对其进行修改。 只需单击您想要打开其表单生成器的表单下方的编辑即可。

Editing a form

但是,如果您确实需要创建新表单,则可以从 WPForms 库中提供的数千个表单模板中进行选择,从而获得先机。

我们提供广泛的表单模板选择,其中内置了中继器字段功能。

Browsing the Repeater field form templates

或者,您可以选择不同的表单模板并使用表单生成器快速添加中继器字段。

而且,与往常一样,您可以从空白表单开始,自己从头开始构建表单。

立即创建您的 WordPress 表单

2.添加中继器字段

在表单生成器中选择并加载表单后,您可以添加Repeater 字段

您将在屏幕左侧的字段中看到它。

Adding the Repeater field to a form

只需单击“转发器”字段,将其拖到表单上,然后将其放在您想要的位置即可。

然后,与“布局”字段一样,“转发器”字段允许将表单上的其他字段添加到其中。

Adding fields to the Repeater field area

那么,哪些字段属于 Repeater 字段部分? 您希望表单用户可以复制的字段。

例如,在团体注册表中,用户可能希望包含多个参与者的姓名以同时注册。

Front-end view of the Repeater field

在 WPForms 提供 Repeater 字段之前,您的表单可能会被用户 *可能 *需要的一些名称字段堵塞。

或者,如果用户想要包含更多名称字段,您可能已利用条件逻辑设置来包含其他名称字段。

Applying conditional logic settings

无论情况如何,重复器字段现在使您和您的表单用户复制字段变得更加容易!

3. 显示行或块

现在,在我们继续深入之前,先看一下应用于中继器字段的显示选项。

Selecting the Repeater field to display rows

您不仅可以自定义中继器字段区域中的字段以将其添加为单个,而且还可以允许复制整个字段

专业提示:像我一样导航到“高级”选项卡以隐藏“中继器”字段标签。

当您选择中继器区域中的字段以显示为行时,您的表单用户将复制每条水平线。

Front-end view of the Repeater field block

正如您在上面看到的, +添加或-删除按钮位于每行的末尾。

另一方面,块非常适合将要重复的字段组合在一起,而这些字段不能只适合一行。

Selecting the Repeater field display as Blocks

对于块,+ 添加或 - 删除按钮位于整个字段部分的下方。 稍后将详细介绍这些按钮。

在下面的示例中,我选择“块”作为显示可重复字段的方式。 然后,我将这些字段包含在中继器字段区域中,我希望用户能够将其复制为一个部分。

Front-end view of Repeater field blocks

现在,当表单用户添加另一个参与者时,他们可以提供我在每个块的表单上所需的所有信息。

这样,表单用户可以一次复制表单的整个部分。

4. 选择布局

接下来,查看安排可重复字段布局的不同方法。

Selecting the Repeater field layout

您可以将字段设置为单行、均匀间隔的列和不均匀的列。

例如,如果您有可重复的参与者姓名和年龄行,您可以选择一种布局,为姓名定位较大的空间,为年龄定位较小的空间。

Selecting the Repeater field 2 column layout

因此,对于表单用户来说,上面的表单生成器中的行和布局列示例如下所示:

或者,还记得第 3 步末尾的块 I 向您展示了参与者姓名、紧急联系信息和其他字段吗?

我可以利用 2 列的布局来自定义表单的这一部分。

Selecting the Repeater field 2 column layout

然后,对于用户来说,它看起来像这样:

Front-end view of the Repeater field 2 column layout

专业提示:使用简单的单行名称字段来保持列均匀分布,就像我上面所做的那样。

修改中继器字段的这些方面只会有助于保持整个表单中的所有内容整洁有序。

5. 自定义按钮视图

在重复器字段部分中要自定义的最后一件事是用于添加和删除可重复字段的 + 和 – 按钮。

您的表单用户可以单击这些按钮来添加姓名、注册部分或您提供的可复制的任何其他字段。

默认情况下,这些按钮在每行末尾显示 + 或 –,但您可以在使用块时自定义这些图标。

Navigating to the Repeater field button settings

由于按钮位于块下方而不是行末端,因此通过定制使其变得更长仍然可以保持视觉上的整洁。

首先,选择按钮类型

Selecting the Repeater field button type

这里的选项包括:

  • 带图标的按钮
  • 纽扣
  • 带文字的图标
  • 图标
  • 纯文本

如果您的按钮显示任何类型的文本,您可以在下一个框中对其进行自定义。 您可以在此处更改按钮标签的内容。

Customizing the Repeater field button labels

例如,在团体注册表上,您可以将按钮自定义为“添加参与者”。

最后,您可以为可重复字段选择最小和最大限制

Setting the Repeater field button limit

默认情况下,此限制设置为最小值 1,最大值 10。这意味着表单用户最多可以在此表单上注册 10 名参与者。

因此,当应用上面显示的设置时,我们的群组注册表单上的按钮对于用户来说将如下所示:

Front-end view of the Repeater field button

与往常一样,当您对自定义的可重复字段感到满意时,请务必保存 准备好后即可发布您的表单。

这就是全部! 您现在知道如何允许网站访问者复制表单上的字段。

奖励:中继器领域的实际应用

我已经向您展示了如何使用群组注册表单上的中继器字段区域,但我想分享一些有关此功能的其他实用示例。

员工时间表

首先,看一下我们提供的员工时间表作为模板:

Full view of the employee timesheet form template

首先收集员工详细信息,包括他们的姓名、员工电子邮件、员工 ID 以及一周的总工作时间。

The employee details section of the template

然后,员工可以输入他们一周的具体工作日期和时间,基本上使用此表格作为每周时间表。

The weekly timesheet section of the form template

它利用可重复的块和列,允许用户复制他们工作的星期几的字段,以及当天的时间和超时。 这些字段最多可以重复 14 次,或者相当于一周的两班倒。

想在您的网站上使用此表格吗? 获取模板!

班级名册表

现在,查看我们还提供作为模板的班级名册:

Full view of the class roster form template

首先收集教师的信息,以便轻松跟踪每次提交的信息。

The teacher information section of the form template

然后,通过“Repeater”字段,教师可以轻松地为名册上的每个学生添加信息,例如年级、生日或他们想要包含用于保存记录的任何其他数据。

The class roster section of the form template

教师可以使用最多 20 名学生的名册。 或者,与往常一样,此表单模板是完全可自定义的,因此可以修改允许的最大条目数。

喜欢这个形式吗? 获取模板!

为什么我应该允许访问者复制表单字段?

这对您的表单用户有好处! 允许访问者复制表单字段使填写表单的过程变得更加容易,特别是当用户需要输入类似或重复的信息时。 这可以节省网站访问者的时间,并使他们的表单填写体验更加方便和高效。

这对你也有好处! 当用户可以复制表单字段时,您可以更轻松地收集和组织数据以进行分析,因为相似的数据点会被分组并且更易于管理。

另外,它还能让您的表单保持井然有序且具有视觉吸引力。 您的网站访问者不会被长长的空白字段淹没,您也不必创建复杂的条件逻辑规则来隐藏其他字段。

Repeater Field 对每个人来说都是双赢的!

常问问题

在 WPForms,我们总是很高兴为我们提供的功能和工具提供指导。 因此,以下是有关复制表单字段的一些最常见问题的答案:

允许访问者重复表单字段意味着什么?

允许访问者复制表单字段意味着为他们提供在表单中创建特定字段的多个实例的选项。 这样,他们可以更有效地输入相似或重复的信息。

在 WPForms,我们将这些重复项称为“重复字段”,因为表单用户可以重复这些字段来输入更多信息。

如何在我的网站表单上实现字段复制?

实施方法可能会有所不同,具体取决于您使用的平台或工具。

对于 WPForms,我们通过简单的单击或拖放操作即可实现字段复制。 在其他情况下,您可能需要使用自定义代码或插件来添加此功能。

我应该对表单字段的重复次数设置限制吗?

设置限制可以帮助维护表单可用性并防止用户创建过多的字段,这可能会影响表单性能或数据管理。

使用 WPForms Repeater 字段,您可以设置重复条目的最大限制,以便您控制表单的这方面。

立即创建您的 WordPress 表单

接下来,查看这份快速简便的指南

我已经分享了很多有关如何允许访问者重复字段的信息,但关于使用 Repeater 字段还有更多信息需要了解。 这个功能提供了很多内容,有很多内容需要涵盖。

要了解一些其他快速简单的技巧(包括此处未介绍的自定义想法),请务必查看我们的中继器字段教程。

准备好构建您的表单了吗? 立即开始使用最简单的 WordPress 表单生成器插件。 WPForms Pro 包含大量免费模板,并提供 14 天退款保证。

如果本文对您有所帮助,请在 Facebook 和 Twitter 上关注我们,获取更多免费的 WordPress 教程和指南。