将自适应表单嵌入到AEM站点页面 embed-an-adaptive-form-to-aem-sites-page
概述 overview
AEM Forms允许表单开发人员将自适应Forms无缝嵌入到AEM Sites页面或AEM外部托管的网页中。 嵌入式自适应表单功能齐全，用户无需离开页面即可填写和提交表单。 它有助于用户保留在网页上其他元素的上下文中，同时与表单交互。 这允许您的用户方便地填写和提交表单，而无需离开他们所在的页面。 此集成提供了一种便捷的方式，可重复使用他们已创建的自适应Forms。
您可以使用AEM页面编辑器快速将多个表单嵌入到AEM Sites页面。 通过使用AEM页面编辑器，内容创作者可以使用自适应Forms组件的强大功能（包括动态行为、验证、数据集成、生成记录文档和业务流程自动化）在Sites页面中创建无缝的数据捕获体验。 它还允许您使用AEM Sites页面的各种功能，例如，版本控制、定位、翻译和多站点管理器。
AEM Forms提供 自适应表单容器 和 自适应Forms — 嵌入(v2) 组件。 您可以使用 自适应Forms - Embed(v2) 组件添加现有的自适应表单或使用自适应Forms编辑器创建表单，同时使用 自适应表单容器 在体验片段或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页面或体验片段： 您可以创建多个自适应Forms或将多个自适应表单添加到AEM Sites页面，以根据用户的偏好和要求为其提供多个选择。 您可以使用AEM页面编辑器快速将多个表单嵌入到AEM Sites页面。 您可以多次使用 自适应表单容器 组件以在AEM Sites页面中添加自适应Forms。 只有在选择了 Form覆盖整个框架 选项的情况下，您才能在AEM Sites页面中多次使用 自适应Forms - Embed 组件。 如果未选中 表单涵盖帧 的整个宽度，则AEM Sites页面仅支持一个不带iframe的自适应表单。 要使用 自适应Forms - Embed 组件添加更多自适应Forms，请选择 表单涵盖整个框架 选项。
将自适应表单嵌入到AEM Sites页面或AEM Experience Fragment中的注意事项 consideration
-
当您使用 自适应Forms - Embed(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页面：
在 表单容器 配置对话框中选择了 当表单涵盖整个页面宽度 选项并且使用了使用核心组件的自适应Forms时，需要在相应的站点页面上包含客户端库。
使用部署管道将 Customheaderlibs 和 Customfooterlibs 客户端库添加到您的AEM Sites页面。 要添加客户端库，请执行以下操作：
-
在计划文本编辑器中打开 AEM Cloud Service Git 存储库文件夹。例如，Microsoft® Visual Code。
-
打开
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> -
打开
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> -
打开
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> -
打开
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> -
运行部署管道，将客户端库部署到 AEM as a Cloud Service 环境。
要在模板策略中启用 自适应Forms - Embed(v2) 组件，请执行以下步骤：
- 打开AEM Sites页面或体验片段进行编辑。 要打开页面进行编辑，请选择该页面，然后单击 编辑。
- 打开站点或体验片段页面的模板。 要打开模板，请转到 页面信息
- 在结构视图中，单击菜单栏中的 策略
- 单击 完成。
| embed |
|---|
|
|
使用自适应Forms — 嵌入(v2)组件嵌入自适应表单 embed-an-adaptive-form-in-sites-editor-or-experience-fragment
使用 自适应Forms - Embed(v2) 组件通过“表单创建向导”，直接在AEM Sites编辑器中创建自适应表单。 生成的表单将另存为外部实体，以便在其他Sites页面和独立表单中重复使用。 您可以直接从头开始在AEM Sites页面或体验片段中嵌入全新表单，根据您的要求和设计偏好设置专门定制表单。 对于一次性表单，建议直接创作到AEM Sites页面，而体验片段则适用于必须在网站上的多个页面中重用的表单。
您可以使用 自适应Forms - Embed(v2) 轻松嵌入新表单。 例如，设想将新的联系我们表单合并到AEM Sites页面或AEM体验片段中。 对AEM Sites页面或体验片段中的联系人表单所做的任何更新或修改都会自动应用于部署该表单的所有页面。 这简化了对网站表单的管理，确保在简化整体过程的同时提供无缝的用户体验。
使用 自适应Forms — 嵌入(v2)，您可以：
“在AEM Sites中使用‘自适应Forms’向导嵌入新表单”页 embed-form-using-adaptive-form-wizzard-aem-sites
将新表单嵌入到AEM Sites页面的步骤如下：
-
以编辑模式打开 AEM Sites 页面。
-
从组件浏览器面板中，将 自适应Forms — 嵌入(v2) 组件拖放到页面上。
-
单击 加号 图标，您将被重定向到表单创建向导。
-
从 表单创建 向导创建新的自适应表单。
资产路径 已包含已创建的自适应表单的路径 -
保存设置。 现在，自适应表单已嵌入到页面中。
接下来，您可以使用表单创建向导设置嵌入式自适应表单的提交操作和高级属性。
在体验片段中使用“自适应Forms向导”嵌入新表单 embed-form-using-adaptive-form-wizzard-experience-fragment
将新表单嵌入到体验片段的步骤如下：
-
在编辑模式下打开体验片段。
-
从组件浏览器面板中，将 自适应Forms — 嵌入(v2) 组件拖放到页面上。
-
单击 加号 图标，您将被重定向到表单创建向导。
-
从 表单创建 向导创建新的自适应表单。
资产路径 已包含已创建的自适应表单的路径 -
保存设置。 自适应表单现在嵌入到体验片段中。
接下来，您可以使用表单创建向导设置嵌入式自适应表单的提交操作和高级属性。
在AEM Sites页面中嵌入现有的自适应表单 embed-an-adaptive-form-in-sites-editor
借助 自适应Forms - Embed(v2) 组件，您可以轻松地将预先存在的自适应表单集成到AEM Sites中的页面中。 此功能显着增强了自适应Forms的适应性和可重用性，为客户提供了重用他们已创建的表单的便捷方式。 例如，设想将联系人表单合并到AEM Sites页面，而无需多次重新创建表单。
要将现有的自适应表单嵌入到站点页面中，请执行以下操作：
- 以编辑模式打开 AEM Sites 页面。
- 将 自适应Forms - Embed(v2) 组件从组件浏览器拖放到Sites页面。
- 在“站点”页中选择 自适应Forms - Embed 组件，然后在操作栏中选择
- 浏览并选择要嵌入到 资产路径 中的自适应表单。
- 保存设置。 现在，自适应表单已嵌入到页面中。
接下来，您可以使用表单创建向导设置嵌入式自适应表单的提交操作和高级属性。
将现有的自适应表单嵌入到体验片段中 embed-an-adaptive-form-in-experience-fragment
您还可以通过将表单嵌入到AEM体验片段来扩展表单的辅助功能。 要在体验片段中嵌入自适应表单，请执行以下操作：
- 在编辑模式下打开体验片段。
- 将 自适应Forms - Embed(v2) 组件从组件浏览器拖放到Experience Fragment。
- 在体验片段中选择 自适应Forms — 嵌入 组件，然后在操作栏中选择
- 浏览并选择要嵌入到 资产路径 中的自适应表单。
- 保存设置。 自适应表单现在嵌入到体验片段中。
接下来，您可以使用表单创建向导设置嵌入式自适应表单的提交操作和高级属性。
将AEM Sites页面中的表单转换为体验片段 convert-an-adaptive-form-in-sites-page-to-an-experience-fragment
您可以在站点页面编辑器中将现有的自适应表单转换为体验片段，以在多个页面或站点中重用该表单。
要将AEM Sites页面中的自适应表单转换为体验片段，请执行以下操作：
-
在编辑模式下打开包含自适应表单的AEM Sites页面(在自适应Forms容器组件中)。
-
打开内容树，然后选择承载您的自适应表单的 自适应Forms容器。 一个AEM Sites页面可以托管多个自适应Forms。 因此，请仔细选择正确的自适应Forms容器。
-
在菜单栏上，选择
出现一个对话框，用于将自适应表单容器转换为新的体验片段或添加到现有的体验片段。
-
在 转换为体验片段 变体对话框中，设置以下选项的值：
- 操作： 选择创建体验片段或添加到现有的体验片段。
- 父路径： 指定在其中承载体验片段的文件夹的路径。 选项仅适用于创建新体验片段。
- 模板： 指定体验片段模板的路径。 如果您没有体验片段模板，请创建它。 选项仅可用于将自适应表单添加到现有体验片段。
- 片段标题： 指定体验片段的标题。 标题唯一标识体验片段。
- 片段标记： 指定体验片段的标记。 标记唯一标识体验片段的类别。
配置自适应表单嵌入(v2)属性
您可以自定义 自适应表单 — 嵌入(v2) 组件的高级设置。 在 编辑自适应Forms — 嵌入 对话框中，可以指定以下内容：
-
资产路径：浏览并选择要嵌入的自适应表单。 如果您将其从Assets浏览器中删除，则会自动填充该变量。
-
Post提交 ：选择要在提交表单时触发的操作。 您可以选择显示感谢消息或感谢页面。
- 显示感谢消息：使用富文本编辑器编写要在提交表单时显示的消息。 仅当您选择显示感谢消息时，此选项才可用。
- 显示感谢页面：浏览并选择要在表单提交时显示的页面。 仅当您选择显示感谢页面时，此选项才可用。
- 重定向以感谢页面：启用该选项以将包含嵌入的自适应表单的页面替换为感谢页面。 否则，“感谢”页面将替换 自适应Forms - Embed(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 - Embed 组件添加更多自适应Forms，请选择 表单涵盖整个框架 选项。
-
-
高度：指定容器的高度。 将其留空可自动调整容器大小。
-
CSS客户端库：指定CSS客户端库的路径。
Publish嵌入式自适应表单 publishing-embedded-adaptive-form
让我们考虑以下在AEM Sites页面中发布嵌入式自适应表单的场景：
- 如果您是首次发布AEM站点页面，并且它包含嵌入的自适应表单，请发布站点页面和嵌入的资产。
- 如果您在发布的站点页面中仅修改了嵌入的自适应表单，请发布原始资产，所做的更改会反映在发布的站点页面中。 已发布的站点页面包含对资产的引用，因此无需重新发布页面。
- 如果您修改了站点页面和嵌入的自适应表单，请重新发布站点页面和嵌入的资产。
修改嵌入式自适应表单 modifying-embedded-adaptive-form
要修改嵌入式自适应表单的任何配置或属性，请执行以下操作之一。
- 在相应的编辑器中打开自适应表单中的原始表单，并修改它们。
- 在编辑模式下从网站页面中选择自适应表单，然后选择 在新窗口中编辑。 原始表单在编辑模式下打开，您可以修改该模式。
最佳实践 best-practices
在AEM Sites页面中嵌入自适应Forms时，请牢记以下几点：
- 原始表单中的页眉和页脚未包含在嵌入表单中。
- 支持用户草稿和提交嵌入表单，这些草稿和提交表单会显示在Forms Portal的“草稿”和“已提交的Forms”选项卡中。
- 在原始表单上配置的提交操作将保留在嵌入表单中。
- 如果您已为原始表单配置了Adobe Analytics，则会在Adobe Analytics中捕获嵌入表单的分析数据。 但是，它在Forms Analytics报表中不可用。