创作自适应表单简介

概述

自适应表单使您能够创建具有吸引力、响应式、动态和自适应性的表单。 AEM Forms为创建和使用自适应表单提供了直观的用户界面和现成组件。 您可以选择基于表单模型或模式创建自适应表单,也可以不使用表单模型。 必须仔细选择不仅符合您的要求,而且扩展您现有的基础设施投资和资产的表单模型。 您可以从以下选项中进行选择,以创建自适应表单:

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

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

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

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

有关创建自适应表单的详细信息,请参阅创建自适应表单

自适应表单创作UI

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

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

在创建新表单或编辑现有自适应表单时,您使用以下UI元素:

自适应表单创作UI

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

侧栏允许您

  • 查看表单内容,如面板、组件、字段和布局。
  • 编辑组件属性。
  • 在AEM数字资产管理(DAM)存储库中搜索、视图和使用资产。
  • 在表单上添加组件。

侧栏

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

提要栏包含以下浏览器:

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

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

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

  • 属性浏览器

    允许您编辑组件的属性。 属性会根据组件而更改。 要查看自适应表单容器的属性,请执行以下操作:

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

  • 资产浏览器

    隔离不同类型的内容,如图像、文档、页面、影片等。

  • 组件浏览器

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

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

添加字段以捕获电子邮件地址。 默认情况下,电子邮件组件使用以下常规表达式验证电子邮件地址。

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

文件附件

添加一个按钮,用户可通过该按钮浏览支持文档并将其附加到表单。 可以将多个文件附加到文件附件组件。 您还可以在组件的属性浏览器中为附件指定​**最大文件大小**​和​**支持的文件类型**。

注意:

  • 该组件不支持附加文件,文件名以字符(.)开头,包含字符\ / :* ? " < > |% $,或包含为Windows操作系统(如nul、prn、con、lpt或com)保留的特殊文件名。
  • 要将多个文件附加到在Apple Safari浏览器中打开的文件附件组件,请逐个选择并附加文件。 不能同时选择并附加多个文件。
  • 文件附件组件支持为Adobe Sign启用的自适应表单中预定义的一组文件格式。 有关详细信息,请参阅支持的文件格式

文件附件列表 添加一个字段,用于列表使用文件附件组件上传的所有附件。
标题
添加页面标题,该标题通常包括公司徽标、表单标题和摘要。
页脚 添加页脚,页脚通常包括版权信息和指向其他页面的链接。
图像 允许插入图像。
图像选择 允许客户选择要提供信息的图像。 您可以使用这些信息为客户提供个性化服务。
“下一个”按钮 添加一个按钮,以导览至表单中的下一个面板。
数值框 添加用于捕获数值的字段
数值步进器 在表单中使用Numeric Stepper让客户输入数字值,客户可以根据预定义的步骤增加或减少该值。
面板

添加面板或子面板。

您还可以使用添加子面板按钮从父面板工具栏添加面板组件。 同样,您也可以使用添加面板工具栏按钮添加面板特定工具栏。 您可以使用“编辑面板”对话框配置面板工具栏的位置。

密码框 添加用于捕获口令的字段。
“上一个”按钮 添加用户需要返回上一页或面板的按钮。
单选按钮 添加单选按钮。
重置按钮 添加用于重置表单域的按钮。
保存按钮 添加用于保存表单数据的按钮。
连笔签名 添加用于捕获涂抹签名的字段。
分隔符 启用表单中面板的可视隔离。
签名步骤 显示表单中提供的信息以及用于验证和签署表单的用户签名域。
文本 允许您指定静态文本。
提交按钮 添加提交按钮,以将表单提交到已配置的提交操作。
摘要步骤 提交表单并显示提交表单后作者指定的摘要文本。
切换 添加执行切换或启用/禁用操作的开关。 在Switch组件中不能添加两个以上的选项。 由于交换机只能有两个值:“开”或“关”,“强制”不适用。 无论用户输入如何,都保存至少一个值。
添加表格以便按行和列整理数据。
电话

添加一个字段以捕获电话号码。 电话组件允许作者配置以下电话号码类型之一。 每种类型都与验证的默认常规表达式关联。

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

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

默认情况下,文本框组件仅接受纯文本。 您可以启用文本框组件以接受富文本。 启用富文本的文本组件提供了添加页眉、更改字符样式(粗体、斜体、为字符加下划线)、创建有序和无序列表、更改文本背景和文本颜色以及添加超链接的选项。 要为文本框启用富文本,请在组件属性中启用允许富文本选项。

标题 指定自适应表单的标题。
验证步骤

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

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

使用组件的最佳实践

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

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

  • 组件使用其元素名称进行标识。 点按cmppr时,可以通过更改属性浏览器中的​元素名称​字段值来更改组件的名称。 元素名称字段仅接受字母、数字、连字符(-)和下划线(_)。 不允许使用其他特殊字符,元素名称应以字母开头。

  • 只要标题在表单上可见,您就可以在表单编辑器中在行中修改自适应表单组件的标题属性,而无需打开属性浏览器。 为此,请执行以下操作:

    1. 点按以选择具有​Title​属性且其​Hide title​属性已禁用的组件。

    2. 点按aem_6_3_edit以使标题可编辑。

    3. 修改标题并点按返回键,或点按组件外的任意位置以保存更改。 点按Esc键可放弃更改。

  • 某些自适应表单组件(如电子邮件和电话)包括现成的验证模式。 但是,您可以通过更新组件属性中“模式”折叠面板下的​验证模式​字段来指定自定义验证。 有关默认验证的详细信息,请参阅上表中的组件说明。

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

  • 您可以启用文本框组件以接受富文本。 要为文本框启用富文本,请启用组件属性中的​允许富文本​复选框。

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

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

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

    1. 在AEM Forms服务器上,导航到​Adobe Experience Manager > 工具 > 操作 > Web控制台
    2. 查找并点按​自适应Forms配置服务
    3. 在“自适应Forms配置服务”对话框中,启用​使文件名唯一。 默认情况下,它处于禁用状态。
  • 要使用户能够使用Safari浏览器附加PDF,请确保将​application/pdf​添加到“文件”附件组件的“支持的文件类型”属性中。 使用先前AEM Forms版本创建的自适应表单可能包含“支持的文件类型”属性中的​.pdf​而不是​application/pdf

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

注意

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

页面工具栏

顶部的页面工具栏提供了一些选项,通过这些选项可以预览表单、更改表单属性和编辑表单布局。 您可以在创作表单时预览表单,并相应地进行更改。 在页面工具栏中,您会看到:

  • 切换侧 面板切换侧面板:允许您显示或隐藏提要栏。

  • 页面 信息主题选项:允许您视图页面属性、发布/取消发布表单、开始表单工作流,以及在经典UI中打开表单。

  • 拟器标尺:可让您针对平板电脑和手机等不同的显示尺寸模拟表单的外观。

  • 编辑:允许您选择其他模式,例如: 编辑样式​发 人员​和设计。

    • 编辑:允许您编辑表单及其组件的属性。例如,添加组件、删除图像以及指定必填字段。

    • 样式:允许您设置表单组件外观的样式。例如,在样式模式下,您可以选择面板并指定其背景颜色。

    • 开发人员:允许开发人员:

      • 了解表单的组成。
      • 在何时何地调试发生的情况,这反过来有助于解决问题。
    • 设计. 允许您启用或禁用未列在提要栏中的自定义组件或现成组件。

  • 预览:允许您预览表单在发布时的外观。

组件工具栏

触屏UI中的组件工具栏

当您选择组件时,您会看到一个工具栏,通过该工具栏可以处理组件。 您可以选择剪切、粘贴、移动和指定组件的属性。 您的选择是:

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

B.复制:您可以使用复制选项来复制组件并将其粘贴到表单的其他位置。 粘贴组件时,粘贴的组件将获得新元素名称,但保留复制的组件的属性。

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

D.删除:允许您从表单中删除组件。

E.插入:允许您在选定组件上方插入组件。

F.粘贴:允许您使用上述选项粘贴您剪切或复制的组件。

G.编辑规则:允许您打开规则编辑器。 有关详细信息,请参阅规则编辑器

H.:如果要剪切、复制或粘贴多个组件,可选择多个组件。

我。父项:允许您选择组件的父项。 例如,文本字段位于位于位于某个部分的子部分内。 该部分位于引导根面板中,自适应表单容器是引导根面板的父项。 对于组件,您可以看到所有选项,这些选项的层次结构从底部向上排序。

例如,如果点按​Parent​以查找文本框,您可以看到:

  • 分节
  • 区域
  • guideRootPanel
  • 自适应表单容器

J.其他:提供更多选项以使用选定的组件。

  • 视图 SOM表达式
  • 将面板另存为片段(仅限面板)
  • 添加子面板(仅限面板)
  • 添加面板工具栏(仅适用于面板)
  • 替换(不适用于面板)

自适应表单页

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

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

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

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

    • 自适应表单的移动布局:定义表单在移动设备上的外观。
    • 感谢页面:定义提交表单后用户被重定向的页面。
    • 提交操作:定义用户提交表单后在服务器上处理表单的方式。
    • 样式:指定用于自定义表单外观的CSS文件的路径。
  • rootPanel: 自适应表单的根面板。它可以在项目节点下包含子面板。 每个包含根面板的面板都可以具有与其关联的布局。 面板的布局指示表单的布局。 例如,在Accordion布局中,其项目将布局为Accordion步骤。

  • 工具栏: 自适应表单容器具有一个关联的全局工具栏,该工具栏是表单的全局工具栏。可以使用编辑栏中的​添加工具栏​操作添加此工具栏,通过此操作,作者可以添加提交、保存、重置等操作。

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

在此页面上

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