設定最適化表單的樣式

瞭解如何建立自訂主題、設定個別元件的樣式，以及在主題中使用網頁字型

本教程是建立第一個自適應表單系列中的一個步驟。 建議依序依序依序排列，以瞭解、執行和展示完整的教學課程使用案例。

關於教學課程

您可以使用主題為最適化表單提供獨特的外觀和樣式。 您可以套用隨附於最適化表單編輯器的方塊外主題，或建立您自己的自訂主題。 AEM Forms提供主題編輯器以建立自訂主題。 單一主題可針對在行動裝置、平板電腦或桌上型電腦上開啟的相同最適化表單提供不同的外觀。 使用主題編輯器時，不需具備任何CSS或LESS的先前知識，但需要它。

在教學課程結束時，您將學習：

• 將立即可用的主題套用至最適化表單
• 使用主題編輯器建立最適化表單的主題
• 設定個別元件的樣式
• 附加部分：在自訂主題中使用網頁字型

在您完成教學課程後，表單看起來會類似下列：

開始之前

在您的本機電腦上下載標題樣式和標誌影像，如下所示。 shipping-address-add-update-form最適化表單的頁首使用頁首樣式和標誌影像。 標題樣式影像會出現在標題的右側。

取得檔案

取得檔案

步驟1:將主題套用至最適化表單

最適化表單編輯器提供多種現成可用的主題。 如果您打算不針對最適化表單使用自訂樣式，也可以使用現成可用的主題來發佈最適化表單。 主題與最適化表單無關。 您可以將相同的主題套用至多個調適性表單。 若要將主題套用至最適化表單：

1. 開啟最適化表單以進行編輯。

   http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

2. 最適化表單容器​的開啟屬性。 在屬性瀏覽器中，導覽至​Basic > 最適化表單主題。 最適化表單主題​欄位會列出所有現成可用的主題和自訂主題。 依預設，會套用「畫布」主題。

3. 從​最適化表單主題​欄位中選取主題。 例如，調查主題。 點選以套用選取的主題。

   

   圖：具有 預設主題的最適化表單

   

   圖：具 有調查主題的最適化表單

步驟2:更新最適化表單

上述設計需要變更現有最適化表單的預留位置文字和標誌。 執行下列步驟以進行必要的變更：

1. 變更標題的現有標誌和文字。 若要移除標誌：

   1. 在表單編輯器中開啟表單。

      http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

   2. 在header元件中點選標誌影像，然後點選屬性。 在image屬性中，點選X以移除現有的標誌影像。

   3. 點選​upload，選取logo.png，然後點選以儲存變更。 影像已下載於開始區段中。

   4. 點選標題文字、We.Retail，然後點選 edit。 將標題文字變更為we retail。 僅對we retail中的we應用粗體格式。

      

2. 移除標題並新增預留位置文字：

   1. 點選「Customer ID（客戶ID）」欄位並點選「屬性」。

   2. 將​Title​欄位的內容複製到​預留位置文字​欄位。

   3. 刪除​Title​欄位的內容，然後點選。

   4. 對表單中的所有文字方塊、數值方塊和電子郵件欄位重複上述三個步驟。

      

步驟3:為最適化表單建立自訂主題

您可以使用主題編輯器來建立自訂主題。 主題編輯器是功能強大的WYSIWYG編輯器。 它是將CSS套用至自適應表單各元件的視覺化方法。 它提供更精細的控制項，讓元件和面板在最適化表單中變樣。

主題是個別的實體，如最適化表單。 它包含最適化表單的元件和面板樣式(CSS)。 樣式包括CSS屬性，例如背景顏色、狀態顏色、透明度、對齊方式和大小。 應用主題時，指定的樣式將應用於自適應表單的相應元件。

在本教學課程中，您將設定頁首和頁尾、文字和數值元件、附件元件和按鈕的樣式。 讓我們從建立主題開始：

建立主題

1. 登入AEM作者例項，並導覽至​Adobe Experience Manager > Forms > Themes。 預設URL為http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes。

2. 點選「建立」並選取「主題」。 此時會出現建立主題頁面，其中包含建立主題所需的欄位。 Title​和​Name​欄位為必填欄位：

   • 標題： 指定主題的標題。例如，全域主題。 標題可協助您從主題清單中識別主題。
   • 名稱： 指定主題的名稱。例如，Global-Theme。 在儲存庫中建立具有指定名稱的節點。當您開始輸入標題時，系統會自動產生名稱欄位的值。 您可以變更建議的值。 名稱欄位只能包含英數字元、連字型大小和底線。 所有無效輸入都會以連字型大小取代。

3. 點選​Create。 將建立一個主題，並出現一個用於開啟表單進行編輯的對話框。 點選「開啟」，在新標籤中開啟新建立的主題。 主題在主題編輯器中開啟。 對於樣式，主題編輯器使用隨附於AEM Forms的現成可用最適化表單。

   有關使用主題編輯器UI的資訊，請參閱關於主題編輯器。

4. 點選「主題選項 > 設定」。 在​預覽表單​欄位中，選取​shipping-address-add-update-form​最適化表單，點選，點選​Save。 現在，主題編輯器已設定為使用您自己的最適化表單，而非預設的最適化表單。 點選「取消」以返回主題編輯器。

   

   圖：具 有shipping-add-update-form最適化表單的主題編輯器

   

   圖：具 有預設窗體的自適應窗體

樣式頁首和頁尾

頁首和頁尾為最適化表單提供一致且獨特的外觀。 一般而言，頁首包含組織的標誌和名稱，頁尾包含版權資訊，而且這些資訊在組織的多種形式上都相同。 要設定發運地址添加更新表單自適應表單的頁眉和頁腳的樣式，請執行以下操作：

1. 導覽「選擇器」面板中的「標題 > 文字」選項。 「選擇器」面板位於主題編輯器的左側。 如果面板不可見，請點選「切換側面板」。

2. 在​Text accordion中設定下列屬性，然後點選。

   屬性	值
   字型系列	Arial
   字型色彩	FFFFFF
   字型大小	54px

3. 點選標題介面工具集，點選​標題。 標題介面工具集樣式的選項會顯示在左側。 展開​Dimensions & Position accordion，將​Height​設為120px，然後點選。

4. 展開標題Widget的​Background accordion，將​Background Color​設為F6921E.

   將滑鼠指標暫留在「影像與漸層」上，點選「影像」。 ​​​​​​設定下列屬性，然後點選。

   屬性	值
   影像	上傳header-style.png。 影像已下載於開始區段中。
   位置	右下
   並排顯示	不重複

5. 在主題編輯器中，點選頁首中的標誌，然後點選「頁首標誌」。 ​​展開「維度與位置」accordion，設定下列屬性，然後點選。

   邊距	值
   邊距	頂部：1.5rem 底部：-35px 左：1rem 提示：點 選連結 圖示可為每個欄位提供不同的值。
   高度	4.75rem

6. 點選頁尾Widget並點選​頁尾。 展開​Background accordion，將​Background Color​設為F6921E，然後點選。

設定資料擷取元件的樣式，並將背景套用至最適化表單

您可以在最適化表單中使用多個元件來擷取資料。 例如，文字方塊和數值方塊。 您可以提供與所有資料擷取元件相同的樣式，或為每個元件提供個別的樣式。 在本教學課程中，相同的樣式會套用至數值方塊（客戶ID、郵遞區號）和文字方塊（客戶ID、名稱、送貨地址、狀態、電子郵件）。 要設定資料捕獲元件的樣式：

1. 點選「客戶ID」欄位，然後點選「欄位介面工具集」選項。 設定下列屬性，然後點選。

   折疊式面板	屬性	值
   邊框	邊框顏色	A7A9AC
   邊框	邊框半徑	頂部：7px 右：7px 底部：7px 左：7px
   文字	字型系列	Arial
   文字	字型色彩	939598
   文字	字型大小	18px
   尺寸和位置	寬度	60%
   尺寸和位置	邊距	左：10rem

2. 點選​客戶ID​欄位上方的空白區域，然後點選​回應式面板容器。 將​背景 > 背景顏色​設定為F1F2F2。 點選。

   

設定按鈕的樣式

您可以使用自訂主題將相同樣式套用至最適化表單的所有按鈕，而內嵌樣式則可將樣式套用至特定按鈕。 要設定按鈕的樣式，請執行以下操作：

1. 點選​Submit​按鈕，點選​Button​選項。 設定下列屬性，然後點選。

   折疊式面板	屬性	值
   背景	背景色彩	F6921E
   邊框	邊框顏色	F6921E
   邊框	邊框半徑	頂部：7px 右：7px 底部：7px 左：7px
   文字	字型系列	Arial
   文字	字型色彩	FFFFFF
   文字	字型大小	18px

2. 將自訂主題「全域主題」套用至最適化表單。如果樣式未反映在最適化表單上，請清除瀏覽器快取，然後再試一次。

   

步驟4:為各個元件設定樣式

有些樣式只適用於特定元件。 這些元件是在最適化表單編輯器中建立樣式的。

1. 開啟最適化表單以進行編輯。 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

2. 在頂欄上，選擇​Style​選項。

   

3. 點選「Attach」按鈕，然後點選「」圖示。 在​Dimensions and Position accordion中設定以下屬性：

   屬性	值
   浮點	左
   寬度	10%

4. 點選「政府機關核准的位址證明」選項，點選「」圖示。 設定下列屬性：

   折疊式面板	屬性	值
   尺寸及位置	浮點	左
   尺寸及位置	寬度	73%
   尺寸及位置	邊距	左：10px
   尺寸及位置	高度	40px
   尺寸及位置	邊距	右：2rem 左：10rem
   背景	背景色彩	FFFFFF
   邊框	邊框寬度	1px
   邊框	邊框樣式	堅固
   邊框	邊框顏色	A7A9AC
   邊框	邊框半徑	7px
   文字	字型系列	Arial
   文字	字型色彩	BCBEC0
   文字	字型大小	18px
   文字	行高	2

5. 點選​Submit​按鈕，點選圖示。 設定下列屬性：

   折疊式面板	屬性	值
   尺寸和位置	浮點	右
   尺寸和位置	邊距	頂部：5rem 右：14rem 底部：20px 左：20px
   背景	背景色彩	F6921E
   邊框	邊框顏色	F6921E

   

步驟5:附加部分：在自訂主題中使用網頁字型

您可以使用各種字型來設計最適化表單。 在檢視最適化表單的所有裝置上，可能沒有用於設計最適化表單的字型。 您可以使用網頁字型服務，將必要的字型傳送至目標裝置。

Adobe Fonts 是網頁字型服務。您可以設定並使用具有最適化表單的服務。 要在自適應形式中使用Adobe Fonts:

1. 建立Adobe Fonts帳戶、建立套件、將Myriad Pro字型加入套件、發佈套件並取得套件ID。 必須在最適化表單中使用Adobe Fonts（Web字型）。

2. 在AEM Forms伺服器中，導覽至 Adobe Experience Manager > 工具 hammer](assets/hammer.png) > Adobe Fonts。 ![現在，開啟配置資料夾。 如果配置已可用，請按一下​建立​按鈕以建立新實例。

   在「建立配置」對話框中，為配置指定​Title ，然後按一下「建立」。 ]​[​系統會將您重新導向至設定頁面。 在出現的編輯元件對話框中，提供​套件ID​並按一下​確定。

3. 設定您的主題以使用Adobe Fonts組態。 在作者實例上，在主題編輯器中開啟​全局主題。 在主題編輯器中，導覽至「主題選項​​ > 設定」。 在​Adobe Fonts Configuration​欄位中，選取套件，然後按一下​Save。

   新增至​Adobe Fonts​的字型可供所有元件的​Text accordion中選取。