製作調適型表單簡介 introduction-to-authoring-adaptive-forms

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

概觀 overview

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

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

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

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

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

如需建立最適化表單的詳細資訊,請參閱建立最適化表單

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

用於編寫最適化表單的觸控最佳化UI是直覺式的,並提供:

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

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

最適化表單編寫UI

A. ​側欄​ B. ​頁面工具列​ C. ​最適化表單頁面

側邊欄 sidebar

此側邊欄可讓您

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

側邊欄

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

側邊欄包含以下瀏覽器:

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

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

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

  • 屬性瀏覽器

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

    選取元件,然後選取 欄位層級 > 最適化表單容器,然後選取 cmppr

  • 資產瀏覽器

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

  • 元件瀏覽器

    包含可用來建置最適化表單的元件。 您可以將元件從拖曳到最適化表單上以新增表單元素,並依需求設定新增的元素。 下表描述元件瀏覽器中列出的元件。

元件
功能
Adobe Sign 區塊
當使用 Adobe Sign 簽署時,為需要填寫的欄位新增有預留位置的文字區塊。
按鈕
新增按鈕,您可以將其設定為執行動作,例如儲存、重設、移至下一個、移至上一個等。
Captcha
使用Google reCAPTCHA服務新增驗證碼驗證。 如需詳細資訊,請參閱在最適化表單中使用驗證碼
圖表
新增可在調適型表單和檔案中使用的圖表,以視覺化方式呈現可重複面板和表格列中的二維資料。
核取方塊
新增核取方塊。
資料輸入欄位
在表單中使用日期輸入欄位元件,讓客戶分別在三個方框中填入日、月和年。您可以自訂元件的外觀和風格,並變更日期格式。例如,您可以讓客戶以 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啟用的調適型表單中的預先定義檔案格式集。 如需詳細資訊,請參閱支援的檔案格式
檔案附件清單
新增欄位,此欄位會列出使用檔案附件元件上傳的所有附件。
標頭
新增頁首,其中通常包括公司標誌、表單標題和摘要。
頁尾
新增頁尾,其中通常包括版權資訊和其他頁面的連結。
影像
可讓您插入影像。
影像選擇
可讓您的客戶選取影像來提供資訊。您可以使用這些資訊為您的客戶提供個人化服務。
下一個按鈕
新增按鈕用於瀏覽到表單的下一個面板。
數值方塊
新增欄位用於擷取數值
數值步進器
在表單中使用數值步進器,可讓您的客戶輸入數值,他們可以根據預先定義的步長增加或減少該數值。
面板

新增面板或子面板。

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

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

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

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

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

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

標題
指定自適應表單的標題。
驗證步驟

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

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

使用元件的最佳作法 best-practices

使用最適化表單元件時應記住的一些最佳實務和要點如下:

  • 每個元件都有相關的屬性,這些屬性控制其外觀和功能。 若要設定元件的屬性,請選取元件,然後選取 cmppr ,以在[屬性]瀏覽器中開啟元件屬性。

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

  • 只要可在表單上看到標題,您就可以修改內嵌在表單編輯器中的最適化表單元件的Title屬性,而無需開啟Properties瀏覽器。 若要這麼做:

    1. 選取以選取具有​ Title ​屬性且其​ 隱藏標題 ​屬性已停用的元件。

    2. 選取 aem_6_3_edit 讓標題可編輯。

    3. 修改標題並選取Return鍵,或選取元件之外的任意位置以儲存變更。 選取Esc鍵以捨棄變更。

  • 有些最適化表單元件(如電子郵件和電話)包含現成可用的驗證模式。 不過,您可以更新元件屬性中「模式」摺疊式功能表下的​ 驗證模式 ​欄位,以指定自訂驗證。 請參閱上表中的元件說明,以取得預設驗證的詳細資訊。

  • 最適化表單欄位(例如數值方塊和電子郵件)可設定為包含專門的HTML5輸入型別。 當這些欄位成為行動裝置和平板電腦上的焦點時,鍵盤會預先顯示特定字母、數字和字元,這些通常是用來在欄位中輸入資訊。 它可協助使用者快速輸入資訊,而不需在鍵盤上的字元組之間切換。 若要允許專門輸入元件,請啟用其元件屬性中的​ 使用HTML型別編號 ​核取方塊。

  • 您可以啟用文字方塊元件來接受富文字。若要啟用文字方塊的RTF文字,請啟用元件屬性中的​ 允許RTF文字 ​核取方塊。

  • 您可以啟用「文字方塊」、「電子郵件」和「電話」元件,以自動填寫名稱、地址、信用卡、電話和電子郵件等欄位值,這些值來自瀏覽器自動填寫設定中儲存的資訊。 若要啟用此功能,請在元件屬性中選取​ 啟用Autofill,然後選取​ Autofill屬性。 當使用者填寫最適化表單時,會根據瀏覽器中自動填寫設定檔的值或使用者先前填寫的值來建議值。 請注意,如果開啟使用者瀏覽器中的自動填寫設定,自動填寫即可運作。

  • 在元件屬性中以{value}={text}格式指定選項按鈕和核取方塊專案的值。

  • 依預設,檔案附件元件只允許使用者附加一個檔案。 不過,您可以設定元件屬性以支援多個附件。 此外,如果使用者使用相同的檔案名稱附加多個檔案,則附件可能會導致一些問題。 因此,建議您在提交表單時,為每個已提交的附件建立唯一識別碼的關聯。 若要這麼做:

    1. 在您的AEM Forms伺服器上,瀏覽至​ Adobe Experience Manager > 工具 > 作業 > 網頁主控台
    2. 尋找並選取​ 最適化Forms組態服務
    3. 在「最適化Forms組態服務」對話方塊中,啟用​ 將檔案名稱設為唯一。 預設為停用。
  • 若要讓使用者能夠使用Safari瀏覽器附加PDF,請確定​ application/pdf ​已新增至「檔案」附件元件的「支援的檔案型別」屬性。 以舊版AEM Forms建立的最適化表單在「支援的檔案型別」屬性中可能包含​ .pdf,而非​ application/pdf

如需最適化表單的更多最佳實務,請參閱使用最適化表單的最佳實務

NOTE
最適化表單元件不支援由右至左(RTL)語言。 例如,希伯來文。

頁面工具列 page-toolbar

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

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

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

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

  • 編輯:讓您選取其他模式,例如:編輯樣式開發人員 ​和​ 設計

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

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

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

      • 了解表單的組成。
      • 找出狀況及其發生的時間和位置,這反過來有助於解決問題。
    • 設計。可讓您啟用或停用自訂元件或側邊欄未列出的立即可用元件。

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

元件工具列 component-toolbar

觸控式 UI 中的元件工具列

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

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

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

C.剪下:您可以使用剪下選項,在調適型表單中將元件從一個位置移動到另一個位置。

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

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

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

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

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

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

例如,如果您選取文字方塊的​ Parent,您會看到:

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

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

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

最適化表單頁面 af-page

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

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

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

  • guideContainer:最適化表單的根目錄,在最適化表單UI中標示為​ 最適化表單的開頭。 在此元件中,您可以指定:

    • 最適化表單的行動佈局:定義行動裝置上的表單外觀。
    • 感謝頁面:定義使用者提交表單後被重新導向的頁面。
    • 提交動作:定義使用者提交表單後伺務器如何處理表單。
    • 設定樣式:指定用於自訂表單外觀的 CSS 檔案路徑。
  • rootPanel: ​最適化表單的根面板。 它可以在項目節點下包含子面板。每個面板 (包含根面板) 都可以有相關聯的版面。面板的版面決定了表單的佈局方式。例如,在摺疊式版面中,其項目是以摺疊式步驟加以佈局。

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

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

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2