分步表单_创建多步骤表单的分步指南

分步表单

最近，我想在我的网站上添加一个多步骤表单。 由于我的站点在静态页面生成器Hexo上运行，因此我对如何执行此任务有些疑问。 我的网站上已经有一个静态表单，我不想花太多时间在功能开发上，例如步骤，显示/隐藏逻辑或验证。

我很高兴得知Kwes现在提供了多步骤表单功能 。 在告诉我如何做之前，让我们看看什么是多步骤表单，有时也称为多页面表单。

多步骤表格

多步骤表单是分解成多个片段的长形式。 这样做的原因是使表单更易于填写。 每个步骤代表彼此相关的分组输入，因此用户不会对表单的长度感到恐惧。 用户逐步填写信息可能会更方便，因为他们的想法当时应该处理较少的字段。

您可能在结帐或运送表格上看到了多步骤表格。 多步骤表单也用于诸如注册表单之类的向导，并且最近出现了多步登录表单。 这些只是使用它们时的常见方案，但是每一种较长的形式都可以分解成碎片。

在切换到多步骤表单之前，您可能需要进行A / B测试，以确保转化率不会下降。

转换率是多步骤表单的最大优势之一。 相信多步形式具有更好的转化率。 其他好处包括给用户留下不小的印象的第一印象，以及鼓励用户继续使用表格的进度条。

所有这些好处都应保留。 没有实数，您将无法确定。 对于许多用户而言，具有许多输入字段的单步表单通常被视为重大障碍。 作为一种折衷，您应该减少可能不理想的输入数量。

使用Kwes添加多步骤表单

Kwes文档使遵循和创建多步骤表单变得非常简单。

在此之前，让我们刷新一下内存， 如何使用Kwes添加静态表单 ：

• 从Kwes仪表板添加网站。
• 从Kwes仪表板添加表单。
• 在结束body标记之前添加所需的脚本标记： <script src="https://kwes.io/js/kwes.js"></script> 。
• 使用必需的kwes-form类添加wrapper元素。
• 添加form元素以及Kwes仪表板中提供的action URL。
• 添加input字段和验证规则。

现在看下面的代码：

< html >
  < body >
    < div class = "kwes-form" >
      < form method = "POST" action = "path/to/kwes" >
        // form code
      </ form >
    </ div >
    < script src = "https://kwes.io/js/kwes.js" >  </ script >
  </ body >
</ html >

为了启用多步骤表单，我已将multi-st