教程：创建自适应表单
- 主题：
- 自适应表单
创建对象：
- 管理员
- 用户
- 开发人员
本教程是创建您的第一个自适应表单系列中的步骤。 建议按时间顺序跟踪系列，以了解、执行和演示完整的教程用例。
关于教程
自适应表单是动态且响应灵敏的新一代表单。 您可以使用自适应表单提供个性化体验。 您还可以将自适应表单与使用情况统计数据的Adobe Analytics以及促销活动管理的Adobe Campaign集成。 有关自适应表单功能的详细信息，请参阅自适应表单创作简介。
在遵循正确的流程后，可以更轻松地创建和管理表单。 在本篇文章中，您将了解如何：
在文章末尾，您将有一个类似于以下内容的表单：
第1步：创建自适应表单
-
登录到AEM创作实例并导航到 Adobe Experience Manager > Forms > Forms & Documents。 默认URL为http://localhost:4502/aem/forms.html/content/dam/formsanddocuments。
-
选择 创建 并选择 自适应表单。 此时会显示一个用于选择模板的选项。 选择 Blank 模板以将其选中，然后选择 下一步。
-
出现 添加属性 的选项。 Title 和 Name 字段是必填字段：
- 标题： 在 标题 字段中指定
Add new or update shipping address。 标题字段指定表单的显示名称。 标题可帮助您在AEM Forms用户界面中识别表单。 - 名称： 在 名称 字段中指定
shipping-address-add-update-form。 “名称”字段指定表单的名称。 在存储库中创建具有指定名称的节点。在开始键入标题时，名称字段的值将自动生成。您可以更改建议的值。名称字段只能包含字母数字字符、连字符和下划线。所有无效的输入都将替换为连字符。
- 标题： 在 标题 字段中指定
-
选择 创建。创建自适应表单，并显示用于打开表单进行编辑的对话框。 选择 打开 以在新选项卡中打开新创建的表单。 将打开表单进行编辑。 它还显示边栏，可用于根据需要自定义新创建的表单。
有关自适应表单创作界面和可用组件的信息，请参阅自适应表单创作简介。
步骤2：添加页眉和页脚
AEM Forms提供了许多组件以在自适应表单上显示信息。 页眉和页脚组件有助于提供表单的一致外观。 标题通常包括公司的徽标、表单标题和摘要。 页脚通常包括版权信息和指向其他页面的链接。
-
选择
-
选择 徽标。 工具栏即会显示。 在工具栏上选择
-
选择图像。 工具栏即会显示。 选择
如果您没有徽标，则可以选择“获取文件”来下载本文中使用的徽标。
-
将 页脚 组件从
步骤3：添加用于捕获和显示信息的组件
组件是自适应表单的构建块。 AEM Forms提供了许多组件，用于在自适应表单中捕获和显示信息。 您可以将组件从
-
将 数值框组件 拖至自适应表单。 将其放在页脚组件之前。 打开组件的属性，将组件的 Title 更改为
Customer ID，将 Element Name 更改为customer_ID，启用 必填字段 选项，启用 使用HTML5编号输入类型 选项，然后选择 -
将三个文本框组件拖到自适应表单中。 将它们放在页脚组件之前。 为这些文本框设置以下属性。:
属性文本框1文本框2文本框3标题名称配送地址状态元素名称customer_Namecustomer_Shipping_Addresscustomer_state必填字段已启用已启用已启用允许多行已禁用已启用已禁用 -
将 数字框 组件拖动到页脚组件之前。 打开组件的属性，设置下表中列出的值，选择
-
将 Email 组件拖动到页脚组件之前。 打开组件的属性，设置下表中列出的值，然后选择
-
将 文件附件 组件拖动到页脚组件之前。 打开组件的属性，设置下表中列出的值，然后选择
-
将 Submit Button 组件拖动到自适应表单。 将其放在页脚组件之前。 打开组件的属性，将元素名称更改为
address_addition_update_submit，选择
步骤4：为自适应表单配置提交操作
当用户点按自适应表单上的提交按钮时，会触发提交操作。 您可以使用提交操作将表单数据保存到本地存储库、将表单数据发送到REST端点、以电子邮件形式发送表单数据等。 自适应表单提供更多现成的提交操作。 有关详细信息，请参阅配置提交操作。
使用以下步骤，您可以配置表单的电子邮件提交操作和演示提交操作：
-
配置电子邮件服务器。 有关详细信息，请参阅配置电子邮件通知。
-
在内容浏览器中选择 表单容器，然后选择
-
转到 提交 > 提交操作。 选择 发送电子邮件。 指定以下值并选择
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和桌面。 您可以同时使用 预览 和 模拟器
- 选择表单编辑器右侧的 预览 选项。 表单将在预览模式下打开。 如果您使用了教程中提到的名称，则表单的预览URL为http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
- 使用
- 填写表单的字段并选择 提交。 表单已提交，您将被重定向到默认的 感谢 页面。 您还可以指定自定义感谢页面。 有关详细信息，请参阅配置重定向页面。
用于添加地址的自适应表单已准备就绪。 如果您使用了本教程中提到的名称，并在运行AEM Forms服务器的计算机上访问该表单，则该表单可在http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html中找到。