教程:创建自适应表单

02-create-adaptive-form-main-image

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

关于教程

自适应表单是新一代动态响应表单。 您可以使用自适应表单提供个性化体验。 您还可以将自适应表单与用 Adobe Analytics 途统计和活动管理集 Adobe Campaign 成在一起。 有关自适应表单功能的更多信息,请参 阅创作自适应表单的简介

在遵循正确的流程时,创建和管理表单会更加容易。 在本文中,您将学习如何:

在文章末尾,您将有一个类似于以下内容的表单:

第1步:创建自适应表单

  1. 登录到AEM作者实例,并导航到 Adobe Experience Manager > Forms > Forms和文档。 默认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. 点按​创建。将创建自适应表单,并显示一个用于打开表单进行编辑的对话框。 点按 打开 ,在新选项卡中打开新创建的表单。 此时将打开表单进行编辑。 它还显示侧栏,以根据需要自定义新创建的表单。

    有关自适应表单创作界面和可用组件的信息,请参 阅自适应表单创作简介

    新创建的自适应表单

AEM提 Forms 供许多组件,用于在自适应表单上显示信息。 页眉和页脚组件有助于为表单提供一致的外观。 标题通常包括公司徽标、表单标题和摘要。 页脚通常包括版权信息和指向其他页面的链接。

  1. 按“切换侧面板” > treeexpandall。 组件浏览器将打开。 将Header组 件从组件 浏览器拖到自适应表单。

  2. 点按 徽标。 随后将显示工具栏。 点 按工具栏中的aem_6_3 _edit ,键入 We.Retail ,然后点按aem_6_3_forms_save。

  3. 点按图像。 随后将显示工具栏。 点按 cmppr。 属性浏览器将在屏幕左侧打开。 浏览 并上传徽标图像。 点 按aem_6_3_forms_save。 图像显示在标题上。

    如果您没有本文中使用的徽标,可点击“获取文件”以下载本文中使用的徽标。

    获取文件

  4. 将Footer组 件从 treeexpandall 拖 动到自适应表单。 在此阶段,表单如下所示:

    adaptive-form-with-headers-and-footers

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

组件是自适应表单的构建块。 AEM提 Forms 供了许多组件,用于在自适应表单中捕获和显示信息。 可以将组件从树状 扩展全部拖 动到表单中。 要了解可用组件和相应的功能,请参 阅创作自适应表单简介

  1. 将数字 框组件拖动 到自适应表单。 将其放在页脚组件之前。 打开组件的属性,将 组件的标题更 改为 Customer ID,将元素名称更改为,启用必 需字段选项, 启用Required Field Use customer_IDAdobe Html5输入类型选项,并点按aem_6 3个表单save。

  2. 将三个文本框组件拖动到自适应表单。 将这些内容放在页脚组件之前。 为这些文本框设置以下属性。:

    属性 文本框1
    文本框2
    文本框3
    标题 名称
    配送地址 状态
    元素名称 customer_Name
    customer_Shipping_Address customer_state
    必填字段 启用 启用 启用
    允许多行
    已禁用 启用 已禁用
  3. 在页脚 组件之前 ,拖动一个数字框组件。 打开组件的属性,设置下表中列出的值, 点按aem_6_3_forms_save

    属性
    标题 邮政编码
    元素名称 customer_ZIPCode
    最大数字数量 6
    必填字段 启用
    显示图案类型 无图案
  4. 在页脚组 件之 前拖动电子邮件组件。 打开组件的属性,设置下表中列出的值,然 后点按aem_6_3_forms_save

    属性
    标题 电子邮件
    元素名称 customer_Email
    必填字段 启用
  5. 在页脚组 件之前 ,拖动“文件附件”组件。 打开组件的属性,设置下表中列出的值,然 后点按aem_6_3_forms_save

    属性
    标题 政府批准的地址验证
    元素名称 customer_Address_验证
    必填字段 启用
  6. 将“提 交按钮 ”组件拖动到自适应表单。 将其放在页脚组件之前。 打开组件的属性,将元素名称更 address_addition_update_submit改为 ,点按aem_6_3_forms_save。 表单的布局已完成,并且表单如下所示:

    adaptive-form-with-all-the-components

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

当用户在自适应表单上点击“提交”按钮时,将触发提交操作。 您可以使用提交操作将表单数据保存到本地存储库、将表单数据发送到REST端点、以电子邮件形式发送表单数据等。 自适应表单提供更多现成的提交操作。 有关详细信息,请参 阅配置提交操作

使用以下步骤,您可以配置表单的电子邮件提交操作和演示提交操作:

  1. 配置电子邮件服务器。 有关详细信息,请参 阅配置电子邮件通知

  2. 在内 容浏览器中 ,点按表单容器,然 后点按cmppr。 属性浏览器将在左侧打开。

  3. 转到“ 提交 ”> “提交操作”。 选择“ 发送电子邮件”。 指定以下值,然 后点按aem_6_3_forms_save

    属性
    发件人 donotreply@weretail.com
    收件人 ${customer_Email}
    主题 确认:您已在We.Retail网站上添加送货地址。
    电子邮件模板 ${customer_Name}好,以下地址将添加为您帐户的送货地址:
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}此致 ${customer_ZIPCode}
    ,We.Retail
    包含附件 启用

    您的表单已准备就绪。 现在,您可以预览表单并测试功能。 如果您已使用教程中提到的名称并在运行AEM server的计算机上访问 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 上访问

在此页面上