文件AEM 6.5使用手冊

在AEM Sites單頁應用程式中內嵌最適化表單或互動式通訊 embed-an-adaptive-form-or-interactive-communication-in-aem-sites-single-page-application

Last update: Mon May 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 適用對象：
  • Experience Manager 6.5

建立對象：

  • 使用者
  • 開發人員

Adobe 建議使用新式且可擴充的資料擷取核心元件，用來建立新的最適化表單或將最適化表單新增到 AEM Sites 頁面。這些元件代表最適化表單建立方面的重大進步，可確保令人印象深刻的使用者體驗。本文會介紹使用基礎元件編寫最適化表單的舊方法。

概觀 overview

AEM Forms可讓表單開發人員在AEM Sites單頁應用程式(SPA)中順暢地內嵌最適化表單和互動式通訊。 內嵌的最適化表單和互動式通訊功能齊全，使用者無須離開頁面即可填寫和提交表單。 它有助於使用者停留在網頁上其他元素的內容中，同時與最適化表單或互動式通訊互動。

在AEM Sites單頁應用程式中，您可以使用AEM Forms SPA Container元件 來新增最適化表單或互動式通訊。它是AEM Sites SPA的AEM Forms元件，您可以將其新增至您的網站頁面。

如需在非SPA AEM Sites中內嵌最適化表單的相關資訊，請參閱在AEM Sites頁面中內嵌最適化表單或互動式通訊。

先決條件 prerequisites

若要使用AEM Forms SPA Container元件在AEM Sites SPA中內嵌最適化表單或互動式通訊，請確定您已安裝：

安裝AEM Forms SPA容器元件 install-aem-forms-spa-container-component

執行以下步驟安裝AEM Forms SPA Container元件：

  1. 複製或下載SPA的AEM Forms元件。

  2. 安裝適用於SPA的AEM Forms元件。 安裝元件的指示可在README.md檔案中取得。

    此元件包含一個範例React元件，可用來整合SPA容器元件與以React為基礎的SPA專案。

  3. 複製或下載React型SPA專案。

  4. 使用README.md檔案中的可用指示，將SPA容器元件與React型SPA專案整合。

    安裝AEM Forms SPA Container元件並將該元件與React型SPA專案整合後，您可在AEM Sites頁面中內嵌調適型表單和互動式通訊。

內嵌最適化表單或互動式通訊 af-component

若要使用AEM Forms for SPA Container元件內嵌最適化表單或互動式通訊：

  1. 以編輯模式開啟AEM sites頁面，您要在其中內嵌最適化表單或互動式通訊。

  2. 使用下列任何選項在頁面上插入SPA 元件的 AEM表單：

    • 在[網站]頁面上選取配置容器，選取​ +，然後選取SPA 元件的 AEM表單。

    • 從元件瀏覽器面板中，將SPA 元件的 AEM表單拖放到頁面上。

    • 在Assets瀏覽器中搜尋最適化表單或互動式通訊，並將其拖放至Sites頁面。 它將表單內嵌在SPA元件容器的AEM Forms中。

    note note
    NOTE
    不支援在頁面上呈現多個AEM Forms SPA Container元件。 在一個頁面上可以有多個AEM Forms SPA Container，但一次只能轉譯一個元件。 確保頁面上僅會顯示一個元件，以避免差異。

  3. 在網站頁面中選取內嵌的AEM Forms SPA Container元件，然後在動作列上選取 settings_icon 。 編輯AEM Forms SPA容器 ​對話方塊開啟。

  4. 在​ 編輯AEM Forms容器 ​對話方塊中，指定下列專案：

    • 資產型別： ​選取要內嵌的資產型別。 選項為​ 最適化表單 ​和​ 互動式通訊

    • 資產路徑：瀏覽並選取要內嵌的最適化表單或互動式通訊。 如果使用Assets瀏覽器插入最適化表單或互動式通訊，則會自動填入欄位。

    • Channel （僅限互動式通訊）：選取要內嵌的互動式頻道型別。 選項為​ Web Channel ​和​ Print Channel。

    • 佈景主題：選取定義最適化表單或互動式通訊元件樣式的主題。 樣式包含外觀屬性，例如字型樣式、背景顏色、尺寸和對齊。

  5. 選取 done_icon 以儲存設定。 最適化表單或互動式通訊現在內嵌在頁面中。

Publish內嵌式最適化表單與互動式通訊 publish-embedded-adaptive-form-and-interactive-communication

在AEM Sites頁面上發佈內嵌資產（最適化表單或互動式通訊）時，請考量下列情況：

  • 如果您是第一次發佈AEM Sites頁面，且其中包含內嵌的最適化表單或互動式通訊，請發佈Sites頁面和內嵌資產。
  • 如果您在已發佈的Sites頁面中僅修改內嵌的最適化表單或互動式通訊，請發佈原始資產，而變更會反映在已發佈的Sites頁面中。 已發佈的Sites頁面包含資產的參考，不需要重新發佈頁面。
  • 如果您修改了Sites頁面和內嵌的最適化表單或互動式通訊，請重新發佈Sites頁面和內嵌資產。

修改內嵌式最適化表單和互動式通訊 modify-embedded-adaptive-form-and-interactive-communication

AEM網站頁面會維護對AEM Forms容器中最適化表單和互動式通訊的參考。 因此，在原始最適化表單和互動式通訊中設定的所有設定和屬性（例如主題、樣式和提交動作）都會保留在內嵌最適化表單和互動式通訊中。

若要修改內嵌式最適化表單和互動式通訊的任何設定或屬性，請執行下列任一項作業。

  • 在各自的編輯器中以自適應表單或互動式通訊開啟原始表單並加以修改。
  • 在編輯模式中，從Sites頁面內選取最適化表單或互動式通訊，然後在新視窗中選取​ 編輯。 原始表單會在編輯模式中開啟。

考量事項和最佳作法 considerations-and-best-practices

將調適型表單內嵌於AEM網站頁面時，請記住下列幾點：

  • 內嵌表單中不包含原始表單的頁首和頁尾。
  • 使用者草稿和提交內嵌表單受到支援，並可在Forms入口網站上的草稿和已提交的Forms標籤中看到。
  • 在原始表單上設定的提交動作會保留在內嵌表單中。
  • 在原始表單上設定的體驗鎖定目標和A/B測試在內嵌表單中無法運作。 不過，您可以使用Sites頁面上的體驗鎖定目標，根據使用者設定檔呈現不同的表單。
  • 如果您已針對原始表單設定Adobe Analytics，則會在Adobe Analytics中擷取內嵌表單的分析資料。 但是，它不會出現在Forms Analytics報告中。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2