将自适应表单嵌入到AEM站点页面 embed-an-adaptive-form-to-aem-sites-page

版本
文章链接
AEM 6.5
单击此处
AEM as a Cloud Service
本文

概述 overview

AEM Forms允许表单开发人员将自适应Forms无缝嵌入到AEM Sites页面或AEM外部托管的网页中。 嵌入式自适应表单功能齐全,用户无需离开页面即可填写和提交表单。 它有助于用户保留在网页上其他元素的上下文中,同时与表单交互。 这允许您的用户方便地填写和提交表单,而无需离开他们所在的页面。 此集成提供了一种便捷的方式,可重复使用他们已创建的自适应Forms。

您可以使用AEM页面编辑器快速将多个表单嵌入到AEM Sites页面。 通过使用AEM页面编辑器,内容创作者可以使用自适应Forms组件的强大功能(包括动态行为、验证、数据集成、生成记录文档和业务流程自动化)在Sites页面中创建无缝的数据捕获体验。 它还允许您使用AEM Sites页面的各种功能,例如,版本控制、定位、翻译和多站点管理器。

AEM Forms提供 自适应表单容器自适应Forms — 嵌入(v2) 组件。 您可以使用 自适应Forms — 嵌入(v2) 组件,用于添加现有的自适应表单或使用自适应Forms编辑器创建表单,而 自适应表单容器 在体验片段或AEM Sites页面中创建新表单。

AEM Sites页面中的自适应表单示例

如何在AEM Sites页面或AEM Experience Fragment中创建或嵌入自适应表单? various-options-to-create-or-embed-an-adaptive-form-in-aem-sites-page-or-aem-experience-fragment

您可以使用以下选项来充分利用此功能:

  • 使用批准的模板创建自适应表单并将其嵌入到AEM Sites页面 您可以使用预批准的模板快速创建和嵌入符合您组织的品牌准则和设计标准的自适应Forms。

  • 将现有表单嵌入到AEM Sites页面 您可以将已创建的表单轻松集成到网站中,从而使访客能够直接与表单进行交互。

  • 将嵌入的自适应表单转换为体验片段 将添加到AEM Sites页面的嵌入式自适应表单转换为体验片段,以便在多个AEM Sites页面中重用表单。

  • 创建自定义自适应表单并将其添加到AEM Sites页面 您可以使用 自适应表单容器 从头开始构建全新表单的组件,根据您的要求和设计偏好对其进行定制。

  • 创建自定义自适应表单并将其添加到体验片段 您可以将表单添加到AEM体验片段中来扩展表单的影响范围,从而允许在多个页面或网站上无缝重用。

  • 将多个表单添加到AEM Sites页面或体验片段: 您可以在AEM Sites页面上创建或添加多个自适应Forms,以根据用户的偏好和要求为其提供多个选择。 您可以使用AEM页面编辑器快速将多个表单嵌入到AEM Sites页面。 您可以使用 自适应表单容器 多次组件,以在AEM Sites页面中添加自适应Forms。 您可以使用 自适应Forms — 嵌入 在AEM Sites页面中多次使用组件,仅当 表单覆盖框架的整个宽度 已选中选项。 如果 表单覆盖框架的整个宽度 选项未选中,AEM Sites页面仅支持一个不带iframe的自适应表单。 要添加更多自适应Forms,请使用 自适应Forms — 嵌入 组件,选择 表单覆盖框架的整个宽度 选项。

将自适应表单嵌入到AEM Sites页面或AEM Experience Fragment中的注意事项 consideration

  • 使用或添加表单时 自适应Forms — 嵌入(v2) 表单的翻译和本地化过程均采用AEM Forms翻译流程。 在这种情况下,Sites 页面的所有语言副本中会维护和引用一个表单。自适应Forms — 嵌入(v2) 组件不提供对AEM Sites页面的各种功能(如版本控制、定位、翻译和多站点管理器)的访问权限。

  • 当您使用 自适应表单容器 要创建表单,表单将通过AEM Sites翻译流程进行翻译和本地化。 对于每种语言,系统都会生成网站页面和相应表单的单独副本(语言副本),而当内容作者修改父页面上表单中的规则时,必须在该表单的所有语言副本中进行相同的更改。自适应表单容器 还允许您使用AEM Sites页面的各种功能,如,版本控制、定位、翻译和多站点管理器。

在AEM Sites页面或AEM Experience Fragment中嵌入自适应表单的要求 before-you-start-embedding-an-adaptive-form

在开始嵌入新的自适应表单或预先存在的自适应表单之前,使用 自适应Forms — 嵌入(v2),启用 自适应Forms核心组件 并添加 自适应Forms客户端库 转到您的AEM Sites页面:

为您的AEM Cloud Service环境启用自适应Forms核心组件
确保 AEM Forms as a Cloud Service 环境已启用自适应表单核心组件。
将自适应Forms客户端库添加到AEM Sites页面或体验片段

当表单覆盖页面的整个宽度时 选项已选中以下项中的 表单容器 由于使用了“配置”对话框和使用核心组件的自适应Forms,因此需要在相应的站点页面上包含客户端库。

选择表单涵盖页面整个宽度选项并使用带有核心组件的自适应表单时

添加 CustomheaderlibsCustomfooterlibs 使用部署管道将客户端库连接到AEM Sites页面。 要添加客户端库,请执行以下操作:

  1. 访问并克隆 AEM Cloud Service Git 存储库。

  2. 在计划文本编辑器中打开 AEM Cloud Service Git 存储库文件夹。例如,Microsoft® Visual Code。

  3. 打开 ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.html 文件并将以下代码添加到该文件中:

    code language-none
        //Customheaderlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
        </sly>
    
  4. 打开 ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.html 文件并将以下代码添加到该文件中:

    code language-none
        //customfooterlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
        </sly>
    
  5. 打开 ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.html 文件并将以下代码添加到该文件中:

    code language-none
        //Customheaderlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
        </sly>
    
  6. 打开 ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.html 文件并将以下代码添加到该文件中:

    code language-none
        //customfooterlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
        </sly>
    
  7. 运行部署管道,将客户端库部署到 AEM as a Cloud Service 环境。

启用 自适应Forms — 嵌入(v2) 用于您的AEM Sites页面或体验片段

要启用 自适应Forms — 嵌入(v2) 组件时,请执行以下步骤:

  1. 打开AEM Sites页面或体验片段进行编辑。 要打开页面进行编辑,请选择该页面,然后单击 编辑.
  2. 打开站点或体验片段页面的模板。 要打开模板,请转到​ 页面信息 页面信息 > 编辑模板。 它会在模板编辑器中打开相应的模板。
  3. 在结构视图中,单击菜单栏中的​ 策略 策略 图标。在 允许的组件 列出并选择 自适应Forms — 嵌入(v2) 复选框 [AEM原型项目名称] — 自适应表单.
  4. 单击​ 完成
embed

https://video.tv.adobe.com/v/3419369?quality=12&learn=on

使用自适应Forms — 嵌入(v2)组件嵌入自适应表单 embed-an-adaptive-form-in-sites-editor-or-experience-fragment

使用 自适应Forms — 嵌入(v2) 使用“表单创建向导”直接在AEM Sites编辑器中创建自适应表单的组件。 生成的表单将另存为外部实体,以便在其他Sites页面和独立表单中重复使用。 您可以直接从头开始在AEM Sites页面或体验片段中嵌入全新表单,根据您的要求和设计偏好设置专门定制表单。 对于一次性表单,建议直接创作到AEM Sites页面,而体验片段则适用于必须在网站上的多个页面中重用的表单。

您可以使用轻松嵌入新表单 自适应Forms — 嵌入(v2). 例如,设想将新的联系我们表单合并到AEM Sites页面或AEM体验片段中。 对AEM Sites页面或体验片段中的联系人表单所做的任何更新或修改都会自动应用于部署该表单的所有页面。 这简化了对网站表单的管理,确保在简化整体过程的同时提供无缝的用户体验。

使用 自适应Forms — 嵌入(v2),您可以:

“在AEM Sites中使用‘自适应Forms’向导嵌入新表单”页 embed-form-using-adaptive-form-wizzard-aem-sites

将新表单嵌入到AEM Sites页面的步骤如下:

  1. 以编辑模式打开 AEM Sites 页面。

  2. 在组件浏览器面板中,拖放 自适应Forms — 嵌入(v2) 组件。

  3. 单击 加号 图标后,您将被重定向到表单创建向导。

    自适应Forms — 嵌入组件

  4. 创建新的自适应表单 表单创建 向导。
    资产路径 已包含所创建自适应表单的路径

  5. 保存设置。 现在,自适应表单已嵌入到页面中。

接下来,您可以 设置提交操作 使用表单创建向导创建嵌入式自适应表单的高级属性。

在体验片段中使用“自适应Forms向导”嵌入新表单 embed-form-using-adaptive-form-wizzard-experience-fragment

将新表单嵌入到体验片段的步骤如下:

  1. 在编辑模式下打开体验片段。

  2. 在组件浏览器面板中,拖放 自适应Forms — 嵌入(v2) 组件。

  3. 单击 加号 图标后,您将被重定向到表单创建向导。

    自适应Forms — 嵌入组件

  4. 创建新的自适应表单 表单创建 向导。
    资产路径 已包含所创建自适应表单的路径

  5. 保存设置。 自适应表单现在嵌入到体验片段中。

接下来,您可以 设置提交操作 使用表单创建向导创建嵌入式自适应表单的高级属性。

在AEM Sites页面中嵌入现有的自适应表单 embed-an-adaptive-form-in-sites-editor

使用 自适应Forms — 嵌入(v2) 将预先存在的自适应表单轻松集成到AEM Sites中的页面中。 此功能显着增强了自适应Forms的适应性和可重用性,为客户提供了重用他们已创建的表单的便捷方式。 例如,设想将联系人表单合并到AEM Sites页面,而无需多次重新创建表单。

要将现有的自适应表单嵌入到站点页面中,请执行以下操作:

  1. 以编辑模式打开 AEM Sites 页面。
  2. 拖放 自适应Forms — 嵌入(v2) 组件从组件浏览器转到站点页面。
  3. 选择 自适应Forms — 嵌入 组件,然后选择 自适应表单容器属性 在操作栏上。 此 编辑自适应Forms — 嵌入(v2) 对话框打开。
  4. 浏览并选择要嵌入到中的自适应表单 资产路径.
  5. 保存设置。 现在,自适应表单已嵌入到页面中。

接下来,您可以 设置提交操作 使用表单创建向导创建嵌入式自适应表单的高级属性。

将现有的自适应表单嵌入到体验片段中 embed-an-adaptive-form-in-experience-fragment

您还可以通过将表单嵌入到AEM体验片段来扩展表单的辅助功能。 要在体验片段中嵌入自适应表单,请执行以下操作:

  1. 在编辑模式下打开体验片段。
  2. 拖放 自适应Forms — 嵌入(v2) 从组件浏览器到体验片段的组件。
  3. 选择 自适应Forms — 嵌入 体验片段中的组件并选择 自适应表单容器属性 在操作栏上。 此 编辑自适应Forms — 嵌入(v2) 对话框打开。
  4. 浏览并选择要嵌入到中的自适应表单 资产路径.
  5. 保存设置。 自适应表单现在嵌入到体验片段中。

接下来,您可以 设置提交操作 使用表单创建向导创建嵌入式自适应表单的高级属性。

将AEM Sites页面中的表单转换为体验片段 convert-an-adaptive-form-in-sites-page-to-an-experience-fragment

您可以在站点页面编辑器中将现有的自适应表单转换为体验片段,以在多个页面或站点中重用该表单。

要将AEM Sites页面中的自适应表单转换为体验片段,请执行以下操作:

  1. 在编辑模式下打开包含自适应表单的AEM Sites页面(在自适应Forms容器组件中)。

  2. 打开内容树,然后选择 自适应Forms容器 ,用于托管您的自适应表单。 一个AEM Sites页面可以托管多个自适应Forms。 因此,请仔细选择正确的自适应Forms容器。

  3. 在菜单栏上,选择 “转换为体验片段变量”图标 “转换为体验片段变量”图标。

    单击文件柜徽标可将AEM Sites中的自适应表单页面转换为体验片段

    出现一个对话框,用于将自适应表单容器转换为新的体验片段或添加到现有的体验片段。

  4. 转换为体验片段 变体对话框中,为以下选项设置值:

    • 操作: 选择以创建体验片段或添加到现有体验片段。
    • 父级路径: 指定要承载体验片段的文件夹的路径。 选项仅适用于创建新体验片段。
    • 模板: 指定体验片段模板的路径。 如果您没有体验片段模板, 创建它. 选项仅可用于将自适应表单添加到现有体验片段。
    • 片段标题: 指定体验片段的标题。 标题唯一标识体验片段。
    • 片段标记: 指定体验片段的标记。 标记唯一标识体验片段的类别。

配置自适应表单嵌入(v2)属性

您可以自定义的 自适应表单 — 嵌入(v2) 组件。 在 编辑自适应Forms — 嵌入 对话框,您可以指定以下内容:

  • 资产路径:浏览并选择要嵌入的自适应表单。 如果您将其从资产浏览器中删除,则会自动填充该变量。

  • 帖子提交 :选择在表单提交时触发的操作。 您可以选择显示感谢消息或感谢页面。

    • 显示感谢信息:使用富文本编辑器编写消息以在表单提交时显示。 仅当您选择显示感谢消息时,此选项才可用。
    • 显示感谢页面:浏览并选择要在表单提交时显示的页面。 仅当您选择显示感谢页面时,此选项才可用。
    • 重定向到感谢页面:启用选项,将包含嵌入的自适应表单的页面替换为感谢页面。 否则,“感谢”页面将取代 自适应Forms — 嵌入(v2) 组件,无需刷新页面的基础站点。 仅当您选择显示感谢页面时,此选项才可用。
    • 感谢消息:成功提交表单后屏幕上显示的简短确认或确认。
    • “感谢”页面:浏览并选择成功提交表单后显示的页面。
  • 使用页面语言:使用AEM Sites页面的本地,而不是自适应表单的区域设置。 此选项仅适用于自适应表单(Foundation)。

  • 设置专注于表单:选择以将焦点设置为自适应表单的第一个字段。 此选项仅适用于自适应表单(Foundation)。

  • 主题:选择用于定义自适应表单组件样式的主题。 样式设置包括外观属性,如字体样式、背景颜色、尺寸和对齐方式。 此选项仅适用于自适应表单(Foundation)。

    note note
    NOTE
    您可以使用 使用页面语言设置专注于表单主题 仅自适应表单(Foundation)的选项。
  • 表单覆盖框架的整个宽度:内联框架(iframe)是一个HTML元素,用于将自适应表单加载到AEM Sites页面。

    • 如果 表单覆盖框架的整个宽度 如果选中复选框,则自适应表单会占据其所在的容器的整个宽度。 在这种情况下,不使用iframe呈现表单。 自适应表单的布局和设计可适应容器的整个宽度,使其响应速度快并可根据不同的屏幕大小进行调整。 利用此选项,您可以在AEM Sites页面中嵌入多个自适应Forms。

      note note
      NOTE
      要在AEM Sites页面中嵌入多个表单,请选择 表单覆盖框架的整个宽度 复选框。
    • 如果 表单覆盖框架的整个宽度 复选框未选中,自适应表单不会覆盖容器的整个宽度。 而是使用iframe呈现表单,该表单不能扩展到超过特定宽度。 当自适应表单具有明确的边界并且必须在容器中与其旁边的其他AEM组件共存时,此方法很有用。 如果未选中此选项,则仅允许在AEM Sites中嵌入一个不带iframe的自适应Forms。

      note note
      NOTE
      AEM Sites页面仅支持一个不带iframe的自适应表单。 要添加更多自适应Forms,请使用 自适应Forms — 嵌入 组件,选择 表单覆盖框架的整个宽度 选项。
  • 高度:指定容器的高度。 将其留空可自动调整容器大小。

  • CSS客户端库:指定CSS客户端库的路径。

发布嵌入式自适应表单 publishing-embedded-adaptive-form

让我们考虑以下在AEM Sites页面中发布嵌入式自适应表单的场景:

  • 如果您是首次发布AEM站点页面,并且它包含嵌入的自适应表单,请发布站点页面和嵌入的资产。
  • 如果您在发布的站点页面中仅修改了嵌入的自适应表单,请发布原始资产,所做的更改会反映在发布的站点页面中。 已发布的站点页面包含对资产的引用,因此无需重新发布页面。
  • 如果您修改了站点页面和嵌入的自适应表单,请重新发布站点页面和嵌入的资产。

修改嵌入式自适应表单 modifying-embedded-adaptive-form

要修改嵌入式自适应表单的任何配置或属性,请执行以下操作之一。

  • 在相应的编辑器中打开自适应表单中的原始表单,并修改它们。
  • 在编辑模式下从网站页面中选择自适应表单,然后选择 在新窗口中编辑. 原始表单在编辑模式下打开,您可以修改该模式。
NOTE
在原始自适应表单中所做的更改将自动反映在嵌入表单中。 但是,重新发布自适应表单或站点页面,以反映已发布页面中的更改。

最佳实践 best-practices

在AEM Sites页面中嵌入自适应Forms时,请牢记以下几点:

  • 原始表单中的页眉和页脚未包含在嵌入表单中。
  • 支持用户草稿和提交嵌入表单,这些草稿和提交表单会显示在Forms Portal的“草稿”和“已提交的Forms”选项卡中。
  • 在原始表单上配置的提交操作将保留在嵌入表单中。
  • 如果您已为原始表单配置了Adobe Analytics,则会在Adobe Analytics中捕获嵌入表单的分析数据。 但是,它在Forms Analytics报表中不可用。

另请参阅 see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab