設定最適化表單的樣式

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

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

關於教學課程

您可以使用主題為最適化表單提供獨特的外觀和樣式。 您可以套用最適化表單編輯器隨附的現成主題，或建立您自己的自訂主題。 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. 開啟屬性 適用性表單容器. 在屬性瀏覽器中，導覽至 基本 > 最適化表單主題. 此 最適化表單主題 欄位會列出所有現成可用和自訂主題。 依預設，會套用畫布主題。

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，然後點選 編輯. 將標題文字變更為 we retail. 只將粗體格式套用至 wein we retail.

   

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

   1. 點選「客戶ID」欄位並點選 屬性。
   2. 複製 標題 欄位至 佔位符文本 欄位。
   3. 刪除 標題 欄位和點選 .
   4. 對表單中的所有文本框、數值框和電子郵件欄位重複前三個步驟。

   

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

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

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

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

建立主題

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

2. 點選 建立 選取 主題. 此時將出現「建立主題」頁，其中包含建立主題所需的欄位。 標題和名稱欄位是必填欄位：

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

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

   如需使用主題編輯器UI的相關資訊，請參閱 關於主題編輯器.

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

   

   圖： 具有裝運地址添加更新表單適用性表單的主題編輯器

   

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

樣式頁首和頁尾

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

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

2. 在 文字 折疊式功能表及點選 .

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

3. 點選頁首介面工具集並點選 標題. 設定標題Widget樣式的選項會顯示在左側。 展開 Dimension與位置 折疊式功能表，設定 高度 to 120px，然後點選 .

4. 展開標題Widget的「背景」設定追蹤器，然後設定 背景顏色 to F6921E.

   暫留在 影像和漸層 > +新增，點選 影像. 設定下列屬性並點選 .

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

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

1. 點選頁尾介面工具集並點選 頁尾. 展開 背景 折疊式功能表，設定 背景顏色 to F6921E，然後點選 .

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

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

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

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

   

設定按鈕的樣式

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

1. 點選 提交 按鈕並點選 按鈕 選項。 設定下列屬性並點選 .

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

   

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

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

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

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

   

3. 點選 附加 按鈕並點選 表徵圖。 在 Dimension和位置 折疊式功能表：

   屬性	值
   浮點數	左
   寬度	10%

4. 點選 政府批准的地址證明 選項，然後點選 表徵圖。 設定下列屬性：

1. 點選 提交 按鈕並點選 表徵圖。 設定下列屬性：

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

您可以使用各種字型來設計最適化表單。 在檢視最適化表單的所有裝置，都可能沒有設計最適化表單時使用的字型。 您可以使用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的字型可在 文字 所有元件的折疊式功能表。

Business.Adobe.com 資源

Cms Cloud Personalized Experiences Embedded Charts Mobile Forms Dynamic Media Customer Experience Management