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

已发表: 2018-06-15

几天前，有人问我关于在 WordPress 中创建多步骤表单的问题。我在一个聚会上，不知何故在一次谈话中，这个问题出现了。在那一刻我没有心情解释这一点，但当我使用 WordPress 时，我觉得要说服他，不知何故我必须让他理解。

后来，这个问题引起了我的考虑，我想写一篇基于它的教程，可能会帮助其他人在 WordPress 中创建多步骤表单。这就是为什么我要尝试使这成为可能。

为什么要设计多步表单？

表格是收集信息和与受众联系的最简单方法之一。它可能是一个简单的休闲表格，它可能是一个商业表格或任何类型的调查相关表格。

立即试用 Fluent Forms，亲眼看看！

现在下载

然而，长表单有时会让用户感到恶心，最终也可能被认为是糟糕的用户体验。为了摆脱这个问题，几乎所有的大公司都在使用多步表单，这些表单被分成部分和页面。

页面顶部的进度条为用户在填写表单时提供了更多的舒适和控制，最重要的是它为您的用户提供了不同的交互方式。此外，它可以迅速增加您与用户的互动。

我将在这里使用 WP Fluent Form 来让您理解。 WP Fluent Form 是一个快速发展的用户友好型 WordPress 表单插件，用于创建任何类型的表单。

首先，您需要在 WordPress 中安装并激活 WP Fluent Form 插件。有关更多详细信息，请参阅我们关于如何安装 WordPress 插件的分步指南。

激活WP Fluent Forms插件并完成许可流程后，您将拥有一个适合在您的网站上创建多步骤表单的环境。

我认为您将像我现在所做的那样创建三步多步表单。第一步是用户的个人信息，第二页是用户的教育信息，第三页将涵盖用户的爱好。现在，我将向您展示如何使用 WP Fluent Form 来实现它。

WP Fluent Forms 为您提供 60 多种内置的现成表单模板。您可以通过单击使用其中任何一个来实现各自的目的。单击完成后，您将看到已自动创建相应的表单。

您还可以从头开始手动创建表单。要从头开始创建表单，只需转到Fluent Form -> Create a Blank Form ，它将显示一个对话框，其中包含三种默认表单格式和一个用于创建新表单的自定义选项。

有关更多详细信息，请参阅如何使用 Fluent Forms 创建新表单。

完成单击Create a Blank Form后，您将找到一个表单构建器，该构建器将显示配置选项。在右侧边栏中，您将找到一个可拖放的输入字段，以将特定功能添加到您的表单中。

创建表单后，现在您必须将必要的字段放入该表单中。为此，请拖放所需的字段；例如，对于您的个人信息，您将在表格上放置四个不同的字段。

您有输入字段，现在您必须单击或拖放任何特定输入字段才能将任何功能添加到表单中。添加任何输入字段后，根据所需名称更改每个部分的元素标签。为了您更好地理解，我留下了几个屏幕截图。

根据您的需要添加名称字段、地址字段、电子邮件。您可以自定义每个输入字段并更改其管理字段标签、占位符、元素标签等。

我在Address字段之前将Dropdown输入字段添加到编辑器中，并将其命名为Gender 。在“性别”部分，您必须配置下拉菜单的选项。

您也可以简单地通过拖放来重新排列输入字段。正如您在下图中看到的那样，我正在拖放Gender输入字段。

添加表单步骤输入字段，您希望在其中完成表单的第一步。这将在您的多步骤表单中创建分页符。在其下方添加其他字段以显示在下一页中。

现在将光标放在“分页开始”部分，然后您将找到“编辑”选项（铅笔图标）。单击它，它将带您进入Input Customization 。在那里，您必须通过单击进度条按钮为每个步骤指定一个标题。

写下每个步骤的标题名称。例如，在步骤 1输入字段中写入个人信息。在步骤 2输入字段中写入教育，依此类推。现在看看预览部分。

图片显示了一个进度条和一个下一步按钮分别作为窗体顶部和底部的指示器。

现在您必须在表格的第二页上工作，该页面指示表格的教育部分。为此，您可以使用大学和学院的简单文本字段进行输入。您必须使用下拉字段在表单中输入“学位”。

让我们看一下每个输入字段的屏幕截图。对于大学和学院，您必须先自定义标签。

对于度数输入字段，您必须使用下拉输入字段。在这种情况下，您必须先自定义标签，然后必须为下拉列表提供选项。

现在，您将转到与用户的爱好相关的第三页。为了实现这一点，我们必须再次选择Form Step来实现这一点。

单击“分页开始”部分中的“表单步骤”字段后，将立即创建一个新的输入字段。单击“表单步骤”部分的“编辑”选项，记下第三步的标题名称。

通过在输入字段中输入爱好来记下标题。然后去表格的第三部分。您可以为每个爱好选择一个简单文本字段。

您必须将其放到“提交表单”按钮的正上方。

这样，您可以在表单的第三部分中多取两个简单文本区域来给出一个整体视图。然后使用Hobby One的文本自定义“元素标签”。

您必须分别使用爱好二和爱好三的名称自定义其余两个字段。然后看一下这个界面的预览。

在页面底部，您可以提供条款和条件字段以完成整个过程。然后我们可以查看提交表单的整个过程。

现在，看看终极预览。

这就是您可以使用WP Fluent Form创建多步骤表单的方法。使用WP Fluent Form非常方便和有效，因为它为您提供了最方便的功能，可以制作多步骤表单来满足您的特定目的。

要利用此功能并创建美观、紧凑且直观的多步骤表单，请立即下载WP Fluent Form Pro 插件！

请订阅我们的 YouTube 频道以获取与 WordPress 相关的提示和技巧。另外，请在 Twitter 和 Facebook 上关注我们。