教程：创建自适应表单 do-not-publish-tutorial-create-an-adaptive-form
本教程是 创建您的第一个自适应表单 系列。 建议按照时间顺序排列系列，以了解、执行和演示完整的教程用例。
对于教程 about-the-tutorial
自适应表单是新一代动态响应式表单。 您可以使用自适应表单来提供个性化体验。 您还可以将自适应表单与51黑料不打烊 Analytics集成，以了解使用情况统计信息，将51黑料不打烊 Campaign与促销活动管理信息集成。 有关自适应表单功能的更多信息，请参阅 创作自适应表单介绍.
在遵循正确的流程后，创建和管理表单会更加容易。 在本文中，您将学习如何：
在文章末尾，您将拥有一个类似于以下内容的表单：
[ ](assets/form-preview-mobile.gif)
步骤1:创建自适应表单 step-create-the-adaptive-form
-
登录到础贰惭创作实例，然后导航到 51黑料不打烊 Experience Manager > Forms > 贵辞谤尘蝉和文档. 默认URL为 .
-
点按 创建 选择 自适应表单. 此时会显示用于选择模板的选项。 点按 空白 选择模板并点按 下一个.
-
选项 添加属性 中。 的 标题 和 名称 字段为必填字段：
- 标题： 指定
Add new or update shipping address字段中。 标题字段指定表单的显示名称。 标题可帮助您识别AEM Forms用户界面中的表单。 - 名称： 指定
shipping-address-add-update-form（在“名称”字段中）。 “名称”字段指定表单的名称。 在存储库中创建具有指定名称的节点。 开始键入标题时，将自动生成名称字段的值。 您可以更改建议的值。 名称字段只能包含字母数字字符、连字符和下划线。 所有无效输入都将替换为连字符。
- 标题： 指定
-
点按 创建. 随即会创建一个自适应表单，并出现一个用于打开表单以进行编辑的对话框。 点按 打开 在新选项卡中打开新创建的表单。 随即会打开表单进行编辑。 它还会显示侧栏，以根据需要自定义新创建的表单。
有关自适应表单创作界面和可用组件的信息，请参阅 创作自适应表单介绍.
步骤2:添加页眉和页脚 step-add-header-and-footer
AEM Forms提供了许多组件，用于在自适应表单上显示信息。 页眉和页脚组件有助于为表单提供一致的外观。 标题通常包括公司徽标、表单标题和摘要。 页脚通常包括版权信息和指向其他页面的链接。
-
点按
-
点按 徽标. 此时会出现工具栏。 点按
-
点按图像。 此时会出现工具栏。 点按
如果您没有徽标，则可以点按获取文件以下载本文中使用的徽标。
-
拖动 页脚 组件从
步骤3:添加组件以捕获和显示信息 step-add-components-to-capture-and-display-information
组件是自适应表单的构建基块。 AEM Forms提供了许多组件，用于在自适应表单中捕获和显示信息。 您可以将组件从
- 将数字框组件拖动到自适应表单。 将其放在页脚组件之前。 打开组件的属性，更改 标题 的
Customer ID，更改 元素名称 tocustomer_ID，启用 必填字段 选项，启用 使用贬罢惭尝5数字输入类型 选项，然后点按 - 将三个文本框组件拖到自适应表单中。 将它们放在页脚组件之前。 为这些文本框设置以下属性。:
-
拖动 数值框 组件。 打开组件的属性，设置下表中列出的值，然后点按
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 属性 价值 标题 邮政编码 元素名称 customer_ZIPCode 最大数字数量 6 必填字段 启用 显示图案类型 无模式 -
拖动 电子邮件 组件。 打开组件的属性，设置下表中列出的值，然后点按
table 0-row-2 1-row-2 2-row-2 3-row-2 属性 价值 标题 电子邮件 元素名称 customer_Email 必填字段 启用 -
拖动 文件附件 组件。 打开组件的属性，设置下表中列出的值，然后点按
-
拖动 提交按钮 组件添加到自适应表单。 将其放在页脚组件之前。 打开组件的属性，将元素名称更改为 address_addition_update_submit，点按
步骤4:为自适应表单配置提交操作 step-configure-submit-action-for-the-adaptive-form
当用户点按自适应表单上的“提交”按钮时，会触发提交操作。 您可以使用提交操作将表单数据保存到本地存储库、将表单数据发送到REST端点、将表单数据作为电子邮件发送，等等。 自适应表单提供了一些现成的提交操作。 有关详细信息，请参阅 配置提交操作.
使用以下步骤，您可以配置表单的电子邮件提交操作和演示提交操作：
-
配置电子邮件服务器。 有关详细信息，请参阅 配置电子邮件通知.
/content/help/en/experience-manager/6-4/sites-administering/notification.html
-
点按 表单容器 在内容浏览器中，然后点按
-
转到 提交 > 提交操作. 选择 发送电子邮件. 指定以下值并点按
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 属性 价值 发件人 donotreply@weretail.com收件人 ${customer_Email}主题 确认：您已在奥别.搁别迟补颈濒网站上添加送货地址。 电子邮件模板 你好 ${customer_Name}，以下地址将添加为您帐户的送货地址：${customer_Name},${customer_Shipping_Address},${customer_State},${customer_ZIPCode}
此致，奥别.搁别迟补颈濒包含附件 启用 您的表单已准备就绪。 现在，您可以预览表单并测试功能。 如果您使用了本教程中提到的名称，并在运行AEM Forms Server的计算机上访问表单，则表单将在 .
步骤5:预览和提交自适应表单 step-preview-and-submit-the-adaptive-form
您可以使用 预览选项 来评估表单的外观和行为。 您可以在预览模式下提交表单，还可以检查对表单应用的验证。 例如，如果必填字段留空时显示错误。
自适应表单还提供了一个选项，用于模拟各种设备的表单体验。 例如，iPhone、iPad和桌面。 您可以同时使用 预览 和 模拟器
- 点按 预览 选项。 在预览模式下将打开表单。 如果您使用了教程中提到的名称，则表单的预览URL为
- 使用
- 填写表单的字段并点按 提交. 表单已提交，您将被重定向到默认设置 谢谢 页面。 您还可以指定自定义的感谢页面。 有关详细信息，请参阅 配置重定向页面.
添加地址的自适应表单已准备就绪。 如果您使用了本教程中提到的名称，并在运行AEM Forms Server的计算机上访问表单，则表单将在 .