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

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