使用 Adaptive Forms Block 创建表单

AEM Forms Edge Delivery 提供了一个称为 Adaptive Forms Block 的区块,可帮助您轻松创建表单,以捕获和存储捕获的数据。您可以创建一个预先配置了 Adaptive Forms Block 的新 AEM 项目将 Adaptive Forms Block 添加到现有的 AEM 项目

这些表单可将数据直接提交到 Microsoft Excel 或 Google Sheets 文件,使您能够使用 Google Sheets、Microsoft Excel 和 Microsoft SharePoint 充满活力的生态系统和强大的 API 来轻松处理提交的数据或启动现有的业务工作流程。

基于文档的创作生态系统

先决条件

在开始之前,请确保您已完成以下步骤:

创建表单

步骤 1:使用 Microsoft Excel 或 Google Sheet 创建表单。

使用电子表格可以轻松地制作表单,而无需执行复杂的流程。您可以定义构成表单结构的行和列。每行代表一个单独的表单字段,列标题定义相应的字段属性

例如,请考虑以下电子表格,其中行概述了 enquiry 表单的字段,列标题则定义其属性:

查询电子表格

要继续创建表单:

  1. 访问 Microsoft SharePoint 或 Google Drive 上的 AEM Edge Delivery 项目文件夹。

  2. 在 AEM Edge Delivery 项目目录中的任意位置创建一份 Microsoft Excel 工作簿或 Google 工作表。例如,在 Google Drive 上的 AEM Edge Delivery 项目目录中创建一个名为 enquiry 的电子表格。

    Google Drive 上的示例内容

  3. 确保根据为项目指定的配置,与适当的 AEM 用户(例如 helix@adobe.com共享表。授予用户编辑表的权限。

  4. 打开创建的电子表格并将默认表重命名为“shared-default”。

    将默认工作表重命名为“shared-default”

  5. 要添加表单字段,请将行和列标题插入“shared-default”表中。每行应该代表一个表单字段,列标题定义相应的字段属性

    为了快速开始,请考虑复制查询电子表格中的内容到电子表格中。复制内容后,保存电子表格。

    embed

    https://video.tv.adobe.com/v/3427468?quality=12&learn=on

  6. 使用 AEM Sidekick 预览表。

    使用 AEM Sidekick 预览表

    预览时,新的浏览器选项卡会以 JSON 格式显示工作表的内容。确保捕获预览 URL,因为这是在下一节中渲染表单所必需的。URL 格式如下所示:

    code language-json
        https://<branch>--<repository>--<owner>.hlx.live/<form-path>/<form-file-name>.json
    
    • <branch> 指 GitHub 存储库的分支。
    • <repository> 表示您的 GitHub 存储库。
    • <owner> 指托管您 GitHub 存储库的 GitHub 帐户用户名。

    例如,如果您的项目存储库名为“portal”,位于帐户“wkndforms”下,并且您使用的是“main”分支,则 URL 如下所示:

    https://main--portal--wkndforms.hlx.page/enquiry.json

步骤 2:使用 Edge Delivery Services (EDS) 页面预览表单。

到目前为止,您已经准备好了表单的结构。现在,要预览表单,请执行以下操作:

  1. 打开您的 Microsoft SharePoint 或 Google Drive 帐户,并导航至 AEM Edge Delivery 项目目录。

  2. 打开文档文件(例如索引文件)以嵌入表单。或者,您可以创建一个新文档。

  3. 移至文档中要添加表单的所需位置。

  4. 创建表单区块来呈现表单。选择“插入”>“表格”,然后创建一个一列两行的表格。将表命名为“表单”并将预览 URL 粘贴到第二行中。确保 URL 的格式为超链接,而不是纯文本,如下所示:

    table 0-row-1 1-row-1
    表单
    https://main–wefinance–wkndforms.hlx.live/enquiry.json

    将 Adaptive Forms Block 添加到您的网页

    该区块用作嵌入表单的占位符。在该区块的第二行中,添加 <form>.json 文件的预览 URL 作为超链接。

    note important
    IMPORTANT
    确保 URL 的格式为超链接,而不是显示为纯文本。
  5. 使用 AEM Sidekick 预览文档。页面现在显示表单。例如,以下是基于查询电子表格的表单:

    EDS 表单样本

    现在,填写该表单并单击提交按钮,您会遇到类似于以下内容的错误,因为该电子表格尚未设置为接受数据。

    表单提交错误

下一步

准备您的电子表格以在表单提交后开始接受数据。

另请参阅

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab