製作最適化表單簡介

概覽

最適化表單可讓您建立引人入勝、互動式、動態化和最適化的表單。 AEM Forms提供直覺式使用者介面和現成可用的元件，以建立和使用最適化表單。 您可以選擇基於表單模型或模式或不使用表單模型建立自適應表單。 務必謹慎選擇不僅符合您要求，而且還能擴展您現有的基礎設施投資和資產的表單模型。 您可以從下列選項中選擇以建立最適化表單：

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

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

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

  • 無或不使用表單模型使用
    此選項建立的最適化表單不使用任何表單模型。從這種表單中生成的資料XML具有平坦的結構，具有欄位和相應的值。

有關建立自適應表單的詳細資訊，請參見建立自適應表單。

最適化表單製作UI

針對製作最適化表單的觸控最佳化UI是直覺式的，並提供：

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

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

最適化表單製作UI

A. Sidebar B. Page工具列 C. Adaptive表單頁

側邊欄可讓您

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

側欄

A. Content瀏覽器 B. Properties瀏覽器 C. Assets瀏覽器 D. Components瀏覽器

邊欄包含下列瀏覽器：

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

    • 表單
      對象顯示表單的對象層次。作者可在「表單物件樹」中點選該元素，以導覽至特定的表單元件。 作者可以從此樹中搜索對象並重新排列它們。

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

  • 屬性瀏覽器

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

    選取元件，然後點選field-level > 最適化表單容器，然後點選cmppr。

  • 資產瀏覽器

    區隔不同類型的內容，例如影像、檔案、頁面、影片等。

  • 元件瀏覽器

    包含可用於建立最適化表單的元件。 您可以將元件從最適化表單拖曳至表單，以新增表單元素，並依需求設定新增的元素。 下表說明元件瀏覽器中列出的元件。

元件 功能
Adobe Sign 區塊 使用Adobe Sign在簽署時，新增包含要填入欄位預留位置的文字區塊。
按鈕 新增按鈕，您可設定此按鈕以執行動作，例如儲存、重設、繼續、前一步等。
Captcha 使用Google reCAPTCHA服務新增CAPTCHA驗證。 如需詳細資訊，請參閱在最適化表單中使用CAPTCHA。
圖表 新增圖表，您可在最適化表單和檔案中使用，以視覺化方式呈現可重複面板和表格列中的二維資料。
複選框 新增核取方塊。
資料輸入欄位 在表單中使用「日期輸入欄位」元件，讓客戶在三個方塊中分別填寫日、月和年。 您可以自訂元件的外觀和感覺，並變更日期格式。 例如，您可讓客戶輸入MM/DD/YYYY或DD/MM/YYYY格式的日期。
日期選擇器 新增日曆欄位以挑選日期。
文件片段 可讓您新增可重複使用的對應元件。
文件片段群組 可讓您新增相關檔案片段群組，以便在字母範本中以單一單位使用。
下拉式清單 新增下拉式清單——單一或多選
電子郵件

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

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

新增按鈕，讓使用者瀏覽支援檔案並附加至表單。 可以將多個檔案附加到檔案附件元件。 您也可以在元件的屬性瀏覽器中為附件指定​**最大檔案大小**​和​**支援的檔案類型**。

注意:

  • 該元件不支援以字元(.)開頭的檔案（包含字元\ / :）附加檔案* ? " < > |;% $，或包含為Windows作業系統保留的特殊檔名，例如nul、prn、con、lpt或com。
  • 若要將多個檔案附加至在Apple Safari瀏覽器中開啟的檔案附件元件，請逐一選取並附加檔案。 不能一次選擇並附加多個檔案。
  • 「檔案附件」元件支援為Adobe Sign啟用的自適應表單中預定義的一組檔案格式。 如需詳細資訊，請參閱支援的檔案格式。

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

新增面板或子面板。

您也可以使用「新增子面板」按鈕，從父面板工具列新增面板元件。 同樣地，您也可以使用新增面板工具列按鈕來新增面板特定的工具列。 可以使用「編輯面板」對話框配置面板工具欄的位置。
密碼框 新增擷取密碼的欄位。
「上一步」按鈕 新增使用者需要返回上一頁或面板的按鈕。
選項按鈕 新增選項按鈕。
重設按鈕 新增按鈕以重設表格欄位。
儲存按鈕 新增按鈕以儲存表單資料。
塗鴉簽名 新增擷取塗鴉簽名的欄位。
分隔符號 以視覺化方式隔離您的面板。
簽章步驟 顯示表單中提供的資訊，以及使用者驗證並簽署表單的簽名欄位。
文字 可讓您指定靜態文字。
提交按鈕 新增提交按鈕，將表單提交至已設定的提交動作。
摘要步驟 提交表單並顯示作者在提交表單後指定的摘要文字。
切換 添加執行切換或啟用／禁用操作的交換機。 在Switch元件中不能添加兩個以上的選項。 由於交換機只能有兩個值：開啟或關閉時，不適用強制性。 不考慮用戶輸入而保存至少一個值。
表格 新增表格以整理行和欄中的資料。
電話

新增欄位以擷取電話號碼。 「電話」元件允許作者配置以下電話號碼類型之一。 每種類型都與用於驗證的預設規則運算式相關聯。

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

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

預設情況下，「文本框」元件只接受純文字檔案。 您可以啟用「文字方塊」元件來接受Rich Text。 啟用Rich Text的文字元件提供多種選項，可讓您新增標題、變更字元樣式（粗體、斜體、加上字元底線）、建立有序和無序清單、變更文字背景和文字色彩，以及新增超連結。 要為文本框啟用富格文本，請在元件屬性中啟用允許富格文本選項。
標題 指定最適化表單的標題。
驗證步驟

新增預留位置，以顯示填入的表單供使用者驗證。

注意:包含「驗證」元件的最適化表單不支援匿名使用者。此外，不建議在最適化表單片段中使用Verify元件。

使用元件的最佳做法

使用最適化表單元件時，有些最佳實務和要記住的要點如下：

  • 每個元件都具有控制其外觀和功能的相關屬性。 若要設定元件的屬性，請點選元件並點選cmppr，以在「屬性」瀏覽器中開啟元件屬性。

  • 元件以其元素名稱來識別。 當您點選cmppr時，可以變更屬性瀏覽器中的​元素名稱​欄位值，以變更元件名稱。 「元素名稱」欄位僅接受字母、數字、連字型大小(-)和底線(_)。 不允許使用其他特殊字元，元素名稱應以字母開頭。

  • 只要表單上顯示標題，您就可以在表單編輯器中修改內嵌自適應表單元件的「標題」屬性，而不開啟「屬性」瀏覽器。 若要這麼做：

    1. 點選以選擇具有​Title​屬性且​Hide title​屬性已停用的元件。

    2. 點選aem_6_3_edit可讓標題變成可編輯。

    3. 修改標題並點選Return鍵，或點選元件外部的任何位置以儲存變更。 點選Esc鍵可捨棄變更。

  • 有些最適化表單元件（例如電子郵件和電話）包含現成可用的驗證模式。 不過，您可以更新元件屬性中「模式」accordion下方的「驗證模式」欄位，以指定自訂驗證。 ​​有關預設驗證的詳細資訊，請參閱上表中的元件說明。

  • 可調式表單欄位（例如數值方塊和電子郵件）可設定為包含專業的HTML5輸入類型。 當這些欄位著重在行動裝置和平板電腦時，鍵盤會先顯示常用於輸入欄位資訊的特定字母、數字和字元。 它可協助使用者快速輸入資訊，而不需在鍵盤上的字元集之間切換。 要允許對元件進行專門輸入，請在元件屬性中啟用「使用HTML類型編號​」複選框。

  • 您可以啟用「文字方塊」元件來接受Rich Text。 要為文本框啟用富格文本，請在元件屬性中啟用​允許富格文本​複選框。

  • 您可以啟用文字方塊、電子郵件和電話元件，從瀏覽器自動填寫設定中儲存的資訊自動填寫欄位（例如名稱、位址、信用卡、電話和電子郵件）的值。 要啟用此功能，請在元件屬性中選擇​啟用自動填充，然後選擇​自動填充屬性。 當使用者填寫最適化表格時，會從瀏覽器中的自動填寫描述檔或根據使用者先前填寫的值來建議這些值。 請注意，如果開啟使用者瀏覽器中的自動填色設定，自動填色就會運作。

  • 在元件屬性中以{value}={text}格式指定單選按鈕和複選框項的值。

  • 預設情況下，檔案附件元件允許用戶僅附加一個檔案。 不過，您可以配置元件屬性以支援多個附件。 此外，如果用戶以相同的檔案名附加了多個檔案，則附件可能會導致一些問題。 因此，建議在表單提交時，為每個已提交附件建立唯一的標識符。 若要這麼做：

    1. 在您的AEM Forms伺服器上，導航至​Adobe Experience Manager > 工具 > 操作 > Web控制台。
    2. 查找並點選​AdaptiveForms配置服務。
    3. 在「最適化Forms配置服務」對話框中，啟用​使檔案名唯一。 依預設會停用。

  • 若要讓使用者使用Safari瀏覽器附加PDF，請確定​application/pdf​已新增至「檔案附件」元件的「支援的檔案類型」屬性。 使用舊版AEM Forms建立的最適化表單在「支援的檔案類型」屬性中可包含​.pdf，而非​application/pdf。

有關最適化表單的更多最佳做法，請參閱使用最適化表單的最佳做法。

注意

最適化表單元件不支援從右到左(RTL)語言。 例如，希伯來文。

頁面工具列

頂端的頁面工具列提供多種選項，可讓您預覽表單、變更表單屬性及編輯表單版面。 您可以在製作表單時預覽表單，並依此進行變更。 在頁面工具列中，您會看到：

  • 切換側 面板切換側面板:可讓您顯示或隱藏側欄。

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

  • 模 擬器尺標:可讓您模擬不同顯示尺寸（例如平板電腦和手機）的表格外觀。

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

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

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

    • 開發人員:讓開發人員：

      • 探索表單的組成。
      • 除錯發生在何處和何時的項目，進而有助於解決問題。

    • 設計. 可讓您啟用或停用未列在側欄中的自訂元件或現成可用的元件。

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

元件工具欄

觸控UI中的元件工具列

當您選取元件時，會看到工具列，可讓您使用它。 您可以選擇剪下、貼上、移動和指定元件屬性。 您的選項包括：

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

B.Copy:您可以使用複製選項來複製元件，並將其貼到表單的其他位置。 貼上元件時，貼上的元件會獲取新的元素名稱，但保留複製的元件的屬性。

C.Cut:可使用剪切選項在自適應形式中將元件從一個位置移動到另一個位置。

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

E.插入:可讓您在選取的元件上方插入元件。

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

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

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

I.Parent:可讓您選取元件的父項。 例如，文字欄位位於子區段內，而子區段位於區段內。 區段位於參考根面板中，而最適化表單容器是參考根面板的父項。 對於元件，您可以看到所有選項以及從底部向上排序的層次結構。

例如，如果您點選​Parent​以取得文字方塊，您會看到：

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

J.其他:提供更多選項以使用所選元件。

  • 檢視SOM運算式
  • 將面板儲存為片段（僅限面板）
  • 新增子面板（僅限面板）
  • 新增面板工具列（僅限面板）
  • 取代（不適用於面板）

最適化表單頁面

最適化表單頁面是實際表單。 它與任何其他WCM頁面一樣，都是以WCM cq:Page元件為模型。 下圖顯示典型自適應表單的內容結構。

自適應表單WCM頁面的內容結構

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

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

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

  • rootPanel: 最適化表單的根面板。它可在項目節點下包含子面板。 每個包含根面板的面板都可以有與其相關聯的版面。 面板的版面配置決定了表單的排版方式。 例如，在Accordion版面中，其項目會排列為Accordion步驟。

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

  • 資產：此 節點包含用於製作表單的其他資訊。例如，表單模型詳細資訊、本地化詳細資訊等)。

本頁內容