文件AEM as a Cloud Service使用手冊

最適化表單編輯器 introduction-to-authoring-adaptive-forms

Last update: Tue Dec 12 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Adobe 建議使用新式且可擴充的資料擷取核心元件以建立新的最適化表單或是將最適化表單新增到 AEM Sites 頁面。這些元件代表最適化表單建立方面的重大進步，可確保令人印象深刻的使用者體驗。本文會介紹使用基礎元件編寫最適化表單的舊方法。

版本
文章連結
AEM 6.5
按一下這裡
AEM as a Cloud Service
本文章

概觀 overview

最適化表單可讓您建立吸引人、回應式、動態且最適化的表單。AEM Forms 提供直覺的使用者介面和立即可用的元件，用於建立和使用最適化表單。您可以選擇根據表單模型或結構描述或不使用表單模型來建立最適化表單。仔細選擇表單模型非常重要，它不僅要滿足您的要求，還要擴展您現有的基礎設施投資和資產。您可以從以下選項中進行選擇來建立最適化表單：

  • 使用表單資料模型
    資料整合可讓您將不同資料來源的實體和服務整合到表單資料模型，其可用來建立最適化表單。如果您建立的最適化表單會從多個資料來源擷取資料，以及將資料寫入多個資料來源，請選擇表單資料模型。

  • 使用 XDP 表單範本
    如果您投資 XFA 型或 XDP 表單，那麼它是理想的表單模型。它提供一種直接將 XFA 型表單轉換為最適化表單的方法。任何現有的 XFA 規則都保留在關聯的最適化表單中。產生的最適化表單支援 XFA 結構，例如驗證、事件、屬性和模式。

  • 使用 XML 結構描述定義 (XSD) 或 JSON 結構描述
    XML 和 JSON 結構描述表示組織的後端系統產生或使用資料的結構。您可以將結構描述與最適化表單相關聯，並使用其元素將動態內容新增到最適化表單。在編寫最適化表單時，結構描述的元素可用於內容瀏覽器的資料模型物件索引標籤。

  • 不使用或不使用表單模型
    使用此選項建立的最適化表單不使用任何表單模型。從此類表單產生的資料 XML 具有包含欄位和對應值的單層結構。

    note note
    NOTE
    您可以從最適化表單編輯器或最適化表單範本編輯器修改表單模型屬性。如需詳細資訊，請參閱編輯最適化表單的表單模型屬性。

若要建立最適化表單，請參閱建立最適化表單。

最適化表單編寫 UI adaptive-form-authoring-ui

用於編寫最適化表單的觸控最佳化 UI 非常直覺，並提供：

  • 拖放功能
  • 標準表單元件
  • 整合式資產存放庫

當您建立或編輯現有的最適化表單時，會使用下列UI元素：

側邊欄 sidebar

此側邊欄可讓您

  • 搜尋、檢視和使用 AEM 數位資產管理 (DAM) 存放庫中的資產。
  • 查看表單內容，例如面板、元件、欄位和版面。
  • 在表單上新增元件。
  • 編輯元件屬性。

側邊欄

A. 內容瀏覽器 B. 屬性瀏覽器 C. 資產瀏覽器 D. 元件瀏覽器

側邊欄包含以下瀏覽器：

  • 內容瀏覽器
    在內容瀏覽器中，您可以看到：

    • 表單物件
      顯示表單的物件階層。作者可以點選表單物件樹中的元素來瀏覽至該元素。作者可以從此物件樹來搜尋物件並重新排列物件。

    • 資料模型物件
      讓您查看表單模型階層。
      它可讓您在最適化表單上拖放表單模型元素。新增的元素會自動轉換為表單元件，同時保留其原始屬性。當表單使用 XML 結構描述、JSON 結構描述或 XDP 範本時，您可以看到資料模型物件。

  • 屬性瀏覽器

    可讓您編輯元件的屬性。屬性會根據元件改變。若要查看最適化表單容器的屬性：

    選取元件，然後選取 欄位層級 > 最適化表單容器，然後選取 屬性 .

  • 資產瀏覽器

    區隔不同類型的內容，例如影像、文件、頁面、電影等。

  • 元件瀏覽器

    包括可用於建置最適化表單的元件。您可以將元件拖曳到最適化表單上以新增表單元素，並根據要求設定新增的元素。下表描述元件瀏覽器中列出的元件。

元件
功能
Adobe Sign 區塊
當使用 Adobe Sign 簽署時，為需要填寫的欄位新增有預留位置的文字區塊。
按鈕
新增按鈕，您可以將其設定為執行動作，例如儲存、重設、移至下一個、移至上一個等。
Captcha
使用 Google reCAPTCHA 服務新增 CAPTCHA 驗證。
圖表
新增可用在最適化表單和文件中的圖表，以便在可重複面板和表格列中以視覺表示二維資料。
核取方塊
新增核取方塊。
資料輸入欄位
在表單中使用日期輸入欄位元件，讓客戶分別在三個方框中填入日、月和年。您可以自訂元件的外觀和風格，並變更日期格式。例如，您可以讓客戶以 MM/DD/YYYY 或 DD/MM/YYYY 格式輸入日期。
日期挑選器
新增日曆欄位以挑選日期。
文件片段
可讓您新增相似項的可重複使用元件。
文件片段群組
可讓您新增一組相關的文件片段，您可以將它們作為一個單元用於信函範本中。
下拉式清單
新增下拉式清單 - 單選或複選
電子郵件

新增欄位以擷取電子郵件地址。電子郵件元件預設會使用以下規則運算式驗證電子郵件地址。

^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$

檔案附件

新增按鈕，此按鈕可讓使用者瀏覽支援文件並將其附加到表單。

請注意： 檔案附件元件在為 Adobe Sign 啟用的最適化表單中，支援一組事先定義的檔案格式。如需詳細資訊，請參閱支援的檔案格式。

檔案附件清單
新增欄位，此欄位會列出使用檔案附件元件上傳的所有附件。
頁尾
新增頁首，其中通常包括公司標誌、表單標題和摘要。
頁首
新增頁尾，其中通常包括版權資訊和其他頁面的連結。
影像
可讓您插入影像。
影像選擇
可讓您的客戶選取影像來提供資訊。您可以使用這些資訊為您的客戶提供個人化服務。
下一個按鈕
新增按鈕用於瀏覽到表單的下一個面板。
數值方塊
新增欄位用於擷取數值
數值步進器
在表單中使用數值步進器，可讓您的客戶輸入數值，他們可以根據預先定義的步長增加或減少該數值。
面板

新增面板或子面板。

您也可以使用新增子面板按鈕，從父面板新增面板元件 。同樣，您可以使用新增面板工具列按鈕，新增面板特定工具列 。您可以使用「編輯面板」對話框來設定面板工具列的位置。

密碼方塊
新增用於擷取密碼的欄位。
前一個按鈕
新增按鈕，此按鈕可讓使用者回到前一頁或前一個面板。
選項按鈕
新增選項按鈕。
重設按鈕
新增用於重設表單欄位的按鈕。
儲存按鈕
新增用於儲存表單資料的按鈕。
草寫簽名
新增用於擷取草寫簽名的欄位。
分隔符號
啟用表單的面板視覺隔離。
簽章步驟
在表單中顯示提供的資訊和簽名欄位，讓使用者確認和簽署表單。
文字
可讓您指定靜態文字。
提交按鈕
新增提交按鈕，用於將表單提交到設定的提交動作。
摘要步驟
提交表單並顯示作者指定表單提交後要顯示的摘要文字。
切換
新增用於切換或啟用/停用動作的開關。您不能在開關元件中新增兩個以上的選項。由於開關只能有兩個值：開啟或關閉，因此不適用強制。不論使用者輸入為何，至少會儲存一個值。
表格
新增表格以整理行和欄中的資料。
電話

新增用於擷取電話號碼的欄位。電話元件可讓作者設定以下其中一個電話號碼類型。每個類型都與用於驗證的預設規則運算式相關聯。

  • 國際類型由 ^[+][0-9]{0,14}$ 驗證。
  • USPhoneNumber 類型由 {'+1 ('999') '999-9999} 驗證。
  • UKPhoneNumber 類型由 text{'+'99 999 999 9999} 驗證。
  • 自訂類型不提供預設驗證模式。它採用上次所選電話號碼類型的值。您也可以指定自己的自訂驗證模式。
條款與條件
新增欄位，作者可用來指定使用者在填寫表單之前查看的條款與條件。
文字方塊

新增文字方塊，使用者可在其中指定所需的資訊。

依預設，文字方塊元件僅接受純文字。您可以啟用文字方塊元件來接受富文字。支援富文字的文字元件提供選項，可讓您新增標題、變更字元樣式 (粗體、斜體、底線)、建立有序和無序清單、變更文字背景和文字顏色以及新增超連結。若要為文字方塊啟用富文字，請在元件屬性中啟用 允許富文字。

標題
指定最適化表單的標題。
驗證步驟

新增預留位置用於顯示使用者驗證的已填表單。

請注意：包含驗證元件的最適化表單不支援匿名使用者。另外，不建議在最適化表單片段中使用驗證元件。

頁面工具列 page-toolbar

頂端的頁面工具列提供了一些選項，可讓您預覽表單、變更表單屬性和編輯表單版面。您可以在編寫表單時預覽表單，並進行相應的變更。在頁面工具列中，您會看到：

  • 切換側面板 切換側面板 ：讓您顯示或隱藏側邊欄。

  • 頁面資訊 主題選項 ：可讓您檢視頁面屬性、發佈/取消發佈表單、啟動表單工作流程以及在傳流 UI 中開啟表單。

  • 模擬器 標尺 ：允許您模擬在不同顯示尺寸 (例如平板電腦和手機) 的表單外觀。

  • 編輯：讓您選取其他模式，例如：編輯、樣式、開發人員 ​和​ 設計。

    • 編輯：可讓您編輯表單及其元件的屬性。例如，新增元件、放置影像以及指定必填欄位。

    • 樣式：可讓您設定表單元件的外觀樣式。例如，在樣式模式下，您可以選取面板並指定其背景顏色。

    • 開發人員：讓開發人員能夠：

      • 了解表單的組成。

      • 找出狀況及其發生的時間和位置，這反過來有助於解決問題。

      • 設計。可讓您啟用或停用自訂元件或側邊欄未列出的立即可用元件。

  • 預覽：可讓您預覽表單發佈時的外觀。

元件工具列 component-toolbar

觸控式 UI 中的元件工具列

當您選取元件時，會出現工具列，可讓您對其操作。您可以選擇剪下、貼上、移動和指定元件屬性。您的選項有：

答：設定：當您選取 設定，元件屬性會顯示在側邊欄中。 設定這些屬性可讓您自訂資料擷取體驗。您可以變更元件的元素名稱，在元件的標題欄位中指定標籤文字。元素名稱可讓您擷取使用者使用元件輸入的值。在元件屬性中，您可以指定元件的行為並管理使用者輸入。在側邊欄中設定屬性以擷取使用者資料並將其用於進一步處理。最適化表單容器的屬性可讓您指定用戶端程式庫、版面、主題、記錄文件設定、儲存設定、提交設定和中繼資料設定。

B. 複製：您可以使用複製選項複製元件並將其貼在表單中的其他位置。當您貼上元件時，貼上的元件會獲得新的元素名稱，但保留被複製元件的屬性。

C. 剪下：您可以使用剪下選項將元件從最適化表單中的一個位置移動到另一個位置。

D. 刪除：可讓您從表單中刪除元件。

E. 插入：可讓您在所選元件上方插入元件。

F. 貼上：可讓您貼上您使用上述選項所剪下或複製的元件。

G. 編輯規則：可讓您開啟規則編輯器。如需詳細資訊，

H. 群組：如果您想要一起剪下、複製或貼上多個元件，可讓您選取多個元件。

I. 父系：可讓您選取元件的父系。例如，文字欄位在子區段中，子區段位於區段中。區段在引導根面板中，最適化表單容器是引導根面板的父系。對於元件，您可以看到所有選項，採自下而上排序的階層結構。

例如，如果您選取 父級 對於文字方塊，您可以看到：

  • 子區段
  • 區段
  • guideRootPanel
  • 最適化表單容器

J. 其他：提供更多選項搭配所選元件使用。

  • 檢視 SOM 運算式
  • 將面板另存為片段 (僅適用於面板)
  • 新增子面板 (僅適用於面板)
  • 新增面板工具列 (僅適用於面板)
  • 更換 (不適用於面板)

最適化表單頁面 af-page

最適化表單頁面是實際表單。它就像任何其他建模為 WCM cq:Page 元件的 WCM 頁面一樣。下圖顯示了典型最適化表單的內容結構。

最適化表單 WCM 頁面的內容結構

內容結構通常包含以下主要元件：

  • guideContainer：最適化表單的根，在最適化表單 UI 中標記為​ 最適化表單的開頭。在此元件中，您可以指定：

    • 最適化表單的行動版面：定義表單在行動裝置上的外觀。
    • 感謝頁面：定義使用者提交表單後被重新導向的頁面。
    • 提交動作：定義使用者提交表單後伺務器如何處理表單。
    • 設定樣式：指定用於自訂表單外觀的 CSS 檔案路徑。

  • rootPanel： ​最適化表單的根面板。它可以在項目節點下包含子面板。每個面板 (包含根面板) 都可以有相關聯的版面。面板的版面決定了表單的佈局方式。例如，在摺疊式版面中，其項目是以摺疊式步驟加以佈局。

  • 工具列： ​最適化表單容器具有關聯的全域工具列，該工具列對於表單來說是全域的。可以使用編輯列中的​ 新增工具列 ​動作來新增此工具列，如此作者可新增動作，例如提交、儲存、重設等。

  • 資產： ​此節點包含其他資訊用於編寫表單。例如，表單模型詳細資料、本地化詳細資料等。

另請參閱 see-also

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