設定最適化表單的樣式

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

本教程是建立第一個自適應表單系列中的一個步驟。 建議依序依序依序排列,以瞭解、執行和展示完整的教學課程使用案例。

關於教學課程

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

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

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

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

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

步驟2:更新最適化表單

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

  1. 變更標題的現有標誌和文字。 若要移除標誌:

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

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

    2. 在頁首元件中點選標誌影像,然後點選cmppr屬性。 在影像屬性中,點選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. 點選「Customer ID(客戶ID)」欄位並點選「cmppr屬性」。
    2. 將​Title​欄位的內容複製到​預留位置文字​欄位。
    3. 刪除​Title​欄位的內容,然後點選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. 點選​Create。 將建立一個主題,並出現一個用於開啟表單進行編輯的對話框。 點選「開啟」,在新標籤中開啟新建立的主題。 主題在主題編輯器中開啟。 在樣式方面,主題編輯器使用隨附於AEM Forms的現成可調式表單。

    有關使用主題編輯器UI的資訊,請參閱關於主題編輯器

  4. 點選「主題選項 主題選項 > 設定」。 在​預覽表單​欄位中,選取​shipping-address-add-update-form​最適化表單,點選aem_6_3_forms_save,點選​Save。 現在,主題編輯器已設定為使用您自己的最適化表單,而非預設的最適化表單。 點選「取消」以返回主題編輯器。

    自訂主題

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

    create-a-theme

    圖:具 有預設窗體的自適應窗體

頁首和頁尾為最適化表單提供一致且獨特的外觀。 一般而言,頁首包含組織的標誌和名稱,頁尾包含版權資訊,而且這些資訊在組織的多種形式上都相同。 要設定發運地址添加更新表單自適應表單的頁眉和頁腳的樣式,請執行以下操作:

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

  2. 在​Text accordion中設定下列屬性,然後點選aem_6_3_forms_save

    屬性
    字型系列 Arial
    字型色彩 FFFFFF
    字型大小 54px
  3. 點選頁首介面工具集並點選​頁首。 標題介面工具集樣式的選項會顯示在左側。 展開​Dimension與位置 accordion,將​高度​設為120px,然後點選aem_6_3_forms_save

  4. 展開標題Widget的「背景」accordion,將​「背景顏色」設為F6921E.

    將滑鼠指標暫留在「影像與漸層」上,點選「影像」。 ​設定下列屬性,然後點選aem_6_3_forms_save

    屬性
    影像 上傳header-style.png。 影像已下載於開始區段中。
    位置 右下
    並排顯示 不重複
  5. 在主題編輯器中,點選頁首中的標誌,然後點選「頁首標誌」。 ​展開「Dimension與位置」accordion,設定下列屬性,然後點選aem_6_3_forms_save

邊距
邊距
  • 頂部:1.5rem
  • 底部:-35px
  • 左:1rem

提示:點 選連結 圖示可為每個欄位提供不同的值。

高度 4.75rem
  1. 點選頁尾Widget並點選​頁尾。 展開​Background accordion,將​Background Color​設為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
  1. 點選「Customer ID(客戶ID)」欄位上方的空白區域,然後點選「Responsive Panel Container(回應式面板容器)」​將​背景 > 背景顏色​設定為F1F2F2。 點選aem_6_3_forms_save

設定按鈕的樣式

您可以使用自訂主題將相同樣式套用至最適化表單的所有按鈕,而內嵌樣式則可將樣式套用至特定按鈕。 要設定按鈕的樣式,請執行以下操作:

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

    style-data-capture-components

步驟4:為各個元件設定樣式

有些樣式只適用於特定元件。 這些元件是在最適化表單編輯器中建立樣式的。

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

  2. 在頂欄上,選擇​Style​選項。

    樣式——選項

  3. 點選「Attach」按鈕,然後點選「 aem_6_3_edit」圖示。 在​Dimension和Position accordion中設定以下屬性:

    屬性
    浮點
    寬度 10%
  4. 點選「政府機關核准的位址證明」選項,點選「 aem_6_3_edit」圖示。 設定下列屬性:

折疊式面板 屬性
尺寸及位置 浮點
尺寸及位置 寬度 73%
尺寸及位置 邊距
  • 左:10px
尺寸及位置 高度 40px
尺寸及位置
邊距
  • 右:2rem
  • 左:10rem
背景 背景色彩 FFFFFF
邊框 邊框寬度 1px
邊框 邊框樣式 堅固
邊框 邊框顏色 A7A9AC
邊框 邊框半徑 7px
文字 字型系列 Arial
文字 字型色彩 BCBEC0
文字 字型大小 18px
文字 行高 2
  1. 點選​Submit​按鈕,點選 aem_6_3_edit圖示。 設定下列屬性:
折疊式面板 屬性
Dimension和位置 浮點
Dimension和位置 邊距
  • 頂部:5rem
  • 右:14rem
  • 底部:20px
  • 左:20px
背景 背景色彩 F6921E
邊框 邊框顏色 F6921E

樣式化自適應形式-1

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

您可以使用各種字型來設計最適化表單。 在檢視最適化表單的所有裝置上,可能沒有用於設計最適化表單的字型。 您可以使用網頁字型服務,將必要的字型傳送至目標裝置。

Adobe Typekit是網頁字型服務。 您可以設定並使用具有最適化表單的服務。 以最適化形式使用Adobe Typekit:

注意

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

  1. 建立Adobe Typekit帳戶、建立套件、將字型Myriad專業版新增至套件、發佈套件,並取得套件ID。 必須以最適化格式使用Adobe Typekit字型(網頁字型)。

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

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

  3. 設定您的主題以使用TypeKit設定。 在作者實例上,在主題編輯器中開啟​全局主題。 在主題編輯器中,導覽至「主題選項theme-options >設定」。 在​Typekit Configuration​欄位中,選取套件,然後按一下「儲存​a3/>」。

    新增至Typekit的字型可供所有元件的​Text accordion中選取。

本頁內容

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now