Show Menu
主题×

教程:创建自适应表单

本教程是“创建您的第一个自 适应表单”系列中的一个步骤 。 建议按照时间顺序按照这一系列来了解、执行和演示完整的教程用例。

关于教程

自适应表单是新一代的动态响应式表单。 您可以使用自适应表单来提供个性化体验。 您还可以将自适应表单与Adobe Analytics集成,以获得使用情况统计数据,将Adobe Campaign集成,以便进行营销活动管理。 有关自适应表单功能的更多信息,请参 阅创作自适应表单的介绍
在遵循正确的流程时,创建和管理表单会更加容易。 在本文中,您将学习如何:
在文章结尾处,您将有一个类似于以下内容的表单: form-preview-mobile.gif

第1步:创建自适应表单

  1. 登录到AEM作者实例,然后导航到 Adobe Experience Manager > Forms > Forms & Documents 。 默认URL为 http://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. 点按 创建 ,然后选择 自适应表单 。 此时会显示一个用于选择模板的选项。 点按空 白模板 ,选择该模板,然后点 按下一步
  3. 此时会显示“添 加属性 ”选项。 “标 ”和“名 ”字段是必填字段:
    • 标题:在标 Add new or update shipping address 题字段中指定。 标题字段指定表单的显示名称。 标题可帮助您在AEM Forms用户界面中识别表单。
    • 名称:在名 shipping-address-add-update-form 称字段中指定。 名称字段指定表单的名称。 将在存储库中创建具有指定名称的节点。 开始键入标题时,将自动生成名称字段的值。 您可以更改建议的值。 名称字段只能包含字母数字字符、连字符和下划线。 所有无效输入都替换为连字符。
  4. 点按​ 创建 。将创建自适应表单,并显示一个用于打开表单进行编辑的对话框。 点按 打开 ,在新选项卡中打开新创建的表单。 此时将打开表单进行编辑。 它还显示侧栏,以根据需要自定义新创建的表单。
    有关自适应表单创作界面和可用组件的信息,请参 阅创作自适应表单简介

第3步:添加组件以捕获和显示信息

组件是自适应表单的构建块。 AEM Forms提供许多组件,用于捕获和显示自适应表单中的信息。 您可以将组件从树状扩 到表单中。 要了解可用组件和相应的功能,请参阅创 作自适应表单的介绍
  1. 将数字框组件拖动到自适应表单。 将其放在页脚组件之前。 打开组件的属性,将组件的 Title更改为 ,将 Customer ID Name 更改为,启用Required Field Use The Required Field Input Type number选项,并点按 customer_ID Aem_6_3表单saveSave启用AdobeSam_6_3。
  2. 将三个文本框组件拖动到自适应表单。 将这些内容放在页脚组件之前。 为这些文本框设置以下属性。:
属性 Text Box 1 Text Box 2 文本框3
标题 名称 配送地址 状态
元素名称 customer_Name customer_Shipping_Address customer_State
必填字段 启用 启用 启用
允许多行 已禁用 启用 已禁用
  1. 在页脚组 件之前拖动 “数字框”组件。 打开组件的属性,设置下表中列出的值,点
    属性
    标题
    邮政编码
    元素名称
    customer_ZIPCode
    最大数字数量
    6
    必填字段
    启用
    显示图案类型
    无图案
  2. 在页脚组 件之前 ,将电子邮件组件拖动。 打开组件的属性,设置下表中列出的值,然后点
    属性
    标题
    电子邮件
    元素名称
    customer_Email
    必填字段
    启用
  3. 在页脚组 件之前拖动 “文件附件”组件。 打开组件的属性,设置下表中列出的值,然后点
属性
标题 政府批准的地址证明
元素名称 customer_Address_Proof
必填字段 启用
  1. 将“提 交按钮 ”组件拖动到自适应表单。 将其放在页脚组件之前。 打开组件的属性,将“元素名称”更改 为address_addition_update_submit ,点按 。 表单的布局已完成,并且表单的外观如下所示:

第4步:为自适应表单配置提交操作

当用户在自适应表单上点击“提交”按钮时,将触发提交操作。 您可以使用提交操作将表单数据保存到本地存储库、将表单数据发送到REST端点、以电子邮件形式发送表单数据等。 自适应表单提供了一些现成的提交操作。 有关详细信息,请参 阅配置提交操作
使用以下步骤,您可以配置表单的电子邮件提交操作和演示提交操作:
  1. 配置电子邮件服务器。 有关详细信息,请参阅 配置电子邮件通知
  2. 在内 容浏览器中点按表单容器 ,然后点按 。 属性浏览器将在左侧打开。
  3. 转至“提 ”>“ 提交操作 ”。 选择“ 发送电子邮件 ”。 指定以下值,然
    属性
    发件人
    收件人
    ${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

第5步:预览并提交自适应表单

可使用“预 览”选项 ,评估表单的外观和行为。 您可以以预览模式提交表单,还可以检查对表单应用的验证。 例如,如果必填字段留空时显示错误。
自适应表单还提供了一个选项,用于模拟不同设备的表单体验。 例如,iPhone、iPad和Desktop。 您可以将“预 ”和“模拟器 ”标尺选项结合使用,为不同屏幕尺寸的设备预览表单。
  1. 点按表 单编辑器 右侧的“预览”选项。 表单将在预览模式下打开。 如果您使用了教程中提到的名称,则表单的预览URL为 http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. 使用 ,查看表单在各种设备上的显示效果。
  3. 填写表单的字段,然后点按提 。 表单已提交,您将被重定向到默认的“感 谢您 ”页面。 您还可以指定自定义感谢页面。 有关详细信息,请参 阅配置重定向页
添加地址的自适应表单已准备好。 如果您使用了教程中提到的名称并访问运行AEM Forms服务器的计算机上的表单,则表单位于http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html