将自适应表单嵌入到AEM站点页面

概述

AEM Forms允许表单开发人员将自适应Forms无缝嵌入到AEM Sites页面或AEM外部托管的网页中。 嵌入式自适应表单功能完善，用户无需离开页面即可填写和提交表单。 它有助于用户停留在网页上其他元素的上下文中，同时与表单交互。

在AEM Sites页面中，您可以使用以下方式添加自适应表单：

• 自适应Forms — 嵌入组件
  自适应Forms — 嵌入组件使AEM Sites作者能够在AEM Sites页面中包含现有的自适应表单，从而提高自适应表单的重复使用率。 现有的自适应Forms可以独立使用，也可以嵌入到站点页面中。 此集成为客户提供了一种便捷的方式，可重复使用他们之前创建的自适应Forms。

• 资产浏览器
  所有表单均可在Assets下找到。 您可以将表单作为资源拖放到页面上。

前提条件

要在使用可编辑模板的AEM Sites页面中嵌入自适应表单，请确保在关联的模板中将AEM表单组件配置为允许的组件。

以防万一 自适应Forms — 嵌入组件 在中不可见 组件浏览器面板 在AEM sites页面上，执行以下步骤，如视频中所示。

如果站点页面使用静态模板，则需要在站点页面的段落系统中对其进行配置。

嵌入自适应表单

要使用嵌入自适应表单，请执行以下操作 自适应Forms — 嵌入 组件：

1. 在编辑模式下打开AEM sites页面，您要在该页面中嵌入自适应表单。

2. 在组件浏览器面板中，拖放 自适应Forms — 嵌入 组件。 或者，您也可以在Assets浏览器中搜索自适应表单，并将其拖放到站点页面上。 您可以添加新的自适应表单或嵌入现有的自适应表单。

   注意

   多个自适应Forms — 不支持页面上的嵌入组件。

3. 要创建和嵌入新表单，请在组件工具栏上点按 创建表单 图标。 此时将打开一个用于创建表单的窗口。

4. 点按站点页面中嵌入的自适应Forms — 嵌入组件，然后点按 在操作栏上。 此 编辑自适应Forms — 嵌入 对话框打开。

5. 在“编辑自适应Forms — 嵌入”对话框中，指定以下内容。

   资源类型： 选择要嵌入的资源类型。

   • 资源路径：浏览并选择要嵌入的自适应表单。 如果您从Assets浏览器中将其删除，则会自动填充该区段。
   • 帖子提交 ：选择在表单提交时触发的操作。 您可以选择显示感谢消息或感谢页面。

     • 显示

     • 感谢信息：使用富文本编辑器编写消息，以在表单提交时显示。 仅当您选择显示感谢消息时，此选项才可用。

     • 感谢页面：浏览并选择要在表单提交时显示的页面。 仅当您选择显示感谢页面时，此选项才可用。

       • 重定向到感谢页面：启用选项，将包含嵌入的自适应表单的页面替换为感谢页面。 否则，“感谢”页面将替换中的“自适应表单” 自适应Forms — 嵌入 组件，无需刷新页面的基础站点。 仅当您选择显示感谢页面时，此选项才可用。
   • 使用页面语言：使用AEM Sites页面的本地，而不是自适应表单的区域设置。
   • 设置专注于表单：选择以将焦点设置为自适应表单的第一个字段。
   • 主题：选择用于定义自适应表单组件样式的主题。 样式设置包括外观属性，如字体样式、背景颜色、尺寸和对齐方式。
   • 表单覆盖框架的整个宽度：如果选中，则不使用iframe渲染表单。
   • 高度：指定容器的高度。 将其留空可自动调整容器大小。
   • CSS客户端库：指定CSS客户端库的路径。

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

AEM站点还允许您使用自适应Forms — 嵌入组件动态创建自适应表单。 按照以下步骤创建自适应表单： 自适应Forms — 嵌入组件 在AEM站点页面上：

1. 在编辑模式下打开AEM sites页面，您要在该页面中嵌入自适应表单。

2. 从组件浏览器面板中，将自适应Forms — 嵌入组件拖放到页面上。

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

   

4. 现在，您可以使用将自适应表单嵌入到AEM网站页面上 AEM Forms容器组件.

发布嵌入式自适应表单

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

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

修改嵌入式自适应表单

AEM sites页面维护对“自适应Forms — 嵌入”中的自适应表单的引用。 因此，在原始自适应表单中配置的所有配置和属性（如主题、样式和提交操作）都将保留在嵌入的自适应表单中。

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

• 在相应编辑器中打开自适应表单中的原始表单并进行修改。
• 在编辑模式下，从站点页面中点按自适应表单，然后点按 在新窗口中编辑. 原始表单在编辑模式下打开，您可以修改该模式。

注意事项和最佳实践

在AEM Sites页面中嵌入自适应表单时，请记住以下几点：

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

Business.Adobe.com 资源