使用同事创建包含自适应表单的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:打开同事
打开同事并提供描述要创建的页面的自然语言请求。
提示应包括:
- 页面位置
- 所需的页面结构
- 横幅要求
- 自适应表单要求
- 两列式布局
- 响应行为
- 表单上所需的字段
- 视觉和可访问性期望
通常,详细的提示会生成比简短请求(如“创建联系我们页面”)更可预测的结果。
步骤2:提供页面创建提示
将以下提示复制并粘贴到Co-worker中:
步骤2:提供页面创建提示
将以下提示复制并粘贴到Co-worker中:
我想在AEM Sites中创建一个 联系我们 页面,位于以下内容路径下:
/content/bankingapplication/us
页面要求
1. 全角银行横幅
- 添加横幅/主页图像以横跨整个页面。
- 使用 现代银行和金融服务主题 创建合适的横幅图像。
- 视觉应传达信任、专业精神、安全性和客户服务。
- 该横幅在台式机、平板电脑和移动设备布局中应该可以很好地使用。
2. 联系我们自适应表单
- 在页面的下半部分,直接在AEM Sites页面中添加AEM自适应表单。
- 在桌面上将表单字段逻辑组织为两个并排面板/列。
- 在平板电脑和移动设备上,面板应垂直栈叠以提供响应式体验。
左侧面板 — 您的信息
- 名称
- 电子邮件地址
- 街道地址
- 城市
- 状态
- 邮政编码
右侧面板 — 我们可以提供哪些帮助?
- 查询类型
- 主题
- 消息/评论
- 首选联系时间
将 Submit 按钮放置在表单字段下方的逻辑位置,以使整个表单感觉平衡且易于使用。
页面位置
创建“联系我们”页面:
/content/bankingapplication/us/contact-us
回答同事的跟进问题
提交提示后,同事可能会在创建AEM Sites页面之前询问其他问题。 这些问题可帮助同事了解现有站点结构、设计惯例、可用组件和所需的实施。
同事回应