如何通过 5 个简单的步骤在 WordPress 中添加多步骤表单

您是否知道将您的单步 WordPress 表单转换为多步表单 WordPress 可以将您的转化率提高近 60% ？ 事实上，在某些情况下，转化率可以高达 300% 。

是的。 因为现在人们太忙了，注意力也很短。 最重要的是，如果您要求他们填写一步长表格，他们很可能会离开您的网站，导致表格不完整。

但是，您可以通过为您的 WordPress 网站使用多步骤表单来更改此方案。 但问题是如何？

好吧，这就是为什么我在这里向您展示如何在 WordPress 中添加多步骤表单的分步指南。

继续阅读以了解如何在几分钟内轻松地在 WordPress 网站中创建多步骤表单……。

什么是多步骤表格？

好吧，顾名思义，它是一个包含多个步骤的表单，其中问题/输入字段被分成不同的步骤，而不是把所有的步骤都放在一个步骤中。 如果您正在寻找定义，这里是 HubSpot 如何定义多步表单。

多步骤表格是一种长表格，被分成多个部分。 它们用于使长表格不那么令人生畏和令人生畏。

– Hubspot

多步表单基本上是输入字段过多的长表单的替代品。 如果您有一个相对较小的表格，那么您可以坚持使用一步式表格。

既然您知道什么是多步骤表单，那么让我们看看您应该考虑将多步骤表单添加到您的 WordPress 网站的一些原因。

为什么在 WordPress 中使用多步骤表单？

好吧，简单的答案是让您的转化率飙升。 如今，多步骤表格在注册表格、预订表格、食品订单表格等用途的网站上变得非常流行。您还应该考虑在您的网站中使用多步骤表格的一些原因包括：

• 多步骤表单在吸引用户注意力方面效果更好。 结果，人们参与得更多，并更频繁地完成表单提交。
• 用户发现 multistep 更加用户友好，并且它比长的一步形式提供更好的易用性。
• 由于有一个带有多步骤表单的导航栏/进度条，用户会感到更鼓励完成多步骤表单。
• 有条件的多步骤表单非常适合仅收集您需要的相关数据。
• 由于上述所有积极方面，多步骤形式提高了转化率。

现在您知道应该在 WordPress 网站中使用多步骤表单，是时候创建构建多部分表单所需的完美设置了。

设置您需要构建一个 WordPress 多步骤表单

除了 WordPress，您还需要两个插件才能轻松地在 WordPress 中创建多步骤表单。 这些WordPress插件是：

1. 元素 （免费版）
2. MetForm （免费和专业版）

Elementor 是最好的 WordPress 页面构建器，而 MetForm 是增长最快的 WordPress 多步骤表单插件之一。 如果您在安装 MetForm 时需要帮助，可以查看我们关于如何安装 MetForm 的文档。

完成安装后，您需要先使用 Elementor 页面构建器创建一个页面，然后才能使用 Metform。 为此，请转到Dashboard ⇒ Page ⇒ Add New 。

现在，提供一个合适的Title ，选择Elementor Full Width作为模板，点击 Publis h。 之后，单击使用 Elementor 编辑。

最后，您已准备好构建多步骤表单。 那么，让我们继续进行主要流程。

注意：在本教程中，我将向您展示如何向页面添加多步骤表单。 但是您也可以在模态弹出窗口中轻松添加使用 MetForm 构建的表单。

如何在 WordPress 中创建多步骤表单

在本博客中，您将学习通过 5 个简单的步骤从头开始创建具有现代感的多步骤表单：

第 1 步：拖放 MetForm

进入使用 Elementor 编辑模式后，搜索MetForm 并将其拖放到您希望表单出现的位置。

第 2 步：创建新表单

单击表格部分以转到编辑 MetForm选项。 单击编辑表单按钮。

一旦弹出新窗口

• 选择新建（创建新表单）
• 为表单提供表单名称
• 选择空白模板，
• 并点击编辑表格

第 3 步：使用 MetForm 和 Elementor 页面构建器从头开始构建多步骤表单

单击“编辑表单”后，您将可以使用 Elementor 页面构建器访问另一个新窗口，以从头开始创建表单。 要构建单步多步表单，您需要遵循以下四个步骤：

添加一个全新的部分

根据要求拖放输入字段

根据表单的短语拖放 Prev/Next/Submit 按钮

为该部分提供适当的名称

对于这个博客，我将使用上述步骤创建一个 3 步酒店预订多步骤表单的演示。 表格的三个步骤将包括个人信息、预订信息和附加信息

预订表格第一步 - 个人信息：

• 对于个人信息部分，单击Elementor +图标并选择具有两个相等列的结构。

• 搜索文本输入字段并将表单字段拖放到左侧列中。

• 现在要编辑此输入字段的属性，单击编辑标志，转到内容⇒内容并编辑以下选项：
  • 显示标签：打开此选项以显示输入字段的标签。
  • 位置：您可以选择将标签放置在顶部或左侧。
  • 标签：为您的标签命名。 我将使用“名字”。
  • 名称：名称字段是必需的，并且必须是唯一的。 因此，请确保为每个字段指定不同的名称，并用下划线/连字符替换空格。
  • 占位符：提供占位符文本。
  • 帮助文本：如果您想为用户提供帮助文本，您可以在此处进行。

• 接下来，转到内容⇒设置以修改以下选项：
  • 必需：要使此表单字段成为必需，请打开此选项。
  • 验证类型：您可以根据字符长度、字长和表达式为文本字段设置不同类型的验证。
  • 警告信息：您可以在此处设置未满足要求时将显示的警告信息。

注意：我将在此表单的第二步中使用条件逻辑功能。

就像名字一样，为姓氏添加另一个文本输入字段。 作为个人信息步骤的一部分，我将在这里添加另外两个字段； 电子邮件和手机号码。

完成修改电子邮件和手机号码字段的设置后。 搜索并拖放 Next Step 按钮。 您可以更改不同的按钮设置，例如标签、按钮对齐方式、图标、图标位置等。

• 现在第一步的部分已经准备好了，给第一步起一个合适的名字
  • 单击六点图标以打开设置选项并转到布局⇒多步。
  • 在多步骤选项卡标题选项上提供名称
  • 从库中选择一个图标或上传一个 SVG。
  • 点击更新保存。

现在第一部分已经准备好了，让我们构建第二步。

预订表格第二步 - 预订信息：

• 对于第二步，您需要选择一个新部分。 我将选择一个具有单列的新部分，然后添加一个具有两个相等列的新内部部分。
• 选择列后，拖放签入和签出选项的 2 日期输入字段。

必须遵循的规则：您必须选择一个新部分来开始新步骤，否则，您添加的任何输入字段都将添加到上一步。 所以，永远记住，新的步骤需要一个新的部分，即使它具有相同的布局。

• 除了提到的文本字段设置选项外，您还可以在内容⇒设置下获得日期输入字段的以下设置
  • 将当前日期设置为最小日期：打开此选项可将当前日期设置为最小日期。
  • 手动设置最小日期：如果您不想将当前日期设置为最小日期，您也可以手动设置最小日期。
  • 手动设置最大日期：在这里您可以设置最大日期。
  • 禁用日期列表：您可以使用此选项禁用某些日期。 要禁用任何日期，请单击 +添加项目按钮并选择日期。
  • 日期范围输入：通过打开此选项，您可以使用户可以选择日期范围。 但是对于这种形式，我将关闭此选项。
  • 年份输入：打开此选项以将年份作为日期输入的一部分。
  • 月份输入：要启用月份作为日期输入的一部分，请打开此选项。
  • 日期输入：打开此选项以将日期（日）作为日期输入的一部分
  • 日期格式：设置此处输入的日期格式。
  • 本地化：根据您的偏好从下拉列表中选择位置。
  • 想要输入时间：打开此选项以将时间与数据一起作为输入。 如果您打开此选项，您将获得另一个选项，即启用时间 24 小时。 使用此选项，您可以启用 24 小时格式。

现在，最后，我们将为 Check Out 字段使用条件表单功能。 要使签出字段仅在签入字段为空时可见，

• 复制 Check-In 输入字段的 Name 字段的值。
• 然后转到Content ⇒ Conditional ，打开启用选项
• 从条件匹配条件下拉列表中选择 AND 。
• 从操作下拉选项中，选择显示此字段。
• 单击+ ADD ITEM ，在 if 输入字段上，粘贴您复制的签入字段名称值。
• 从匹配（比较）下拉菜单中选择“不为空”。

现在点击预览按钮查看。 只有在您选择了入住日期后，才能看到退房字段。

添加一个新的内部部分，以便在条件选项最初隐藏签出时表单看起来不错。 拖放 Number 表单字段两次，为房间数和人数再创建两个字段。

由于这是中间步骤，我们需要同时包含 Prev 和 Next Buttons 。

完成编辑此部分的所有添加字段的设置后，将部分/步骤名称从布局 ⇒ 多步更改，就像您对第一部分所做的那样。 我将其命名为预订信息。

现在第二步准备好了，让我们继续第三步

预订表格第三步 - 附加信息

对于第三步，让我们添加一个带有单列的新部分。 并添加一个文本字段并将其命名为 Additional Information。

接下来，在该部分中添加一个两列的内部部分。 之后，拖放一个上一个按钮，然后是一个提交按钮以提交表单。

注意：您可以根据需要添加任意数量的内部部分。 但是要创建一个新步骤，您必须添加一个新部分。

要为第三部分命名，请转到layout ⇒ multistep并添加标题“ Additional Information ”并添加一个图标。

最后，我们通过 3 个步骤完成了 WordPress 多步骤表单的构建。 现在单击更新以保存并关闭窗口以继续进行多步骤设置。

第 4 步：启用 MetForm 的多步表单选项

现在我们有了表单，是时候将其转换为有效的多步骤表单了。 这样做

• 转到内容⇒多步骤设置
• 打开启用多步选项以激活多步选项
• 启用 Display Multistep Nav，以便 Section 菜单显示在顶部。 您还可以编辑不同的设置，例如自适应表单容器高度、启用滚动到顶部等。
• 完成所有更改后，单击更新以保存

步骤 5：配置确认、通知和其他设置以完成

现在您已经设计了多步表单。 让我们配置 MetForm 必须提供的所有表单设置。 要从 WordPress 仪表板修改 MetForm 设置，请转到 MetForm ⇒ 表单 ⇒ 单击刚刚创建的表单的“编辑”选项。

注意：在这里您还可以找到您创建的表单的简码，您只需复制并粘贴即可将您的表单添加到网站的任何位置。 您也可以从“编辑表单”选项访问表单设置。

在这里，您将找到以下设置：

一般的：

作为常规设置的一部分，您可以修改Title、Success Message、Required Login、Count views等。您还可以设置任何您希望用户在提交表单后登陆的自定义 URL 。

确认：

您可以使用此表单构建器插件向您的用户发送一封确认电子邮件，其中包含他们提交的表单的副本。 打开确认选项，然后您可以设置电子邮件主题、电子邮件发件人、发件人电子邮件、电子邮件回复至和感谢信息。

通知设置：

您也可以使用 MetForm 向管理员发送表单通知电子邮件。 启用向管理员发送通知邮件选项。 然后设置电子邮件主题、电子邮件收件人、电子邮件发件人、管理员注释等。

进行所有编辑后，向下滚动并单击保存更改以更新设置。

除了我在本博客中介绍的设置之外，您还可以获得REST API、Mail Chimp、Google Sheet等集成。此外，还有PayPal、Stripe 等支付网关集成。 CRM 集成，包括 HubSpot、Zoho等。您还可以获得登录和注册等身份验证选项。 有关这些设置的更多详细信息，请查看我们的 MetForm 文档。

如果您已正确执行上述步骤，您应该会获得一份多步骤预订表格，如下所示：

包起来

在那里，您刚刚在几分钟内创建了 WordPress 多步骤表单。 如果您认为此表格很简单，请不要担心。 本博客的主要目的是展示如何使用 MetForm 在 WordPress 中创建多步骤表单。

现在您知道如何创建 WordPress 多步骤表单，您可以创建自定义表单和逻辑。 我希望您利用 MetForm 的功能来创建精彩的多步骤表单。 如果您在此过程中遇到任何问题，请与我们分享，我们的团队将尽快回复。

不要忘记查看 MetForm 提供的所有惊人功能。