创作自适应表单简介

注意

AEM 6.4已结束扩展支持，本文档将不再更新。 有关更多详细信息，请参阅 技术支助期. 查找支持的版本 此处.

概述

自适应表单允许您创建引人入胜、响应式、动态且自适应的表单。 AEM Forms提供了直观的用户界面和现成的组件，用于创建和使用自适应表单。 您可以选择基于表单模型或架构创建自适应表单，也可以选择不使用表单模型。 请务必仔细选择不仅符合您的要求，而且可扩展现有基础设施投资和资产的表单模型。您可以从以下选项中进行选择，以创建自适应表单：

  • 使用表单数据模型
    数据集成 允许您将来自不同数据源的实体和服务集成到表单数据模型中，以用于创建自适应表单。 如果要创建的自适应表单涉及从多个数据源获取数据并将数据写入多个数据源，请选择表单数据模型。

  • 使用 XDP 表单模板
    如果您投资于基于 XFA 的表单或 XDP 表单，那么这将是理想的表单模型。它提供了一种将基于XFA的表单转换为自适应表单的直接方法。 任何现有的XFA规则都将保留在关联的自适应表单中。 生成的自适应表单支持XFA构建，如验证、事件、属性和模式。

  • 使用 XML 架构定义 (XSD) 或 JSON 架构
    XML 和 JSON 架构代表组织中的后端系统在其中生成或使用数据的结构。您可以将架构与自适应表单相关联，并使用其元素向自适应表单添加动态内容。 创作自适应表单时，架构的元素将可用在内容浏览器的“数据模型对象”选项卡中。

  • 不使用表单模型或不使用表单模型

使用此选项创建的自适应表单不使用任何表单模型。 从此类表单生成的数据 XML 具有带字段和相应值的平面结构。

有关创建自适应表单的更多信息，请参阅 创建自适应表单.

自适应表单创作UI

用于创作自适应表单的触屏优化UI是直观的，它提供：

  • 拖放功能
  • 标准表单组件
  • 集成的资产存储库

创建新自适应表单或编辑现有自适应表单时，可使用以下UI元素：

自适应表单创作UI

A. 侧栏 B. 页面工具栏 C. 自适应表单页面

侧栏可让您：

  • 查看面板、组件、字段和布局等表单内容。

  • 编辑组件属性。

  • 在您的 AEM 数字资产管理 (DAM) 存储库中搜索、查看和使用资产。

  • 在表单上添加组件。

    侧栏
    单击放大

A. 内容浏览器 B. 属性浏览器 C. 资产浏览器 D. 组件浏览器

侧栏包含以下浏览器：

  • 内容浏览器

    在内容浏览器中，您可以看到

    • 表单对象

      显示表单的对象层次结构。 作者可以通过在表单对象树中点按特定表单组件来导航到该组件。作者可以从该树中搜索对象并重新排列它们。

    • 数据模型对象

      用于查看表单模型层次结构。

      它允许您在自适应表单上拖放表单模型元素。 已添加的元素会自动转换为表单组件，同时保留其原始属性。当表单使用 XML 架构、JSON 架构或 XDP 模板时，您会看到数据模型对象。

  • 属性浏览器

    可让您编辑组件的属性。属性根据组件而变化。要查看自适应表单容器的属性，请执行以下操作：

    选择一个组件，然后点按 字段级别 > 自适应表单容器，然后点按 cppr.

  • 资产浏览器

    使不同类型的内容分离开来，例如图像、文档、页面、电影等。

  • 组件浏览器

    包括可用于构建自适应表单的组件。 您可以将组件从拖动到自适应表单上以添加表单元素，并根据要求配置添加的元素。 下表描述了组件浏览器中列出的组件。

组件 功能
Acrobat Sign块 为使用Acrobat Sign进行签名时要填充的字段添加带占位符的文本块。
按钮 添加一个按钮，可配置该按钮以执行保存、重置、下一步、上一步等操作。
验证码 使用 Google reCAPTCHA 服务添加验证码验证。有关详细信息，请参阅 在自适应表单中使用CAPTCHA.
图表 添加一个图表，您可以在自适应表单和文档中使用该图表，以便在可重复面板和表行中直观地表示二维数据。
复选框 添加复选框。
数据输入字段 在您的表单中使用日期输入字段组件，让客户分别在三个框中填写日、月和年。您可以自定义组件的外观，并更改日期格式。例如，您可以让客户以 MM/DD/YYYY 或 DD/MM/YYYY 格式输入日期。
日期选取器 添加日历字段以选择日期。
文档片段 可让您添加通信的可重用组件。
文档片段组 可让您添加一组相关的文档片段，可以在信件模板中将这些片段用作一个单元。
下拉列表 添加下拉列表 – 单选或多选
电子邮件

添加字段以捕获电子邮件地址。默认情况下，电子邮件组件使用以下正则表达式来验证电子邮件地址。

^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$
文件附件

添加一个按钮，可让用户浏览支持文档并将其附加到表单。

注意： 文件附件组件支持在为Acrobat Sign启用的自适应表单中预定义的一组文件格式。 有关更多信息，请参阅支持的文件格式。
文件附件列表 添加一个字段，该字段将列出使用文件附件组件上传的所有附件。
页脚
 添加通常包括公司徽标、表单标题和摘要的页面标题。
页眉 添加通常包括版权信息和指向其他页面的链接的页脚。
图像 可让您插入图像。
图像选择 可让您的客户选择图像以提供信息。您可以使用这些信息向您的客户提供个性化服务。
“下一个”按钮 添加按钮以导航到表单中的下一面板。
数值框 添加用于捕获数值的字段
数值步进器 在您的表单中使用数值步进器以让您的客户输入一个数值，他们可以根据预定义的步骤增大或减小该数值。
面板

添加面板或子面板。

您还可以使用添加子面板按钮从父面板工具栏添加面板组件。同样，您可以使用添加面板工具栏按钮来添加特定于面板的工具栏。您可以使用“编辑面板”对话框配置面板工具栏的位置。
密码框 添加用于捕获密码的字段。
“上一个”按钮 添加一个按钮，用户需要使用该按钮来返回上一个页面或面板。
单选按钮 添加单选按钮。
“重置”按钮 添加按钮以重置表单字段。
“保存”按钮 添加按钮以保存表单数据。
连笔签名 添加用于捕获连笔签名的字段。
分隔符 在表单中启用面板的可视分离。
签名步骤 显示表单中提供的信息以及供用户用来验证和签署表单的签名字段。
文本 可让您指定静态文本。
“提交”按钮 添加提交按钮以将表单提交到配置的提交操作。
摘要步骤 提交表单并显示作者在提交表单后指定的摘要文本。
开关 添加用于执行切换或启用/禁用操作的开关。您无法在开关组件中添加两个以上的选项。由于开关只能有两个值：“开”或“关”，因此“强制”不适用。不管用户输入如何，至少保存一个值。
表 添加表格以便按行和列整理数据。
电话

添加字段以捕获电话号码。电话组件可让作者配置下列电话号码类型之一。每种类型均与一个用于验证的默认正则表达式关联。

  • 类型“国际”由 ^[+][0-9]{0,14}$ 进行验证。
  • 类型“USPhoneNumber”由 {'+1 ('999') '999-9999} 进行验证。
  • 类型“UKPhoneNumber”由 text{'+'99 999 999 9999} 进行验证。
  • 类型“自定义”不提供默认验证模式。它采用最后选择的电话号码类型的值。您也可以指定建自己的自定义验证模式。
条款和条件
 添加一个字段，作者可使用该字段指定用户在填写表单之前要查看的条款和条件。
文本框

添加一个文本框，用户可以在其中指定所需的信息。

默认情况下，文本框组件只接受纯文本。您可以启用文本框组件以接受富文本。支持富文本的文本组件提供了用于添加标题、更改字符样式（将字符设为粗体、将字符设为斜体、为字符加下划线）、创建有序列表和无序列表、更改文本背景和文本颜色以及添加超链接的选项。要为文本框启用富文本，请在组件属性中启用允许富文本选项。
标题 指定自适应表单的标题。
验证步骤

添加占位符以显示已填好的表单供用户验证。

注意:包含验证组件的自适应表单不支持匿名用户。 此外，不建议在自适应表单片段中使用验证组件。

使用组件的最佳实践

使用自适应表单组件时要记住的一些最佳实践和要点如下：

  • 每个组件都具有可控制其外观和功能的关联属性。 要配置组件的属性，请点按组件，然后点按 cppr 用于在属性浏览器中打开组件属性。

  • 组件使用其元素名称进行标识。 点按 cppr，则可以通过更改 元素名称 字段值。 元素名称字段仅接受字母、数字、连字符(-)和下划线(_)。 不允许使用其他特殊字符，元素名称应以字母开头。

  • 只要表单上显示了自适应表单组件的标题，您就无需打开属性浏览器，即可在表单编辑器中修改内联自适应表单组件的标题属性。 为此，请执行以下操作：

    1. 点按以选择具有 标题 属性 隐藏标题 属性被禁用。
    2. 点按 aem_6_3_edit 以使标题可编辑。
    3. 修改标题并点按返回键，或点按组件外的任意位置以保存更改。 点按Esc键以放弃更改。

  • 某些自适应表单组件（如电子邮件和电话）包括现成的验证模式。 但是，您可以通过更新 验证模式 字段中的模式折叠面板。 有关默认验证的更多信息，请参阅上表中的组件描述。

  • 自适应表单字段（如数字框和电子邮件）可配置为包含专门的HTML5输入类型。 当这些字段集中在移动设备和平板电脑上时，键盘会在前面显示特定的字母、数字和字符，这些字段通常用于输入字段中的信息。 它有助于用户快速输入信息，而无需在键盘上的字符集之间切换。 要允许对组件进行专门输入，请启用 使用HTML类型编号 复选框。

  • 您可以启用文本框组件以接受富文本。要为文本框启用富文本，请启用 允许富文本 复选框。

  • 您可以启用文本框、电子邮件和电话组件，以根据浏览器自动填充设置中存储的信息自动填充名称、地址、信用卡、电话和电子邮件等字段的值。 要启用此功能，请选择 启用自动填充 在组件属性中，并选择 自动填充属性. 当用户填写自适应表单时，系统会从浏览器中的自动填充配置文件中或根据用户之前填充的值建议这些值。 请注意，如果用户浏览器中的自动填充设置处于打开状态，则可以使用自动填充。

  • 在中指定单选按钮和复选框项目的值 {value}={text} 格式。

  • 默认情况下，文件附件组件允许用户仅附加一个文件。 但是，您可以配置组件属性以支持多个附件。 此外，如果用户附加了多个文件名相同的文件，则附件可能会导致某些问题。 因此，建议在提交表单时为每个已提交的附件关联唯一标识符。 为此，请执行以下操作：

    1. 在AEM Forms服务器上，导航到 Adobe Experience Manager >工具>操作> Web Console.
    2. 查找并点按 自适应Forms配置服务.
    3. 在自适应Forms配置服务对话框中，启用 使文件名唯一. 默认情况下，该复选框处于禁用状态。

  • 要允许用户使用Safari浏览器附加PDF，请确保 application/pdf 将添加到文件附件组件的“受支持的文件类型”属性中。 使用以前的AEM Forms版本创建的自适应表单可能包含 .pdf 而不是 application/pdf （位于支持的文件类型属性中）。

有关自适应表单的更多最佳实践，请参阅 使用自适应表单的最佳实践.

注意

自适应表单组件不支持从右到左(RTL)语言。 例如，希伯来语。

页面工具栏

顶部的页面工具栏提供了各种选项，以便您能够预览表单、更改表单属性和编辑表单布局。您可以在创作表单时预览表单，并进行相应的更改。在页面工具栏中，您会看到：

  • 切换侧面板toggle-side-panel：可让您显示或隐藏侧栏。

  • 页面信息theme-options：可让您查看页面属性、发布/取消发布表单、启动表单工作流以及在经典 UI 中打开表单。

  • 模拟器ruler：可让您针对不同的显示尺寸（如平板电脑和手机）模拟表单外观。

  • 编辑:允许您选择其他模式，例如： 编辑、样式、开发人员、​和​设计.

    • Edit：可让您编辑表单及其组件的属性。例如，添加组件、删除图像和指定必填字段。

    • 样式：可让您设计表单组件的外观。例如，在样式模式下，您可以选择一个面板并指定其背景颜色。

    • 开发人员：可让开发人员：

      • 发现表单的组成部分。
      • 调试何时何地发生的情况，这反过来有助于解决问题。

    • 设计:允许您启用或禁用自定义组件，或未在侧栏中列出的现成组件。

  • 预览：可让您预览表单在发布时的外观。

组件工具栏

触屏 UI 中的组件工具栏

在选择一个组件时，将显示一个可用于使用该组件的工具栏。您可以获得用于剪切、粘贴、移动和指定组件属性的选项。您的选项包括：

A. 配置：在点按​配置​时，组件属性将显示在侧栏中。通过配置这些属性，您可以自定义数据捕获体验。您可以更改组件的元素名称，在组件的“标题”字段中指定标签文本。利用元素名称，可以捕获用户使用组件输入的值。在组件属性中，可以指定组件的行为，并管理用户输入。在侧栏中配置属性以捕获用户数据并将它用于进一步处理。自适应表单容器的属性允许您指定客户端库、布局、主题、记录文档设置、保存设置、提交设置和元数据设置。

B. 复制：可以使用复制选项来复制一个组件并将其粘贴到表格中的其他位置。粘贴组件时，粘贴的组件将获得一个新的元素名称，但保留已复制组件的属性。

C.剪切:您可以使用剪切选项在自适应表单中将组件从一个位置移动到另一个位置。

D. 删除：可让您从表单中删除组件。

E. 插入：可让您在选定组件的上方插入组件。

F. 粘贴：可让您粘贴使用上述选项剪切或复制的组件。

G. 编辑规则：可让您打开规则编辑器。有关更多信息，请参阅 规则编辑器.

H. 分组：可让您选择多个组件（如果要剪切、复制或粘贴多个组件）。

I 父项：可让您选择组件的父项。例如，文本字段位于子分区中，后者位于分区中。部分位于指南根面板中，自适应表单容器是指南根面板的父级。 对于组件，您会看到层级自下而上排序的所有选项。

例如，如果您点按文本框的​父项，则会看到：

  • 子分区
  • 分区
  • guideRootPanel
  • 自适应表单容器

J. 其他：提供更多选项来处理所选组件。

  • 查看 SOM 表达式
  • 将面板另存为片段（仅适用于面板）
  • 添加子面板（仅适用于面板）
  • 添加面板工具栏（仅适用于面板）
  • 替换（不适用于面板）

自适应表单页面

自适应表单页面是实际的表单。 它类似于任何其他建模为 WCM cq:Page 组件的 WCM 页面。下图显示了典型自适应表单的内容结构。

自适应表单WCM页面的内容结构

内容结构通常包含以下主要组件：

  • guideContainer:自适应表单的根，标记为 自适应表单的开始 在自适应表单UI中。 在此组件中，您可以指定：

    • 自适应表单的移动布局:定义表单在移动设备上的外观。
    • 感谢页面：定义用户在提交表单后被重定向到的页面。
    • 提交操作：定义用户提交表单后在服务器上处理表单的方式。
    • 样式：指定用于自定义表单外观的 CSS 文件的路径。

  • rootPanel:自适应表单的根面板。 它可以包含项目节点下的子面板。每个包含根面板的面板都可以有一个与之关联的布局。面板的布局指示表单的布局方式。例如，在折叠项布局*中， *其项目布局为折叠项步骤。

  • 工具栏:自适应表单容器具有与表单全局关联的全局工具栏。 可以使用编辑栏中的​添加工具栏​操作来添加此工具栏，这可让作者添加操作，例如提交、保存、重置等。

  • 资产:此节点包含用于表单创作的其他信息。 例如，表单模型详细信息、本地化详细信息等)。

在此页面上