本教程是 创建您的第一个自适应表单 系列。 建议按时间顺序关注该系列,以了解、执行和演示完整的教程用例。
自适应表单是新一代的表单,具有动态性和响应性。 您可以使用自适应表单来提供个性化体验。 您还可以将自适应表单与集成 Adobe Analytics 使用情况统计数据和 Adobe Campaign 用于营销活动管理。 有关自适应表单功能的更多信息,请参阅 自适应表单创作简介.
在遵循适当的流程后,可以更轻松地创建和管理表单。 在本篇文章中,您将了解如何:
登录到AEM创作实例并导航到 Adobe Experience Manager > Forms > Forms和文档. 默认URL为 http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.
点按 创建 并选择 自适应表单. 此时会显示一个用于选择模板的选项。 点按 空白 模板以将其选中并点按 下一个.
一个选项 添加属性 显示。 此 标题 和 名称 字段为必填字段:
Add new or update shipping address
在 标题 字段。 标题字段指定表单的显示名称。 标题可帮助您识别AEM中的表单 Forms 用户界面。shipping-address-add-update-form
在 名称 字段。 “名称”字段指定表单的名称。 在存储库中创建具有指定名称的节点。 开始键入标题时,将自动生成“名称”字段的值。 您可以更改建议值。 名称字段只能包含字母数字字符、连字符和下划线。 所有无效输入均被替换为连字符。点按 创建. 创建自适应表单,并显示用于打开表单进行编辑的对话框。 点按 打开 以在新选项卡中打开新创建的表单。 将打开表单进行编辑。 它还显示侧栏,以根据需要自定义新创建的表单。
有关自适应表单创作界面和可用组件的信息,请参阅 自适应表单创作简介.
AEM Forms 提供了许多组件,用于在自适应表单上显示信息。 页眉和页脚组件有助于为表单提供一致的外观。 页眉通常包括公司的徽标、表单标题和摘要。 页脚通常包括版权信息和指向其他页面的链接。
点按 >
. 此时将打开组件浏览器。 拖动 页眉 组件从组件浏览器转换为自适应表单。
点按 徽标. 此时将显示工具栏。 点按 在工具栏上,键入 We.Retail,然后点按
.
点按图像。 此时将显示工具栏。 点按 . 属性浏览器将在屏幕左侧打开。 浏览 并上传徽标图像。 点按
. 图像显示在标题上。
如果您没有徽标,则可以点按“获取文件”以下载本文中使用的徽标。
拖动 页脚 组件来源 到自适应表单。 在此阶段,表单将如下所示:
组件是自适应表单的构建块。 AEM Forms 提供了许多组件,用于以自适应表单捕获和显示信息。 您可以从以下位置拖动组件: 到表单中。 要了解可用的组件和相应的功能,请参阅 自适应表单创作简介.
拖动 数值框组件 到自适应表单。 将其放在页脚组件之前。 打开组件的属性,更改 标题 将组件移至 Customer ID
,更改 元素名称 到 customer_ID
,启用 必填字段 选项,启用 使用HTML5数字输入类型 选项,然后点按 .
将三个文本框组件拖到自适应表单中。 将它们放在页脚组件之前。 为这些文本框设置以下属性。:
属性 | 文本框1 |
文本框2 |
文本框3 |
标题 | 名称 |
配送地址 | 状态 |
元素名称 | 客户名称 |
customer_Shipping_Address | customer_state |
必填字段 | 启用 | 启用 | 启用 |
允许多行 |
已禁用 | 启用 | 已禁用 |
拖动 数值框 页脚组件之前的组件。 打开组件的属性,设置下表中列出的值,点按 .
属性 | 价值 |
---|---|
标题 | 邮政编码 |
元素名称 | customer_ZIPCode |
最大数字数量 | 6 |
必填字段 | 启用 |
显示图案类型 | 无模式 |
拖动 电子邮件 页脚组件之前的组件。 打开组件的属性,设置下表中列出的值,然后点按 .
属性 | 价值 |
---|---|
标题 | 电子邮件 |
元素名称 | customer_Email |
必填字段 | 启用 |
拖动 文件附件 页脚组件之前的组件。 打开组件的属性,设置下表中列出的值,然后点按 .
属性 | 价值 |
标题 | 政府批准的地址证明 |
元素名称 | customer_Address_Proof |
必填字段 | 启用 |
拖动 提交按钮 自适应表单的组件。 将其放在页脚组件之前。 打开组件的属性,将元素名称更改为 address_addition_update_submit
,点按 . 表单布局完整,表单如下所示:
当用户点按自适应表单上的提交按钮时,会触发提交操作。 您可以使用提交操作将表单数据保存到本地存储库、将表单数据发送到REST端点、通过电子邮件发送表单数据等。 自适应表单提供更多现成的提交操作。 有关详细信息,请参阅 配置提交操作.
使用以下步骤,您可以配置表单的电子邮件提交操作和演示提交操作:
配置电子邮件服务器。 有关详细信息,请参阅 配置电子邮件通知.
点按 表单容器 在内容浏览器中,然后点按 . 此时将在左侧打开属性浏览器。
转到 提交 > 提交操作. 选择 发送电子邮件. 指定以下值并点按 .
属性 | 价值 |
---|---|
发件人 | donotreply@weretail.com |
收件人 | ${customer_Email} |
主题 | 确认:您已在We.Retail网站上添加送货地址。 |
电子邮件模板 | 您好 ${customer_Name} ,则会添加以下地址作为您帐户的送货地址: ${customer_Name} , ${customer_Shipping_Address} , ${customer_State} , ${customer_ZIPCode} 谨祝, We.Retail |
包括附件 | 启用 |
您的表单已准备就绪。 现在,您可以预览表单并测试功能。 如果您使用了本教程中提到的名称,并在运行AEM的计算机上访问了该表单 Forms 服务器,则表单可在 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.
您可以使用 预览选项 评估表单的外观和行为。 您可以在预览模式下提交表单,还可以检查应用于表单的验证。 例如,如果必填字段留空时显示错误。
自适应表单还提供了为各种设备模拟表单体验的选项。 例如,iPhone、iPad和桌面。 您可以同时使用两者 预览 和 模拟器 多个选项配合使用可预览不同屏幕大小设备的表单。
用于添加地址的自适应表单已准备就绪。 如果您使用了本教程中提到的名称,并在运行AEM Forms服务器的计算机上访问了该表单,则该表单可在 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.