创建您的第一个自适应表单

01-create-first-adaptive-form-hero-image

简介

您是否在寻找一种适合移动设备的​表单体验,以简化注册、提高参与度并缩短周转时间,自适应表单​是您的绝佳选择。 自适应表单提供移动、自动化和分析友好的表单体验。 您可以轻松构建具有响应性和交互性的表单,使用自动化流程减少管理和重复性任务,使用数据分析来改进和个性化客户对表单的体验。

本教程提供了用于创建自适应表单的端到端框架。 本教程分为一个用例和多个指南。 每个指南都可以帮助您学习并向在本教程中创建的自适应表单添加新功能。 您在每个指南之后都有一个有效的自适应表单。 有关如何创建自适应表单的指南。 随后的指南即将推出。 在本教程的结尾,您将能够:

  • 创建自适应表单和表单数据模型。
  • 设置自适应表单的样式。
  • 使用自适应表单规则编辑器构建业务规则。
  • 测试并发布自适应表单。

创建适应表单工作流

旅程开始了如何学习使用案例:

网站为不同的客户优惠各种产品。 客户浏览门户,选择并订购产品。 每个客户都创建一个帐户并提供送货和账单地址。 现有客户萨拉·罗斯正在寻找将其送货地址添加到网站。 该网站提供一个在线表单,用于添加和更新送货地址。

该网站在Adobe Experience Manager(AEM)上运行,并使用AEM Forms进行数据捕获和处理。 地址添加和更新表单是一种自适应表单。 网站将客户详细信息存储在数据库中。 他们使用地址添加和更新表单来检索和显示可用地址。 他们还使用自适应表单接受更新的地址和新地址。

先决条件

  • 设置AEM作者实例。

  • 在创作实例上安装AEM Forms add-on

  • 从数据库提供程序获取JDBC数据库驱动程序(JAR文件)。 本教程中的示例基于MySQL数据库,并使用Oracle的MySQL JDBC数据库驱动程序

  • 设置一个包含客户数据的数据库,其中字段如下所示。 数据库不是创建自适应表单的必备工具。 本教程使用数据库来显示AEM Forms的表单数据模型和持久性功能。

adaptiveformdata

第1步:创建自适应表单

03-create-adaptive-form-main-image_small_new

自适应表单是新一代、引人入胜、响应迅速、动态且自适应的表单。 利用自适应表单,您可以提供个性化、有针对性的体验。 AEM Forms提供拖放式WYSIWYG编辑器以创建自适应表单。 有关自适应表单的详细信息,请参阅创作自适应表单的简介

目标:

  • 创建允许客户添加发货地址的自适应表单

  • 用于显示和接受客户信息的自适应表单的布局字段

  • 创建提交操作以发送包含表单内容的电子邮件

  • 预览并提交自适应表单

    see-the-guide-sm

第2步:创建表单数据模型

05-create-form-data-model-main_small

表单数据模型允许将自适应表单连接到不同的数据源。 例如,AEM用户用户档案、RESTful Web服务、基于SOAP的Web服务、OData服务和关系型数据库。 表单数据模型是业务实体和在连接数据源中可用服务的统一数据表示模式。 您可以将表单数据模型与自适应表单一起使用,以检索、更新、删除数据并将数据添加到连接的数据源。

目标:

  • 将网站的数据库实例(MySQL数据库)配置为数据源

  • 使用MySQL数据库作为数据源创建表单数据模型

  • 添加数据模型对象以形成数据模型

  • 为表单数据模型配置读和写服务

  • 测试表单数据模型和配置有测试数据的服务

    see-the-guide-sm

第3步:将规则应用于自适应表单域

07-apply-rules-to-adaptive-form_small

自适应表单提供了一个编辑器,用于在自适应表单对象上编写规则。 这些规则根据预设条件、用户输入和用户对表单的操作定义对表单对象触发的操作。 它有助于确保准确性并加快表单填写体验。

目标:

  • 创建规则并将其应用于自适应表单域
  • 使用规则触发表单数据模型服务以将数据更新到数据库

第4步:设置自适应表单的样式

09-Style-your-adaptive-form_small

自适应表单提供主题和编辑器,以创建自适应表单的主题。 主题包含组件和面板的样式详细信息,并且您可以以不同的表单重复使用主题。 样式包括背景颜色、状态颜色、透明度、对齐方式和大小等属性。 将主题应用于表单时,指定的样式会反映在表单的相应组件上。 自适应表单还支持特定于表单的样式的串联样式。

目标:

  • 将开箱即用主题应用于自适应表单

  • 使用主题编辑器为自适应表单创建主题

  • 在自定义主题中使用Web字体

    see-the-guide-sm

第5步:测试自适应表单

11-test-your-adaptive-form

自适应表单是客户互动的必备工具。 测试自适应表单时,请务必进行每次更改。 测试表单的每个字段很繁琐。 AEM Forms提供SDK(Calvin SDK)以自动测试自适应表单。 Calvin允许您在Web浏览器中自动测试自适应表单。

目标:

  • 安装Calvin SDK
  • 为更改地址表单创建测试套件和测试用例

要了解SDK,请参阅使用AEM自适应表单的自动测试

第6步:发布自适应表单

12-publish-your-adaptive-form-small

您可以将自适应表单发布为独立表单(单页应用程序),包括在AEM 站点页面中,或使用Forms Portal在AEM站点上发布列表。

目标:

  • 将自适应表单作为单页应用程序发布

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now