Show Menu
主題×

設定最適化表單的樣式

瞭解如何建立自訂主題、設定個別元件的樣式,以及在主題中使用網頁字型
本教學課程是「建立您的第 一個最適化表單 」系列的步驟。 建議依序依序依序排列,以瞭解、執行和展示完整的教學課程使用案例。

關於教學課程

您可以使用主題為最適化表單提供獨特的外觀和樣式。 您可以套用隨附於最適化表單編輯器的方塊外主題,或建立您自己的自訂主題。 AEM提 Forms 供主題 編輯器 ,以建立自訂主題。 單一主題可針對在行動裝置、平板電腦或桌上型電腦上開啟的相同最適化表單提供不同的外觀。 使用主題編輯器時,不需具備任何CSS或LESS的先前知識,但需要它。
在教學課程結束時,您將學習:
  • 將立即可用的主題套用至最適化表單
  • 使用主題編輯器建立最適化表單的主題
  • 設定個別元件的樣式
  • 附加部分:在自訂主題中使用網頁字型
在您完成教學課程後,表單看起來會類似下列:

開始之前

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

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

最適化表單編輯器提供多種現成可用的主題。 如果您打算不針對最適化表單使用自訂樣式,也可以使用現成可用的主題來發佈最適化表單。 主題與最適化表單無關。 您可以將相同的主題套用至多個調適性表單。 若要將主題套用至最適化表單:
  1. 開啟最適化表單以進行編輯。
  2. 開啟最適化表 單容器的屬性 。 在屬性瀏覽器中,導覽至「基 >最適 化表單主題」 。 「 最適化表單主題 」欄位會列出所有現成可用的主題和自訂主題。 依預設,會套用「畫布」主題。
  3. 從「最適化表單主題」 欄位中選取主題 。 例如,「調 查」主題 。 點 ,以套用選取的主題。
    **圖:** 具有預設主題的最適化表單
    **圖:** 具有調查主題的最適化表單

步驟2:更新您的最適化表單

上述設計需要變更現有最適化表單的預留位置文字和標誌。 執行下列步驟以進行必要的變更:
  1. 變更標題的現有標誌和文字。 若要移除標誌:
    1. 在表單編輯器中開啟表單。
    2. 在頁首元件中點選標誌 影像 ,然後點選 屬性 。 在image屬 性中 ,點選X以移除現有的標誌影像。
    3. 選「upload aem_6_3_forms_save,以儲存變更。 影像已下載至「開始 之前 」區段。
    4. 點選標題文 We.Retail 字,點 edit 。 將頁首文字變更為 we retail 。 僅將粗體格式套用 we we retail
  2. 移除標題並新增預留位置文字:
    1. 點選「客戶ID」欄位並點選 properties。
    2. 將「標題」欄位的內 容複製 到「預留位 置文字」欄位
    3. 刪除「標題 」欄位的內容,並 點選aem_6_3_forms_save
    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 adaptive表單、點選 、點選 ​SaveJost。 現在,主題編輯器已設定為使用您自己的最適化表單,而非預設的最適化表單。 點選「 取消 」可返回主題編輯器。
    **圖:** 具有shipping-address-add-update-form自適應表單的主題編輯器
    **圖:** 具有預設表單的自適應表單

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

您可以在最適化表單中使用多個元件來擷取資料。 例如,文字方塊和數值方塊。 您可以提供與所有資料擷取元件相同的樣式,或為每個元件提供個別的樣式。 在本教學課程中,相同的樣式會套用至數值方塊(客戶ID、郵遞區號)和文字方塊(客戶ID、名稱、送貨地址、狀態、電子郵件)。 要設定資料捕獲元件的樣式:
  1. 點選「客 戶ID 」欄位,然後點 選「欄位介面工具集 」選項。 設定下列屬性,
    折疊式面板 屬性
    邊框 邊框顏色 A7A9AC
    邊框 邊框半徑
    • 頂部:7px
    • 右:7px
    • 底部:7px
    • 左:7px
    文字 字型系列 Arial
    文字 字型色彩 939598
    文字 字型大小 18px
    尺寸和位置 寬度 60%
    尺寸和位置 邊距
    • 左:10rem
  2. 點選「Customer ID(客戶ID)」欄位上方的空白區 ,然後點 選「Responsive Panel Container(回應面板容器) 」。 將「背 >背 景顏色 」設定為F1F2F2。 點

設定按鈕的樣式

您可以使用自訂主題,將相同的樣式套用至最適化表單的所有按鈕,並 將樣式套用 至特定按鈕。 要設定按鈕的樣式,請執行以下操作:
  1. 點選「 Submit 」按鈕並點選「 Button 」選項。 設定下列屬性,
    折疊式面板 屬性</b
    背景 背景色彩 F6921E
    邊框 邊框顏色 F6921E
    邊框 邊框半徑
    • 頂部:7px
    • 右:7px
    • 底部:7px
    • 左:7px
    文字 字型系列 Arial
    文字 字型色彩 FFFFFF
    文字 字型大小 18px
  2. 將自訂主題 「全域主題」套用至最適化表單。 如果樣式未反映在最適化表單上,請清除瀏覽器快取,然後再試一次。

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

有些樣式只適用於特定元件。 這些元件是在最適化表單編輯器中建立樣式的。
  1. 在頂欄上,選取「樣式 」選項
  2. 點選「 Attach (附加)」按鈕並點 editicon」。 在「維度與位置」accordion中 設定下列屬性 :
    屬性
    浮點
    寬度
    10%
  3. 點選「 Government approved address proof (政府機關核准的地址證明 選「aem_6_3_editicon」。 設定下列屬性:
    折疊式面板 屬性
    尺寸及位置 浮點
    尺寸及位置 寬度 73%
    尺寸及位置 邊距
    • 左:10px
    尺寸及位置 高度 40px
    尺寸及位置 邊距
    • 右:2rem
    • 左:10rem
    背景 背景色彩 FFFFFF
    邊框 邊框寬度 1px
    邊框 邊框樣式 堅固
    邊框 邊框顏色 A7A9AC
    邊框 邊框半徑 7px
    文字 字型系列 Arial
    文字 字型色彩 BCBEC0
    文字 字型大小 18px
    文字 行高 2
  4. 點選「 Submit (送出)」按鈕並點 」圖示。 設定下列屬性:
    折疊式面板 屬性
    尺寸和位置 浮點
    尺寸和位置 邊距
    • 頂部:5rem
    • 右:14rem
    • 底部:20px
    • 左:20px
    背景 背景色彩 F6921E
    邊框 邊框顏色 F6921E

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

您可以使用各種字型來設計最適化表單。 在檢視最適化表單的所有裝置上,可能沒有用於設計最適化表單的字型。 您可以使用網頁字型服務,將必要的字型傳送至目標裝置。
Adobe Fonts 是網頁字型服務。 您可以設定並使用具有最適化表單的服務。 要在最適 Adobe Fonts 化形式中使用:
Adobe Fonts Typekit ,並隨附於Creative Cloud和其他訂閱。 了解更多 .
  1. 建立 Adobe Fonts 帳戶、建立套件、將Myriad Pro字型加入套件、發佈套件並取得套件ID。 必須在最適化 Adobe Fonts 表單中使用(網頁字型)。
  2. 在AEM伺 Forms 服器中,導覽至 Experience Manager > HammerTools > Adobe FontsChammerChammerTools。 現在,開啟配置資料夾。 如果配置已可用,請按一下「創 」按鈕建立新實例。
    在「建立配置」對話框中,為配 置指定Title ,然後按一下「 建立」 。 系統會將您重新導向至設定頁面。 在出現的「 編輯元件 」對話方塊中,提供您的套 件ID ,然後按一下「 確定 」。
  3. 設定您的主題以使用 Adobe Fonts 設定。 在作者實例上,在主題編 輯器中開啟 「全局主題」。 在主題編輯器中,導覽至「主 題選項 >設 」。 在「 Adobe字型設定 」欄位中,選取套件,然後按一下「 儲存」
    新增至 Adobe Fonts的字型 ,可在所有元件的 Text accordion中選取。