使用最適化 Forms 區塊建立表單

AEM Forms Edge Delivery 會提供一個區塊 (名為最適化 Forms 區塊),可協助您輕鬆建立表單來擷取和儲存擷取的資料。您可以建立預先設定最適化 Forms 區塊的新 AEM 專案,或可以將最適化 Forms 區塊新增至現有 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 Sheet。例如,在 Google Drive 上的 AEM Edge Delivery 專案目錄中,建立一個名為 enquiry 的試算表。

    Google Drive 上的範例內容

  3. 根據為您專案指定的設定,確保讓相關 AEM 使用者 (例如 helix@adobe.com) 共用工作表。授予使用者關於工作表的編輯權限。

  4. 開啟建立的試算表並將預設工作表重新命名為「共享預設」。

    將預設試算表重新命名為「共用預設」

  5. 若要新增表單欄位,請將列和欄標題插入「共用預設」工作表中。每列應該代表一個 表單欄位,且有定義對應欄屬性的欄標題。

    為了快速開始,請考慮複製查詢試算表內容至您的試算表中。複製內容後,請儲存試算表。

    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” 下面),並且您使用的是「主要」分支,則 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

    將最適化 Forms 區塊新增至您的網頁

    此區塊是用作嵌入表單的暫留位置。在該區塊的第二行中,新增 <form>.json 檔案的預覽 URL 作為超連結。

    note important
    IMPORTANT
    確保 URL 的格式為超連接,而不是顯示為純文字。
  5. 使用 AEM Sidekick 來預覽文件。頁面現在會顯示表單。例如,這是以查詢試算表為主的表單:

    EDS Form 範本

    現在,填寫表單並按一下提交按鈕,您會遇到類似於以下內容的錯誤,因為試算表尚未設定為接受資料。

    在表單提交時的錯誤

下一步

準備您的試算表 以在提交表單後開始接受資料。

另請參閱

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