文件AEM 6.5使用手冊

最適化表單的樣式 do-not-publish-style-your-adaptive-form

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • 管理員
  • 使用者
  • 開發人員

瞭解如何建立自訂主題、設定個別元件的樣式，以及在主題中使用Web Fonts。

hero-image

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

關於教學課程 about-the-tutorial

您可以使用主題來為最適化表單提供獨特的外觀和樣式。 您可以套用最適化表單編輯器隨附的現成主題，或是建立您自己的自訂主題。 AEM Forms提供主題編輯器以建立自訂主題。 單一主題可為在行動裝置、平板電腦或桌上型電腦上開啟的相同最適化表單提供不同外觀。 使用主題編輯器不需要有CSS或LESS的任何先前知識，但這是必要的。

在本教學課程結束時，您應該能夠進行下列工作：

  • 將立即可用的主題套用至最適化表單
  • 使用主題編輯器建立最適化表單的主題
  • 個別元件的樣式
  • 額外區段：在自訂主題中使用Web Fonts

完成本教學課程後，您的表單應看起來類似下列內容：

具有自訂主題的表單

開始之前 before-you-start

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

取得檔案

取得檔案

步驟1：將主題套用至最適化表單 step-apply-a-theme-to-your-adaptive-form

調適型表單編輯器提供多個現成可用的主題。 如果您不打算將自訂樣式用於最適化表單，也可以使用現成可用的主題發佈最適化表單。 主題與調適型表單無關。 您可以將相同主題套用至多個最適化表單。

若要將佈景主題套用至最適化表單：

  1. 開啟最適化表單進行編輯。

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

  2. 開啟​ 最適化表單容器 ​的屬性。 在屬性瀏覽器中，瀏覽至​ 基本 > 最適化表單主題。 最適化表單主題 ​欄位會列出所有現成可用的主題和自訂主題。 依預設，會套用畫布主題。

  3. 從​ 最適化表單主題 ​欄位中選取主題。 例如，問卷主題。 選取 aem_6_3_forms_save ，以便套用選取的主題。

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

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

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

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

步驟2：更新最適化表單 step-update-your-adaptive-form

以上顯示的設計需要變更您現有的最適化表單的預留位置文字和標誌。

若要更新您的最適化表單：

  1. 變更頁首的現有標誌和文字。 若要移除標誌：

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

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

    2. 選取標題元件中的標誌影像，並選取 cmppr 屬性。 在image屬性中，選取X以移除現有的標誌影像。

    3. 選取​ 上傳、選取logo.png，然後選取 aem_6_3_forms_save 以儲存變更。 在您開始🔗之前，已在區段中下載影像。

    4. 選取標題文字We.Retail，然後選取 aem_6_3_edit edit。 將標頭文字變更為we retail。 僅套用粗體格式至we retail中的we。

      we-retail-logo-text

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

    1. 選取[客戶ID]欄位並選取 cmppr 屬性。

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

    3. 刪除​ Title ​欄位的內容並選取 aem_6_3_forms_save 。

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

      已更新最適化表單

步驟3：建立最適化表單的自訂主題 step-create-a-custom-theme-for-your-adaptive-form

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

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

在本教學課程中，您可為頁首與頁尾、文字與數值元件、附件元件及按鈕設定樣式。 讓我們從建立佈景主題開始：

建立主題 create-a-theme

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

    自訂佈景主題

    圖： 具有shipping-address-add-update-form最適化表單的主題編輯器

    create-a-theme

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

頁首和頁尾提供最適化表單的一致且獨特外觀。 一般而言，頁首包含組織的標誌和名稱，頁尾包含版權資訊，而在組織的多個表單中，這些維持相同。 若要設定shipping-address-add-update-form最適化表單頁首與頁尾的樣式：

  1. 瀏覽「選取器」面板中的​ 標題 > 文字 ​選項。 「選取器」面板位於主題編輯器的左側。 如果看不到面板，請選取 切換側面板 切換側面板。

  2. 在​ 文字 ​摺疊式功能表中設定下列屬性，並選取 aem_6_3_forms_save 。

    table 0-row-2 1-row-2 2-row-2 3-row-2
    屬性 值
    字型系列 Arial®
    字型色彩 FFFFFF
    字型大小 54畫素

  3. 選取標題 Widget並選取​ 標題。 「頁首」Widget樣式的選項會顯示在左側。 展開​ Dimension與位置 ​摺疊式功能表，將​ 高度 ​設定為120px，然後選取 aem_6_3_forms_save 。

  4. 展開標頭Widget的​ 背景 ​摺疊式功能表，將​ 背景色彩 ​設定為F6921E.

    將游標停留在​ 影像與漸層 > +新增 ​上，選取​ 影像。 設定下列屬性並選取 aem_6_3_forms_save 。

    table 0-row-2 1-row-2 2-row-2 3-row-2
    屬性 值
    影像 上傳header-style.png。 在您開始🔗之前，已在區段中下載影像。
    位置 右下
    並排顯示 不重複

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

    table 0-row-2 1-row-2 2-row-2 html-authored no-header
    邊距 值
    邊距
    • 上： 1.5rem
    • 下：-35px
    • 左： 1rem

    秘訣： 選取 連結圖示，為每個欄位提供不同的值。

    高度 4.75雷姆

  6. 選取頁尾Widget並選取​ 頁尾。 展開​ 背景 ​摺疊式功能表，將​ 背景色彩 ​設定為F6921E，然後選取 aem_6_3_forms_save 。

設定資料擷取元件的樣式，並將背景套用至最適化表單 style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form

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

  1. 選取​ 客戶ID ​欄位並選取​ 欄位Widget ​選項。 設定下列屬性並選取 aem_6_3_forms_save 。

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 html-authored no-header
    折疊面板 屬性 值
    邊框 邊框顏色 A7A9AC
    邊框 邊框半徑
    • 上： 7畫素
    • 右： 7畫素
    • 下： 7畫素
    • 左： 7畫素
    文字 字型系列 Arial®
    文字 字型色彩 939598
    文字 字型大小 18畫素
    Dimension和位置 寬度 60%
    Dimension和位置 邊距
    • 左： 10個剩餘

  2. 選取​ 客戶識別碼 ​欄位上方的空白區域，並選取​ 回應式面板容器。 將​ 背景 > 背景顏色 ​設定為F1F2F2。 選取 aem_6_3_forms_save 。

    回應式面板容器

設定按鈕的樣式 style-the-buttons

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

  1. 選取​ Submit ​按鈕並選取​ Button ​選項。 設定下列屬性並選取 aem_6_3_forms_save 。

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 html-authored no-header
    折疊面板 屬性 值
    背景 背景色彩 F6921E
    邊框 邊框顏色 F6921E
    邊框 邊框半徑
    • 上： 7畫素
    • 右： 7畫素
    • 下： 7畫素
    • 左： 7畫素
    文字 字型系列 Arial®
    文字 字型色彩 FFFFFF
    文字 字型大小 18畫素

  2. 套用自訂佈景主題，全域佈景主題，至您的最適化表單。 如果樣式沒有反映在自適應表單上，請清除瀏覽器快取並重試。

    style-data-capture-components

步驟4：設定個別元件的樣式 step-style-individual-components

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

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

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

    style-option

  3. 選取​ 附加 ​按鈕並選取 aem_6_3_edit 圖示。 在​ Dimension和Position ​摺疊式功能表中設定下列屬性：

    table 0-row-2 1-row-2 2-row-2
    屬性 值
    浮點數 左
    寬度 10%

  4. 選取​ 政府核准的地址校訂 ​選項，並選取 aem_6_3_edit 圖示。 設定下列屬性：

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3 html-authored no-header
    折疊面板 屬性 值
    尺寸及位置 浮點數 左
    尺寸及位置 寬度 73%
    尺寸及位置 邊距
    • 左： 10畫素
    尺寸及位置 高度 40畫素
    Dimension和位置 邊距
    • 右：2剩餘
    • 左： 10個剩餘
    背景 背景色彩 FFFFFF
    邊框 邊框寬度 1畫素
    邊框 邊框樣式 堅固
    邊框 邊框顏色 A7A9AC
    邊框 邊框半徑 7畫素
    文字 字型系列 Arial®
    文字 字型色彩 BCBEC0
    文字 字型大小 18畫素
    文字 行高 2

  5. 選取「提交」按鈕並選取「 aem_6_3_edit 」圖示。 設定下列屬性：

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 html-authored no-header
    折疊面板 屬性 值
    Dimension和位置 浮點數 右
    Dimension和位置 邊距
    • 上：5個剩餘
    • 右：14分米
    • 下： 20畫素
    • 左： 20畫素
    背景 背景色彩 F6921E
    邊框 邊框顏色 F6921E

    styled-adaptive-form-1

步驟5：額外區段：在自訂主題中使用Web Fonts step-bonus-section-using-web-fonts-in-a-custom-theme

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

Adobe Fonts是Web Fonts服務。 您可以透過最適化表單來設定和使用服務。 若要在最適化表單中使用Adobe Fonts：

  1. 瀏覽Adobe字型🔗的資料庫，並選擇字型來設定表單的樣式。
NOTE
您可以新增標籤或篩選器來調整字型清單。

  1. 按一下</>按鈕，將系列新增至Web專案，以備您找到想要的字型時使用。

    select-font-from-font-library

    新增字型至Web專案對話方塊畫面隨即顯示。

    note note
    NOTE
    只有在Web專案有</>按鈕可用時，您才能新增字型。

  2. 為您的Web專案命名。

  3. 選取核取方塊以選取要包含的字型粗細和樣式。

    新增字型庫

  4. 選取​ 按一下 ​以建立專案。

  5. 從畫面複製內嵌程式碼和URL。
    內嵌程式碼和URL

  6. 按一下​ 完成 ​以關閉Web專案視窗。

  7. 登入您的AEM執行個體並移至URL http://server:port/crx/de/index.jsp#

  8. 在CRXDE中建立資料夾結構，例如/apps/[fontslibrary]/[customlibrary(clientlibrary)]。

  9. 移至新建立的clientlibs資料夾並新增allowProxy和categories屬性。

  10. 瀏覽至/apps/[fontslibrary]/[customlibrary(clientlibrary)]並建立css資料夾。

  11. 移至已建立的CSS資料夾並建立檔案。 例如，將檔案建立為fonts.css並貼上內嵌程式碼以及URL。
    資料夾結構

  12. 儲存變更。

NOTE
若要在最適化表單中使用新增的自訂字型，請確定​ 使用者端資料庫類別 ​中的使用者端資料庫名稱與clientlib資料夾的「類別」選項中指定的名稱一致。

最適化表單現在可透過下列自訂字型使用者端資料庫存取包含的字型。

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2