建立自訂最適化表單範本

必備條件

• 了解AEM 頁面範本和最適化表單編寫

• 了解AEM 用戶端程式庫

適用性表單範本

適用性表單範本是專用的AEM頁面範本，具有用於建立適用性表單的特定屬性和內容結構。 範本已預先設定配置、樣式和基本初始內容結構。

建立表單後，對原始範本內容結構所做的任何變更都不會反映在表單中。

預設最適化表單範本

AEM快速入門提供下列最適化表單範本：

• 調查範本：可讓您使用設定了多欄的回應式版面來建立單頁最適化表單。 版面會根據您要顯示表單之各種螢幕的尺寸自動調整。
• 簡單註冊模板：可讓您使用精靈版面來建立多步驟最適化表單。 在此配置中，您可以為每個步驟指定步驟完成表達式，該表達式將在嚮導繼續到下一個步驟之前驗證。
• 頁簽式登記模板：可讓您使用左側的索引標籤版面來建立多索引標籤適用性表單，以便以任何隨機順序造訪索引標籤。
• 高級註冊模板：可讓您使用多個索引標籤和精靈建立表單。 它使用左上標籤版面，可讓您以任何順序造訪標籤。 它使用Adobe Document Cloud設計服務進行簽署和驗證。
• 空白範本：可讓您建立表單，不含任何頁首、頁尾和初始內容。 您可以新增元件，例如文字方塊、按鈕和影像。 空白範本可讓您建立表單，以在AEM網站頁面🔗中內嵌。

這些範本的sling:resourceType屬性已設為對應的頁面元件。 頁面元件會轉譯CQ頁面，其中包含最適化表單容器，而最適化表單則轉譯為最適化表單。

下表列舉範本與頁面元件之間的關聯：

使用範本編輯器建立最適化表單範本

您可以使用範本編輯器來指定最適化表單的結構和初始內容。 例如，您希望所有表單作者在註冊表單中都有幾個文本框、導航按鈕和提交按鈕。 您可以建立模板，供作者用來建立與其他註冊表單一致的表單。 AEM範本編輯器可讓您：

• 在結構層中添加表單的頁眉和頁腳元件
• 提供表單的初始內容。
• 指定主題。
• 指定提交、重設和導覽等動作。

如需詳細資訊，請參閱範本編輯器。

從CRXDE建立最適化表單範本

您可以建立範本，並使用範本建立最適化表單，而不使用可用的範本。 自訂範本是以參考最適化表單容器和頁面元素（例如頁首和頁尾）的各種頁面元件為基礎。

您可以使用網站的基礎頁面元件來建立這些元件。 或者，您也可以擴充使用現成範本的最適化表單的頁面元件。

執行以下步驟以建立自定義模板，如simpleEnrollmentTemplate。

1. 導覽至製作執行個體上的CRXDE Lite。

2. 在/apps目錄下，建立應用程式的資料夾結構。 例如，如果應用程式名稱為mycompany，請建立具有此名稱的資料夾。 應用程式資料夾通常包含元件、配置、模板、src和安裝目錄。 在此範例中，建立元件、設定和範本資料夾。

3. 導覽至資料夾/libs/fd/af/templates。

4. 複製simpleEnrollmentTemplate節點。

5. 導覽至資料夾/apps/mycompany/templates。 按一下右鍵，然後選擇​貼上。

6. 如有必要，請重新命名您複製的範本節點。 例如，將其更名為註冊模板。

7. 導覽至/apps/mycompany/templates/enrollment-template位置。

8. 修改jcr:content節點的jcr:title和jcr:description屬性，以區分範本與您複製的範本。

9. 修改的模板的jcr:content節點包含guideContainer和guideformtitle元件。 guideContainer 是容納最適化表單的容器。guideformtitle元件顯示應用程式名稱、說明等。

   您可以包含自訂元件或parsys元件，而非guideformtitle。 例如，刪除guideformtitle，然後添加自定義元件或parsys元件節點。 請確定元件的sling:resourceType屬性會參考元件，並在頁面component.jsp檔案中定義相同的屬性。

10. 導覽至/apps/mycompany/templates/enrollment-template/jcr:content位置。

11. 開啟​Properties​標籤，並將cq:designPath屬性的值變更為/etc/designs/mycompany。

12. 現在為cq:Page類型建立/etc/designs/mycompany節點。

建立最適化表單頁面元件

自訂範本的樣式與預設範本相同，因為範本會參照頁面元件/libs/fd/af/components/page/base。 您可以找到元件引用，該元件引用為在節點/apps/mycompany/templates/enrollment-template/jcr:content中定義的屬性sling:resourceType。 由於基礎是核心產品元件，因此請勿修改此元件。

1. 導覽至節點/apps/mycompany/templates/enrollment-template/jcr:content ，並將屬性sling:resourceType的值修改至/apps/mycompany/components/page/enrollmentpage

2. 將節點/libs/fd/af/components/page/base複製到資料夾/apps/mycompany/components/page。

3. 將複製的元件更名為enrollmentpage。

4. （僅限您已有內容頁面） 如果您的網站有現有元件，請執行下列步 contentpage驟(a-d)。如果您的網站沒有現有的contentpage元件，可以保留resourceSuperType屬性以指向OOTB基本頁面。

   1. 對於enrollmentpage節點，將屬性sling:resourceSuperType的值設定為mycompany/components/page/contentpage。 contentpage元件是您網站的基本頁面元件。 其他頁面元件可加以擴充。 移除enrollmentpage下的指令碼檔案，但head.jsp、content.jsp和library.jsp除外。 sling:resourceSuperType元件（在此例中為contentpage）包含所有此類指令碼。 標題（包括導航欄和頁尾）繼承自contentpage元件。

   2. 開啟檔案head.jsp。

      JSP檔案包含行<cq.include script="library.jsp"/>。

      library.jsp檔案包含guide.theme.simpleEnrollment用戶端程式庫，其中包含最適化表單的樣式。

      頁面元件enrollmentpage具有專用的head.jsp檔案，該檔案覆蓋contentpage元件的head.jsp檔案。

   3. 將contentpage元件的head.jsp檔案中的所有指令碼包含到enrollmentpage元件的head.jsp檔案中。

   4. 在content.jsp指令碼中，您可以新增其他頁面內容或參考至頁面呈現時包含的其他元件。 例如，如果添加自定義元件applicationformheader，請確保將以下引用添加到JSP檔案中的元件：

      <cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>

      同樣地，如果您在範本節點結構中新增parsys元件，也納入自訂元件。

建立最適化表單用戶端程式庫

新模板的enrollmentpage元件的head.jsp檔案包含客戶端庫guide.theme.simpleEnrollment。 預設模板還使用此客戶端庫。 使用下列方法的，更改新模板中的樣式：

• 定義自訂主題，並將預設主題guide.theme.simpleEnrollment替換為自訂主題。
• 在/etc/designs/mycompany下定義新的用戶端程式庫。 在jsp頁中的預設主題條目後面包括客戶端庫。 在此客戶端庫中包含所有被覆蓋的樣式和其他Java Script檔案。