最適化表單元件的內嵌樣式 inline-styling-of-adaptive-form-components
Adobe 建議使用新式且可擴充的資料擷取核心元件,用來建立新的最適化表單或將最適化表單新增到 AEM Sites 頁面。這些元件代表最適化表單建立方面的重大進步,可確保令人印象深刻的使用者體驗。本文會介紹使用基礎元件編寫最適化表單的舊方法。
您可以使用主題編輯器來指定樣式,以定義最適化表單的整體外觀和樣式。 此外,您也可以將CSS內嵌樣式套用至個別的最適化表單元件,並即時預覽變更。 內嵌樣式會覆寫主題中提供的樣式。
套用內嵌CSS屬性 apply-inline-css-properties
若要將內嵌樣式新增至元件:
-
在表單編輯器中開啟您的表單,並將模式變更為樣式模式。 若要將模式變更為樣式模式,請在頁面工具列中選取 > 樣式。
-
在頁面中選取元件,然後選取編輯按鈕 。 在側邊欄中開啟樣式屬性。
您也可以從側欄中的表單階層樹狀結構中選取元件。 表單階層樹狀結構可在側邊欄中做為表單物件使用。
在樣式模式中,您可以看到列在「表單物件」下的元件。 不過,側邊欄中的「表單物件」清單會列出欄位和面板等元件。 欄位和面板是可包含文字方塊和選項按鈕等元件的類屬元件。
從側欄選取元件時,您會看到列出所有子元件以及所選元件的屬性。 您可以選取特定的子元件並設定其樣式。
-
按一下側邊欄中的索引標籤以指定CSS屬性。 您可以指定屬性,例如:
- Dimension和位置 (顯示設定、邊框間距、高度、寬度、邊界、位置、z索引、浮動、清除、溢位)
- 文字 (字型系列、粗細、顏色、大小、行高和對齊)
- 背景 (影像和漸層,背景顏色)
- 框線 (寬度、樣式、顏色、半徑)
- 效果 (陰影、不透明度)
- 進階 (讓您為元件撰寫自訂CSS)
-
同樣地,您可以為元件的其他部分套用樣式,例如Widget、標題和說明。
-
選取 完成 以確認變更,或選取 取消 以捨棄變更。
範例:欄位元件的內嵌樣式 example-inline-styles-for-a-field-component
下列影像說明套用內嵌樣式之前和之後的文字欄位。
套用內嵌樣式之前的
套用內嵌樣式屬性前的文字方塊元件
請注意套用下列CSS屬性後,文字方塊樣式所發生的變化,如下圖所示。
套用內嵌樣式後的
套用內嵌樣式屬性後的文字方塊元件
依照上述步驟,您可以選取其他元件並設定其樣式,例如面板、提交按鈕和選項按鈕。
複製並貼上樣式 copy-paste-styles
您也可以在最適化表單中,將樣式從一個元件複製並貼到另一個元件。 在 樣式 模式中,選取元件並選取「複製」圖示 。
選取相同型別的其他元件,並選取「貼上」圖示 以貼上複製的樣式。 您也可以選取「清除樣式」圖示 來清除套用的樣式。
為元件的不同狀態設定樣式 set-styles-for-states
您可以為元件型別的不同狀態設定樣式。 不同的狀態包括: 焦點、已停用、暫留、錯誤、成功以及必要。
若要定義元件狀態的樣式:
-
在 樣式 模式中,選取元件並選取「編輯」圖示 。
-
使用 狀態 下拉式清單選取元件的狀態。
-
定義元件所選取狀態的樣式,並選取 以儲存屬性。
您也可以模擬成功和錯誤狀態。 選取「展開」圖示以檢視 模擬成功 和 模擬錯誤 選項。
另請參閱 see-also
- 建立 AEM 最適化表單
- 新增 AEM 最適化表單至 AEM Sites 頁面
- 將主題套用到 AEM 最適化表單
- 將元件新增至 AEM 最適化表單
- 在 AEM 最適化表單中使用驗證碼
- 產生 AEM 最適化表單的 PDF 版本 (DoR)
- 翻譯 AEM 最適化表單
- 啟用 Adobe Analytics 讓最適化表單可追蹤表單使用情況
- 將最適化表單連接到 Microsoft SharePoint
- 將最適化表單連接到 Microsoft Power Automate
- 將最適化表單連接到 Microsoft OneDrive
- 將最適化表單連接至 Microsoft® Azure Blob 儲存體
- 將最適化表單連接到 Salesforce
- 在 AEM 最適化表單中使用 Adobe Sign in
- 為最適化表單新增地區設定
- 將最適化表單資料傳送到資料庫
- 將最適化表單資料傳送到 REST 端點
- 將最適化表單資料傳送到 AEM 工作流程
- 使用 Forms 入口網站在 AEM 網站上列出 AEM 最適化 Forms
- 在最適化表單中新增版本設定、評論和附註
- 比較最適化表單