教程:创建自适应表单

02-create-adaptive-form-main-image

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

关于教程

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

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

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

[](assets/form-preview-mobile.gif) [](do-not-localize/form-preview-mobile.gif)

第1步:创建自适应表单

  1. 登录到AEM作者实例,然后导航到​Adobe Experience Manager > Forms > Forms和文档。 默认URL为http://localhost:4502/aem/forms.html/content/dam/formsanddocuments

  2. 点按​创建​并选择​自适应表单。 此时会显示一个用于选择模板的选项。 点按​空白​模板以将其选中,然后点按​下一步

  3. 出现“添加属性”选项。 Title​和​Name​字段为必填字段:

    • 标题:Add new or update shipping address 标题字段中指定。标题字段指定表单的显示名称。 标题可帮助您在AEM Forms用户界面中识别表单。
    • 名称:shipping-address-add-update-form 名称字段中指定。名称字段指定表单的名称。 将在存储库中创建具有指定名称的节点。 当您开始键入标题时,将自动生成名称字段的值。 您可以更改建议的值。 名称字段只能包含字母数字字符、连字符和下划线。 所有无效输入都替换为连字符。
  4. 点按​创建。此时会创建一个自适应表单,并显示一个用于打开表单进行编辑的对话框。 点按​打开​以在新选项卡中打开新创建的表单。 此时将打开表单进行编辑。 它还显示侧栏,以根据需要自定义新创建的表单。

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

    新创建的自适应表单

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

  1. 点按 toggle-side-panel >  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提供许多组件,用于在自适应表单中捕获和显示信息。 可以将组件从treeexpanall拖动到表单中。 要了解可用组件和相应的功能,请参阅创作自适应表单的简介

  1. 将数字框组件拖动到自适应表单。 将其放在页脚组件之前。 打开组件的属性,将组件的​标题​更改为​Customer ID,将​元素名称​更改为​customer_ID,启用​必填字段​选项,启用​使用HTML5数字输入类型​选项,然后点按aem_6_3_forms_save
  2. 将三个文本框组件拖动到自适应表单。 将这些内容放在页脚组件之前。 为这些文本框设置以下属性。:
属性 文本框1
文本框2
文本框3
标题 名称
配送地址 状态
元素名称 customer_Name
customer_Shipping_Address customer_State
必填字段 启用 启用 启用
允许多行
已禁用 启用 已禁用
  1. 将​数字框​组件拖到页脚组件之前。 打开组件的属性,设置下表中列出的值,点按aem_6_3_forms_save

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

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

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

    adaptive-form-with-all-the-components

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

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

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

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

    /content/help/en/experience-manager/6-4/sites-administering/notification.html

  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 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

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now