本教程是创建第一个自适应表单系列中的一个步骤。 建议按照时间顺序按照系列来了解、执行和演示完整的教程用例。
自适应表单是新一代动态响应表单。 您可以使用自适应表单提供个性化体验。 您还可以将自适应表单与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提供许多组件,用于显示自适应表单上的信息。 页眉和页脚组件有助于为表单提供一致的外观。 标题通常包括公司徽标、表单标题和摘要。 页脚通常包括版权信息和指向其他页面的链接。
点按 >
。 组件浏览器将打开。 将Header组件从组件浏览器拖到自适应表单。
点按标志。 随后将显示工具栏。 点按工具栏上的,键入We.Retail,然后点按
。
点按图像。 随后将显示工具栏。 点按。 属性浏览器将在屏幕左侧打开。 浏 览并上传徽标图像。点按
。 图像显示在标题上。
如果您没有本文中使用的徽标,可点击“获取文件”以下载本文中使用的徽标。
将Footer组件从拖到自适应表单。 在此阶段,表单如下所示:
组件是自适应表单的构建块。 AEM Forms提供许多组件,用于在自适应表单中捕获和显示信息。 可以将组件从拖动到表单中。 要了解可用组件和相应的功能,请参阅创作自适应表单的简介。
将数字框组件拖动到自适应表单。 将其放在页脚组件之前。 打开组件属性,将组件的标题更改为Customer ID
,将元素名称更改为customer_ID
,启用必需字段选项,启用使用HTML5数字输入类型选项,然后点按。
将三个文本框组件拖动到自适应表单。 将这些内容放在页脚组件之前。 为这些文本框设置以下属性。:
属性 | 文本框1 |
文本框2 |
文本框3 |
标题 | 名称 |
配送地址 | 状态 |
元素名称 | customer_Name |
customer_Shipping_Address | customer_state |
必填字段 | 启用 | 启用 | 启用 |
允许多行 |
已禁用 | 启用 | 已禁用 |
将数字框组件拖到页脚组件之前。 打开组件的属性,设置下表中列出的值,点按。
属性 | 值 |
---|---|
标题 | 邮政编码 |
元素名称 | customer_ZIPCode |
最大数字数量 | 6 |
必填字段 | 启用 |
显示图案类型 | 无图案 |
将Email组件拖到页脚组件之前。 打开组件的属性,设置下表中列出的值,然后点按。
属性 | 值 |
---|---|
标题 | 电子邮件 |
元素名称 | customer_Email |
必填字段 | 启用 |
将文件附件组件拖动到页脚组件之前。 打开组件的属性,设置下表中列出的值,然后点按。
属性 | 值 |
标题 | 政府批准的地址验证 |
元素名称 | customer_Address_验证 |
必填字段 | 启用 |
将提交按钮组件拖动到自适应表单。 将其放在页脚组件之前。 打开组件的属性,将元素名称更改为address_addition_update_submit
,点按。 表单的布局已完成,并且表单如下所示:
当用户在自适应表单上点击“提交”按钮时,将触发提交操作。 您可以使用提交操作将表单数据保存到本地存储库、将表单数据发送到REST端点、以电子邮件形式发送表单数据等。 自适应表单提供更多现成的提交操作。 有关详细信息,请参阅配置提交操作。
使用以下步骤,您可以配置表单的电子邮件提交操作和演示提交操作:
配置电子邮件服务器。 有关详细信息,请参阅配置电子邮件通知。
点按内容浏览器中的表单容器,然后点按。 属性浏览器将在左侧打开。
转至Submission > 提交操作。 选择发送电子邮件。 指定以下值,然后点按。
属性 | 值 |
---|---|
发件人 | 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和Desktop。 您可以将预览和模拟器 选项相互结合,为不同屏幕大小的设备预览一个表单。
添加地址的自适应表单已准备就绪。 如果您已使用教程中提到的名称并在运行AEM Forms服务器的计算机上访问表单,则表单位于http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html。