設定最適化表單的樣式

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

本教學課程是建立第一個最適化表單系列中的步驟。 建議您依序依序依序執行系列，以了解、執行和示範完整的教學課程使用案例。

關於教學課程

您可以使用主題為最適化表單提供獨特的外觀和樣式。 您可以套用最適化表單編輯器隨附的現成主題，或建立您自己的自訂主題。 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元件中的標誌影像，然後點選 properties。 在image屬性中，點選X以移除現有的標誌影像。

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

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

      

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

   1. 點選「客戶ID」欄位，然後點選屬性。

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

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

   4. 對表單中的所有文本框、數值框和電子郵件欄位重複前三個步驟。

      

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

您可以使用主題編輯器建立自訂主題。 主題編輯器是功能全面的WYSIWYG編輯器。 將CSS套用至最適化表單的各種元件是視覺化方法。 它提供更精細的控制項，以設定最適化表單的元件和面板的樣式。

主題是獨立的實體，例如最適化表單。 其中包含最適化表單的元件和面板的樣式(CSS)。 樣式包含CSS屬性，例如背景顏色、狀態顏色、透明度、對齊方式和大小。 套用主題時，指定的樣式會套用至最適化表單的對應元件。

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

建立主題

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

2. 點選​建立​並選取​主題。 此時將顯示建立主題頁，其中包含建立主題所需的欄位。 Title​和​Name​欄位是必填欄位：

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

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

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

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

   

   圖： 主題編輯器，包含裝運地址 — add-update-form適用性表單

   

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

樣式頁眉和頁腳

頁首與頁尾為最適化表單提供一致且獨特的外觀。 一般而言，頁首包含組織的標誌和名稱，頁尾包含版權資訊，且這些資訊在組織的多種形式中保持不變。 要設定發運地址 — add-update-form適用性表單的頁眉和頁腳的樣式，請執行以下操作：

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

2. 在​Text​折疊式功能表中設定下列屬性，然後點選。

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

3. 點選標題介面工具集，然後點選​標題。 設定標題Widget樣式的選項會顯示在左側。 展開​「Dimension與位置」​折疊式功能表，將​Height​設為120px，然後點選。

4. 展開標題Widget的​Background​折疊式功能表，將​Background Color​設定為F6921E.

   暫留在「影像和漸層」上，點選「​影像​」>「+新增」，點選「​影像」。 設定下列屬性，然後點選。

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

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

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

6. 點選頁尾介面工具集，然後點選​頁尾。 展開​Background​折疊式功能表，將​Background Color​設定為F6921E，然後點選。

設定資料捕獲元件的樣式，並將背景應用到自適應表單

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

1. 點選「 客戶ID」欄位，然後點選「欄位Widget」選項。 設定下列屬性，然後點選。

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

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

   

設定按鈕的樣式

您可以使用自訂主題將相同樣式套用至最適化表單的所有按鈕，並使用內嵌樣式將樣式套用至特定按鈕。 要設定按鈕的樣式：

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

   折疊式面板	屬性	值
   背景	背景色彩	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. 在頂端列上，選取​樣式​選項。

   

3. 點選​Attach​按鈕，然後點選圖示。 在​Dimension和位置​折疊式功能表中設定以下屬性：

   屬性	值
   浮點數	左
   寬度	10%

4. 點選​政府核准的位址校樣​選項，然後點選圖示。 設定下列屬性：

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

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

   折疊式面板	屬性	值
   Dimension和位置	浮點數	右
   Dimension和位置	邊距	排名在前：5rem 對：14rem 底部：20px 左：20px
   背景	背景色彩	F6921E
   邊框	邊框顏色	F6921E

   

步驟5:附加部分：在自定義主題中使用Web字型

您可以使用各種字型來設計最適化表單。 在檢視最適化表單的所有裝置，都可能沒有設計最適化表單時使用的字型。 您可以使用Web字型服務將所需字型傳送至目標裝置。

Adobe Fonts 是網頁字型服務。您可以透過最適化表單來設定及使用服務。 若要在最適化表單中使用Adobe Fonts:

1. 建立Adobe Fonts帳戶、建立套件、將字型Myriad Pro新增至套件、發佈套件並取得套件ID。 需要在最適化表單中使用Adobe Fonts（Web字型）。

2. 在AEM Forms伺服器中，導覽至 Adobe Experience Manager > 工具 > Adobe Fonts。 現在，開啟設定資料夾。 如果配置已可用，請按一下​Create​按鈕以建立新實例。

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

3. 配置主題以使用Adobe Fonts配置。 在製作例項上，開啟主題編輯器中的​全域主題。 在主題編輯器中，導覽至「主題選項 > 設定」。 在「Adobe Fonts配置」欄位中，選擇套件，然後按一下「保存」。

   新增至​Adobe Fonts​的字型可供所有元件的​Text​折疊式功能表中選取。