設定最適化表單的樣式

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

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

關於教學課程

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

   3. 點選「上傳」，選取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. 點選​建立​並選取​主題。 此時將出現「建立主題」頁，其中包含建立主題所需的欄位。 標題和名稱欄位是必填欄位：

   • 標題： 指定主題的標題。例如， 全域主題。 標題可協助您從主題清單中識別主題。
   • 名稱： 指定主題的名稱。例如， 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的「背景」設定追蹤器，將「背景顏色」設為「F6921E.」

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

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

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

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

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

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

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

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

   

設定按鈕的樣式

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

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

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

   

步驟4:設定單個元件的樣式

某些樣式僅適用於特定元件。 這些元件在最適化表單編輯器中設定樣式。

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

2. 在頂端列上，選取​樣式​選項。

   

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

   屬性	值
   浮點數	左
   寬度	10%

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

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

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

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

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

1. 建立Adobe Typekit帳戶、建立套件、將字型Myriad Pro新增至套件、發佈套件並取得套件ID。 您必須在最適化表單中使用Adobe Typekit字型（網頁字型）。

2. 在AEM Forms伺服器中，導覽至 Adobe Experience Manager > 工具 > 部署 > Cloud Services。 在「Cloud Services」頁面上，導覽至「第三方服務 > Typekit」，然後按一下「Typekit」下的「立即配置​」。​如果配置已可用，請按一下+按鈕以建立新實例。

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

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

   添加到Typekit的字型可在所有元件的​Text​折疊式功能表中進行選擇。