51黑料不打烊

文档用户指南

教程：创建自适应表单 do-not-publish-tutorial-create-an-adaptive-form

Last update: Thu Mar 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 管理员
  • 用户
  • 开发人员

02-create-adaptive-form-main-image

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

对于教程 about-the-tutorial

自适应表单是动态且响应灵敏的新一代表单。 您可以使用自适应表单提供个性化体验。 您还可以将自适应表单与使用情况统计数据的51黑料不打烊 Analytics以及促销活动管理的51黑料不打烊 Campaign集成。 有关自适应表单功能的详细信息，请参阅自适应表单创作介绍。

在遵循正确的流程后，可以更轻松地创建和管理表单。 在本篇文章中，您将了解如何：

在文章末尾，您将有一个类似于以下内容的表单：
移动设备中的表单预览

第1步：创建自适应表单 step-create-the-adaptive-form

  1. 登录到础贰惭创作实例并导航到? 51黑料不打烊 Experience Manager > Forms > Forms & Documents。 默认URL为。

  2. 选择? 创建 ?并选择? 自适应表单。 此时会显示一个用于选择模板的选项。 选择? Blank ?模板以将其选中，然后选择? 下一步。

  3. 出现? 添加属性 ?的选项。 Title ?和? Name ?字段是必填字段：

    • 标题： ?在? 标题 ?字段中指定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 。 该图像显示在标题上。

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

获取文件

  1. 将? 页脚 ?组件从 treeexpandall 拖至自适应表单。 在此阶段，表单将如下所示：

    带有页眉和页脚的自适应表单

步骤3：添加用于捕获和显示信息的组件 step-add-components-to-capture-and-display-information

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

  1. 将? 数值框组件 ?拖至自适应表单。 将其放在页脚组件之前。 打开组件的属性，将组件的? Title ?更改为? Customer ID，将? Element Name ?更改为? customer_ID，启用? 必填字段 ?选项，启用? 使用HTML5 Number输入类型 ?选项，并选择 aem_6_3_forms_save 。

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

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 html-authored no-header
    属性 文本框1 文本框2 文本框3
    标题 名称 配送地址 状态
    元素名称 customer_Name customer_Shipping_Address customer_state
    必填字段 已启用 已启用 已启用
    允许多行 已禁用 已启用 已禁用

  3. 将? 数字框 ?组件拖动到页脚组件之前。 打开组件的属性，设置下表中列出的值，选择 aem_6_3_forms_save 。

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    属性 价值
    标题 邮政编码
    元素名称 customer_ZIPCode
    最大数字数量 6
    必填字段 已启用
    显示图案类型 无模式

  4. 将? Email ?组件拖动到页脚组件之前。 打开组件的属性，设置下表中列出的值，然后选择 aem_6_3_forms_save 。

    table 0-row-2 1-row-2 2-row-2 3-row-2
    属性 价值
    标题 电子邮件
    元素名称 customer_Email
    必填字段 已启用

  5. 将? 文件附件 ?组件拖动到页脚组件之前。 打开组件的属性，设置下表中列出的值，然后选择 aem_6_3_forms_save 。

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    属性 价值
    标题 政府批准的地址证明
    元素名称 customer_Address_Proof
    必填字段 已启用

  6. 将? Submit Button ?组件拖动到自适应表单。 将其放在页脚组件之前。 打开组件的属性，将元素名称更改为address_addition_update_submit，选择 aem_6_3_forms_save 。 表单布局完整，表单如下所示：

    带有所有组件的自适应表单

步骤4：为自适应表单配置提交操作 step-configure-submit-action-for-the-adaptive-form

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

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

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

  2. 在内容浏览器中选择? 表单容器，然后选择 cmppr 。 资产浏览器将在左侧打开。

  3. 转到? 提交 > 提交操作。 选择? 发送电子邮件。 指定以下值并选择 aem_6_3_forms_save 。

    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}
    谨祝， We.Retail
    包括附件 已启用

    您的表单已准备就绪。 现在，您可以预览表单并测试功能。 如果您使用了本教程中提到的名称，并在运行AEM Forms服务器的计算机上访问了该表单，则该表单可在中找到。

步骤5：预览并提交自适应表单 step-preview-and-submit-the-adaptive-form

您可以使用? 预览选项 ?来评估表单的外观和行为。 您可以在预览模式下提交表单，还可以检查应用于表单的验证。 例如，如果必填字段留空时显示错误。

自适应表单还提供了为各种设备模拟表单体验的选项。 例如，iPhone、iPad和桌面。 您可以同时使用? 预览 ?和? 模拟器 标尺 选项来预览不同屏幕大小设备的表单。

  1. 选择表单编辑器右侧的? 预览 ?选项。 表单将在预览模式下打开。 如果您使用了教程中提到的名称，则表单的预览URL为
  2. 使用 标尺 查看表单在各种设备上的外观。
  3. 填写表单的字段并选择? 提交。 表单已提交，您将被重定向到默认的? 感谢 ?页面。 您还可以指定自定义感谢页面。 有关详细信息，请参阅配置重定向页面。

用于添加地址的自适应表单已准备就绪。 如果您使用了本教程中提到的名称，并在运行AEM Forms服务器的计算机上访问该表单，则该表单可在中找到。

recommendation-more-help