教程：创建自适应表单

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

关于教程

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

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

• 创建允许客户添加发货地址的自适应表单

• 用于显示和接受客户信息的自适应表单的布局字段

• 创建提交操作以发送包含表单内容的电子邮件

• 预览并提交自适应表单

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

第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. 点按​创建。此时会创建一个自适应表单，并显示一个用于打开表单进行编辑的对话框。 点按​打开​以在新选项卡中打开新创建的表单。 此时将打开表单进行编辑。 它还显示侧栏，以根据需要自定义新创建的表单。

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

   

第2步：添加页眉和页脚

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

1. 点按 > 。 组件浏览器将打开。 将​Header​组件从组件浏览器拖动到自适应表单。

2. 点按​徽标。 随后将显示工具栏。 点按工具栏上的，键入​We.Retail，然后点按。

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

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

   获取文件

4. 将​Footer​组件从拖到自适应表单。 在此阶段，表单如下所示：

   

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

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

1. 将​数字框组件​拖动到自适应表单。 将其放在页脚组件之前。 打开组件的属性，将组件的​标题​更改为​Customer ID，将​元素名称​更改为​customer_ID，启用​必填字段​选项，启用​使用HTML5数字输入类型​选项，然后点按。

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

   属性	文本框1	文本框2	文本框3
   标题	名称	配送地址	状态
   元素名称	customer_Name	customer_Shipping_Address	customer_State
   必填字段	启用	启用	启用
   允许多行	已禁用	启用	已禁用

3. 将​数字框​组件拖到页脚组件之前。 打开组件的属性，设置下表中列出的值，点按。

   属性	值
   标题	邮政编码
   元素名称	customer_ZIPCode
   最大数字数量	6
   必填字段	启用
   显示图案类型	无图案

4. 将​Email​组件拖到页脚组件之前。 打开组件的属性，设置下表中列出的值，然后点按。

   属性	值
   标题	电子邮件
   元素名称	customer_Email
   必填字段	启用

5. 将​文件附件​组件拖到页脚组件之前。 打开组件的属性，设置下表中列出的值，然后点按。

   属性	值
   标题	政府批准的地址验证
   元素名称	customer_Address_验证
   必填字段	启用

6. 将​提交按钮​组件拖动到自适应表单。 将其放在页脚组件之前。 打开组件的属性，将元素名称更改为address_addition_update_submit，点按。 表单的布局已完成，表单如下所示：

   

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

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

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

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

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

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

   属性	值
   发件人	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。