設定最適化表單的樣式

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

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

關於教學課程

您可以使用主題為最適化表單提供獨特的外觀和樣式。 您可以套用最適化表單編輯器隨附的現成主題，或建立您自己的自訂主題。 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. 從 最適化表單主題 欄位。 例如， 調查主題. 點選 aem_6_3_forms_save ，以應用所選主題。

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

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

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

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

步驟2:更新最適化表單

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

  1. 變更標題的現有標誌和文字。 要刪除徽標，請執行以下操作：

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

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

    2. 點選中的標誌影像 標題 元件與分接器 cppr 屬性. 在 影像 屬性，點選X以移除現有的標誌影像。

    3. 點選 上傳，請選取logo.png ，然後點選 aem_6_3_forms_save 以儲存變更。 影像已下載於 開始之前 區段。

    4. 點選標題文字， We.Retail，然後點選 aem_6_3_edit 編輯. 將標題文字變更為 we retail. 只將粗體格式套用至 wein we retail.

      we-retail-logo-text

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

    1. 點選「客戶ID」欄位並點選 cppr 屬性。

    2. 複製 標題 欄位至 佔位符文本 欄位。

    3. 刪除 標題 欄位和點選 aem_6_3_forms_save.

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

      更新的adaptive-form

步驟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 適用性表單，點選 aem_6_3_forms_save，點選 儲存. 現在，主題編輯器已設定為使用您自己的最適化表單，而非預設的最適化表單。 點選 取消 返回主題編輯器。

    自訂主題

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

    建立主題

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

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

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

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

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

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

  4. 展開 背景 標題widget的折疊式功能表，設定 背景顏色 to F6921E.

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

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

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

    邊距 值
    邊距
    • 排名在前：1.5rem
    • 底部：-35px
    • 左：1rem

    提示： 點選 連結圖示，為每個欄位提供不同的值。
    高度 4.75rem

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

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

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

  1. 點選 客戶ID 欄位並點選 欄位介面工具集 選項。 設定下列屬性並點選 aem_6_3_forms_save.

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

  2. 點選 客戶ID 欄位和點選 回應式面板容器. 設定 背景 > 背景顏色 到F1F2F2。 點選 aem_6_3_forms_save.

設定按鈕的樣式

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

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

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

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

    style-data-capture-components

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

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

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

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

    樣式選項

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

    屬性 值
    浮點數 左
    寬度 10%

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

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

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

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

    stleed-adaptive-form-1

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

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

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

注意

typekit-to-adobe-fonts Typekit 現在稱為Adobe Fonts，並隨附於Creative Cloud和其他訂閱。 了解更多.

  1. 建立 Adobe Fonts 帳戶、建立套件、將字型Myriad Pro新增至套件、發佈套件，以及取得套件ID。 必須使用 Adobe Fonts （網頁字型）。

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

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

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

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

本頁內容