文件AEM核心元件指南

表單容器 form-container-adaptive-forms-core-component

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • undefined
  • undefined
  • undefined

Forms可提供寶貴資訊，讓網站訪客與網站互動，進而提高參與度和使用者滿意度。 Adobe Experience Manager (AEM) Sites中的最適化表單容器可讓網站擁有者輕鬆將表單新增至其頁面。 這有助於促進網站訪客與網站擁有者或組織之間的溝通，透過提供簡化的方式讓訪客提供意見回饋、提出查詢並完成其他動作

使用情況 reasons-to-use-forms-container

可以將表單新增至網站的原因有幾個：

  • 資料收集： Forms可用來收集網站訪客的資料，以進行各種用途，例如市場調查、使用者行為分析等。

  • 銷售機會開發：表單可用來從潛在客戶收集資訊，例如姓名和電子郵件地址，以產生銷售和行銷工作的銷售機會。

  • 電子商務： Forms可用於線上購物，允許客戶透過網站下訂單及付款。

  • 連絡人：連絡人表單可讓網站訪客輕鬆與網站擁有者或組織連絡。

  • 調查和投票： Forms可用來透過調查和投票，從網站訪客收集意見反應和意見。

  • 活動註冊： Forms可用於活動註冊，讓網站訪客註冊活動或網路研討會。

  • 訂閱： Forms可用於網站訂閱，讓訪客註冊電子報或其他定期通訊。

  • 使用者驗證： Forms可用於使用者驗證，允許網站訪客建立帳戶並登入以存取專屬的內容或功能。

  • 提高轉換率：設計良好的表單可讓使用者輕鬆完成想要的動作，例如購買產品或註冊服務，進而提高轉換率。

版本和相容性 version-and-compatibility

最適化Forms摺疊式功能表核心元件於2023年2月發行，屬於AEM 6.5.16.0 Forms或更新版本適用的Cloud Service核心元件2.0.4和核心元件1.1.12的一部分。 下表顯示所有支援版本、AEM相容性以及對應檔案的連結：

元件版本
AEM as a Cloud Service
AEM 6.5.16.0 Forms或更新版本
v1
與
版本2.0.4和更新版本相容
與
版本1.1.12及更新版本相容，但小於2.0.0。

如需核心元件版本和發行版本的詳細資訊，請參閱核心元件版本檔案。

技術細節 technical-details

在GitHub上的技術檔案中取得最適化Forms容器核心元件的最新資訊。 如需開發核心元件的詳細資訊，請參閱核心元件開發人員檔案。

設定對話方塊 configure-dialog

您可以透過「設定」對話方塊輕鬆自訂訪客的表單容器體驗。 您也可以輕鬆定義表單容器選項，以提供順暢的使用者體驗。

基本標籤 basic-tab

基本索引標籤

  • 標題 — 您可以使用其Title輕鬆識別表單中的元件，預設情況下，標題會顯示在元件上方。 如果您未新增標題，則會顯示元件的名稱而非標題文字。

  • 預填服務 — 此選項可讓使用者在轉譯最適化表單時，選取用於擷取資料的預填服務。 深入瞭解如何建立及設定預填服務。

  • 使用者端資料庫類別 — 使用者可以根據每個最適化表單設定自訂JavaScript資料庫。 建議僅將可重複使用的函式保留在程式庫中，這些函式需依賴jquery和underscore.js協力廠商程式庫。
    有時，如果有​ 個複雜的驗證規則，則確切的驗證指令碼會位於自訂函式中，且使用者會從欄位驗證運算式呼叫這些自訂函式。 若要在執行伺服器端驗證時讓此自訂函式館為已知且可用，表單使用者可在Adaptive Form容器屬性的​ Basic ​標籤下設定AEM使用者端程式庫的名稱，如下所示。

使用者可以根據每個最適化表單設定customJavaScript程式庫。 程式庫中只會保留可重複使用的函數，這些函數與 jquery 和 underscore.js 第三方程式庫有相依性。

資料模型標籤 data-model-tab

提交索引標籤

您可以使用表單資料模型將表單連線至資料Source，以根據使用者動作傳送及接收資料。 您也可以將表單連線至JSON結構描述，以預先定義的格式接收提交的資料。 根據需求，將您的表單連結至JSON結構描述或表單資料模型：

  • 建立JSON結構描述並上傳至您的環境
  • 建立表單資料模型

提交索引標籤 submission-tab

使用者可以為最適化表單提交設定不同的動作。

  • 重新導向URL/路徑 — 此選項可讓使用者為每個表單設定頁面，表單使用者在提交最適化表單後會重新導向至該頁面。 按一下這裡以取得有關如何設定重新導向頁面的詳細資訊。

提交索引標籤

  • 顯示訊息 — 此選項可讓使用者新增在成功提交最適化表單時顯示的訊息。 預先定義的文字會包含在對話方塊中，且使用者可加以修改。 「顯示訊息」對話方塊支援RTF格式工具，可讓使用者格式化新增的文字。

顯示訊息標籤

  • 提交動作 — 當使用者按一下最適化表單上的提交按鈕時，就會觸發提交動作。 使用者可從下拉式清單中選取立即可用的支援提交動作。 瞭解如何在提交索引標籤中設定提交動作。

設計對話方塊 design-dialog

「設計」對話方塊可用來定義和管理表單容器元件的CSS樣式。

允許的元件標籤 allowed-components-tab

設計對話方塊允許元件索引標籤

允許的元件 ​索引標籤允許範本編輯器設定可以新增為最適化Forms編輯器元件中面板專案的元件。

預設元件標籤 default-components-tab

設計對話方塊預設元件索引標籤

預設元件 ​索引標籤可讓範本編輯器指定在調適型Forms編輯器中，預設顯示為表單容器元件專案的元件。

回應式設定標籤 responsive-tab

設計對話方塊回應式設定標籤

回應式設定 ​索引標籤可讓範本編輯器在調適型Forms編輯器的表單容器元件中，指定格線中的欄數。

樣式索引標籤 styles-tab

最適化Forms檔案附件核心元件支援AEM 樣式系統。

設計對話方塊

  • 預設CSS類別：您可以為最適化Forms表單容器核心元件提供預設CSS類別。

  • 允許的樣式：您可以提供名稱以及代表樣式的CSS類別來定義樣式。 例如，您可以建立名為「粗體文字」的樣式，並提供CSS類別「font-weight： bold」。 您可以在最適化Forms編輯器中將這些樣式使用或套用至最適化表單。 若要套用樣式，請在最適化Forms編輯器中，選取您要套用樣式的元件，導覽至屬性對話方塊，然後從​ 樣式 ​下拉式清單中選取所需的樣式。 如果您需要更新或修改樣式，只要返回「設計」對話方塊，更新樣式索引標籤中的樣式，然後儲存變更即可。

自訂屬性標籤

自訂屬性對話方塊

自訂屬性可讓您使用表單範本，將自訂屬性（索引鍵/值組）與最適化表單核心元件建立關聯。 自訂屬性會反映在元件Headless轉譯的properties區段中。 它可讓您建立根據自訂屬性值調整的動態表單行為。 例如，開發人員可以為行動、桌上型電腦或Web平台設計各種無頭Forms元件的轉譯，大幅提升各種裝置的使用者體驗。

  • 群組名稱：您可以提供一個名稱來識別自訂屬性群組。 您可以新增、刪除或重新排列多個自訂屬性群組。 新增自訂屬性群組後，您可以看到下列選項：

    • 索引鍵 — 值配對：您可以按一下每個自訂屬性群組的​ 新增 ​按鈕，以新增多個自訂屬性名稱和自訂屬性值。

    • 刪除：點選或按一下以刪除自訂屬性名稱和自訂屬性值。

    • 重新排列：點選或按一下並拖曳以重新排列自訂屬性名稱和自訂屬性值。

相關文章 related-articles

另請參閱 see-also

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c