使用同事创建包含自适应表单的AEM Sites联系我们页面

[AEM Forms as a Cloud Service]{class="badge informative"}

概述

Co-worker Enterprise提供了人工智能辅助的方式,以使用自然语言指令在Adobe Experience Manager (AEM)中完成任务。 用户可以描述想要创建的体验,而不是手动执行每个创作和配置步骤,Co-worker可以帮助您执行AEM中支持的任务。

同事以交互方式工作,在需要其他信息(如参考页面、现有配置或要使用的服务)时,可能会提出后续问题。 这使得将AI辅助创作与现有AEM资源、组件、表单和集成结合起来成为可能。

在本文中,我们使用同事帮助构建AEM Sites联系我们体验,包括创建页面和自适应表单、配置邮政编码查找以及设置表单提交到现有Azure Storage配置。

本教程演示如何使用​ 同事 ​创建AEM Sites 联系我们​页面,该页面包括:

  • 全形银行主题横幅
  • AEM Sites页面中嵌入的自适应表单
  • 两列式表单布局
  • 平板电脑和移动设备的响应式行为
  • 客户信息和查询详细信息的逻辑分组

将在以下位置创建页面:

/content/bankingapplication/us/contact-us

先决条件

开始之前,请确保:

您有权访问AEM环境,并具有创建和修改Sites页面和自适应Forms所需的权限。

在本文中用到的示例中,banking application是在我们的环境中配置的AEM项目,并且在/content/bankingapplication/us下创建“联系我们”页面。

您的AEM项目名称和内容结构可能不同。 将本文中的示例路径替换为适合您的AEM环境的项目名称和内容位置。

同样,可以在项目的适当位置创建自适应Forms和相关资源;它们不需要使用本文中显示的相同路径。

步骤1:打开同事

打开同事并提供描述要创建的页面的自然语言请求。

提示应包括:

  1. 页面位置
  2. 所需的页面结构
  3. 横幅要求
  4. 自适应表单要求
  5. 两列式布局
  6. 响应行为
  7. 表单上所需的字段
  8. 视觉和可访问性期望

通常,详细的提示会生成比简短请求(如“创建联系我们页面”)更可预测的结果。

步骤2:提供页面创建提示

将以下提示复制并粘贴到Co-worker中:

步骤2:提供页面创建提示

将以下提示复制并粘贴到Co-worker中:

我想在AEM Sites中创建一个​ 联系我们 ​页面,位于以下内容路径下:

/content/bankingapplication/us

页面要求

1. 全角银行横幅

  • 添加横幅/主页图像以横跨整个页面。
  • 使用​ 现代银行和金融服务主题 ​创建合适的横幅图像。
  • 视觉应传达信任、专业精神、安全性和客户服务。
  • 该横幅在台式机、平板电脑和移动设备布局中应该可以很好地使用。

2. 联系我们自适应表单

  • 在页面的下半部分,直接在AEM Sites页面中添加​AEM自适应表单。
  • 在桌面上将表单字段逻辑组织为​两个并排面板/列。
  • 在平板电脑和移动设备上,面板应垂直栈叠以提供响应式体验。

左侧面板 — 您的信息

  • 名称
  • 电子邮件地址
  • 街道地址
  • 城市
  • 状态
  • 邮政编码

右侧面板 — 我们可以提供哪些帮助?

  • 查询类型
  • 主题
  • 消息/评论
  • 首选联系时间

将​ Submit ​按钮放置在表单字段下方的逻辑位置,以使整个表单感觉平衡且易于使用。

页面位置

创建“联系我们”页面:

/content/bankingapplication/us/contact-us

回答同事的跟进问题

提交提示后,同事可能会在创建AEM Sites页面之前询问其他问题。 这些问题可帮助同事了解现有站点结构、设计惯例、可用组件和所需的实施。

同事回应

同事响应

recommendation-more-help
experience-manager-learn-help-cloud-service