將最適化表單內嵌至AEM網站頁面

概觀

AEM Forms可讓表單開發人員順暢地將Adaptive Forms內嵌在AEM Sites頁面或AEM外部託管的網頁中。 內嵌的最適化表單功能齊全，使用者無須離開頁面即可填寫並提交表單。 它有助於使用者停留在網頁上其他元素的內容中，同時與表單互動。 這可讓您的使用者方便地填寫和提交表單，永遠不需要離開他們所在的頁面。 此整合提供一種便利的方法，可重複使用他們已建立的最適化Forms。

您可以使用AEM頁面編輯器快速將多個表單內嵌到您的AEM Sites頁面。 使用AEM頁面編輯器，內容作者就能運用Adaptive Forms元件的強大功能（包括動態行為、驗證、資料整合、產生記錄檔案和業務流程自動化），在Sites頁面中建立順暢的資料擷取體驗。 它也可讓您使用AEM Sites頁面的各種功能，例如，版本設定、目標定位、翻譯和多網站管理員。

AEM Forms提供 最適化表單容器 和 最適化Forms — 內嵌(v2) 元件。 您可以使用 最適化Forms — 內嵌(v2) 元件以新增現有的最適化表單或使用最適化Forms編輯器建立表單，而 最適化表單容器 在體驗片段或AEM Sites頁面中建立新表單。

如何在AEM Sites頁面或AEM體驗片段中建立或內嵌最適化表單？

您可以使用以下選項來充分利用此功能：

• 使用已核准的範本建立最適化表單，並將其內嵌至AEM Sites頁面： 您可以使用預先核准的範本，快速建立並內嵌符合您組織品牌指導方針與設計標準的最適化Forms。

• 將現有表單內嵌至AEM Sites頁面： 您可以輕鬆將已建立的表單整合至網站，讓訪客直接與表單互動。

• 將內嵌的最適化表單轉換為體驗片段： 將新增至AEM Sites頁面的內嵌調適型表單轉換為體驗片段，以便跨多個AEM Sites頁面重複使用表單。

• 建立自訂最適化表單並新增至AEM Sites頁面： 您可以使用 最適化表單容器 元件從頭開始建立全新的表單，根據您的需求和設計偏好設定進行量身打造。

• 建立自訂最適化表單並新增到體驗片段： 您可以將表單新增至AEM體驗片段，讓多個頁面或網站順暢地重複使用，藉此擴充表單的使用範圍。

• 新增多個表單至AEM Sites頁面或體驗片段： 您可以在AEM Sites頁面上建立或新增多個最適化Forms，以根據使用者的偏好和需求為其提供多個選擇。 您可以使用AEM頁面編輯器快速將多個表單內嵌到您的AEM Sites頁面。 您可以使用 最適化表單容器 多次元件，以在AEM Sites頁面中新增最適化Forms。 您可以使用 最適化Forms — 內嵌 在AEM Sites頁面中多次使用元件，只有在 表單覆蓋影格的整個寬度 已選取選項。 萬一 表單覆蓋影格的整個寬度 選項未勾選，AEM Sites頁面僅支援一個不含iframe的最適化表單存在。 若要使用，新增更多最適化Forms 最適化Forms — 內嵌 元件，選取 表單覆蓋影格的整個寬度 選項。

將最適化表單嵌入到AEM Sites頁面或AEM體驗片段的考量事項

• 當您使用或新增表單時 最適化Forms — 內嵌(v2) 元件時，表單會使用AEM Forms翻譯流程進行翻譯和本地化。 在這種情況下，Sites 頁面的所有語言副本中會維持和引用單一表單。 最適化Forms — 內嵌(v2) 元件不提供對AEM Sites頁面的各種功能的存取，例如，版本設定、目標定位、翻譯和多網站管理員。

• 當您使用 最適化表單容器 若要建立表單，表單會透過AEM Sites翻譯流程進行翻譯和本地化。 對於每種語言，系統會產生網站頁面和相應表單的個別副本 (語言副本)，當內容作者在父頁面表單中修訂規則時，表單的所有語言副本必須進行相同的變更。 最適化表單容器 也可讓您使用AEM Sites頁面的各種功能，例如，版本設定、目標定位、翻譯和多網站管理員。

在AEM Sites頁面或AEM體驗片段中內嵌最適化表單的需求

開始內嵌新的最適化表單或使用之前存在的最適化表單之前 最適化Forms — 內嵌(v2)，啟用 最適化Forms核心元件 並新增 最適化Forms使用者端資料庫 至您的AEM Sites頁面：

使用最適化Forms - Embed(v2)元件內嵌最適化表單

使用 最適化Forms — 內嵌(v2) 使用「表單建立精靈」，直接在AEM Sites編輯器中建立最適化表單的元件。 產生的表單會儲存為外部實體，以供在其他Sites頁面和獨立表單中重複使用。 您可以直接在AEM Sites頁面或體驗片段中，從頭開始內嵌全新的表單，根據您的需求和設計偏好設定進行量身打造。 對於單次使用的表單，建議直接編寫到AEM Sites頁面，而體驗片段則適用於必須在您網站上的多個頁面中重複使用的表單。

您可以使用輕鬆內嵌新表單 最適化Forms — 內嵌(v2). 例如，想像將新的聯絡人表單合併到AEM Sites頁面或AEM體驗片段中。 對AEM Sites頁面或體驗片段中的連絡人表單所做的任何更新或修改都會自動套用至部署該表單的所有頁面。 這可簡化網站表單的管理，確保順暢的使用者體驗，同時簡化整體程式。

使用 最適化Forms — 內嵌(v2)，您可以：

• 在AEM Sites頁面中使用「最適化Forms精靈」內嵌新表單
• 在體驗片段中使用Adaptive Forms精靈嵌入新表單
• 將現有的最適化表單內嵌到AEM Sites頁面中
• 將現有表單嵌入體驗片段中
• 將AEM Sites頁面中的自適應表單轉換為體驗片段

在AEM Sites頁面中使用「最適化Forms精靈」內嵌新表單

將新表單內嵌至AEM Sites頁面的步驟如下：

1. 在編輯模式中開啟 AEM Sites 頁面。

2. 在元件瀏覽器面板中，拖放 最適化Forms — 內嵌(v2) 元件時。

3. 按一下 加號 圖示後，您就會被重新導向至表單建立精靈。

   

4. 建立新的自適應表單 表單建立 精靈。
   此 資產路徑 已包含已建立的最適化表單的路徑

5. 儲存設定。 最適化表單現在內嵌在頁面中。

接下來，您可以 設定提交動作 和進階屬性，進階屬性內嵌調適型表單。

在體驗片段中使用Adaptive Forms精靈嵌入新表單

將新表單內嵌至體驗片段的步驟如下：

1. 在編輯模式中開啟體驗片段。

2. 在元件瀏覽器面板中，拖放 最適化Forms — 內嵌(v2) 元件時。

3. 按一下 加號 圖示後，您就會被重新導向至表單建立精靈。

   

4. 建立新的自適應表單 表單建立 精靈。
   此 資產路徑 已包含已建立的最適化表單的路徑

5. 儲存設定。 最適化表單現在內嵌在體驗片段中。

接下來，您可以 設定提交動作 和進階屬性，進階屬性內嵌調適型表單。

將現有的最適化表單內嵌到AEM Sites頁面中

使用 最適化Forms — 內嵌(v2) 元件後，您就可以輕鬆將既有的調適型表單整合到AEM Sites的頁面中。 此功能大幅增強最適化Forms的適應性和可重複使用性，為客戶提供重複使用他們已建立之表單的便利方式。 例如，想像將連絡人表單合併到AEM Sites頁面，而不需要多次重新建立表單。

若要將現有的最適化表單內嵌在網站頁面中：

1. 在編輯模式中開啟 AEM Sites 頁面。
2. 拖放 最適化Forms — 內嵌(v2) 元件從元件瀏覽器移至Sites頁面。
3. 選取 最適化Forms — 內嵌 元件並選取 於動作列上。 此 編輯最適化Forms — 內嵌(v2) 對話方塊開啟。
4. 瀏覽並選取最適化表單，以內嵌於 資產路徑.
5. 儲存設定。 最適化表單現在內嵌在頁面中。

接下來，您可以 設定提交動作 和進階屬性，進階屬性內嵌調適型表單。

將現有的最適化表單嵌入體驗片段中

您也可以將表單內嵌至AEM體驗片段，以擴充表單的協助工具。 若要將最適化表單嵌入體驗片段：

1. 在編輯模式中開啟體驗片段。
2. 拖放 最適化Forms — 內嵌(v2) 元件從元件瀏覽器移至體驗片段。
3. 選取 最適化Forms — 內嵌 體驗片段中的元件並選取 於動作列上。 此 編輯最適化Forms — 內嵌(v2) 對話方塊開啟。
4. 瀏覽並選取最適化表單，以內嵌於 資產路徑.
5. 儲存設定。 最適化表單現在內嵌於體驗片段中。

接下來，您可以 設定提交動作 和進階屬性，進階屬性內嵌調適型表單。

將AEM Sites頁面中的表單轉換為體驗片段

您可以將網站頁面編輯器中的現有最適化表單轉換為體驗片段，以跨多個頁面或網站重複使用表單。

若要將AEM Sites頁面中的最適化表單轉換為體驗片段：

1. 在編輯模式中開啟包含調適型表單的AEM Sites頁面(在調適型Forms容器元件中)。

2. 開啟「內容樹」，然後選取 最適化Forms容器 託管您的最適化表單。 一個AEM Sites頁面可以託管多個最適化Forms。 因此，請仔細選取正確的最適化Forms容器。

3. 在功能表列上，選取 「轉換為體驗片段變數」圖示。

   

   會出現對話方塊，將最適化表單容器轉換為新的體驗片段或新增到現有的體驗片段。

4. 在 轉換為體驗片段 變數對話方塊中，設定下列選項的值：

   • 動作： 選取以建立體驗片段或新增到現有的體驗片段。
   • 父路徑： 指定要託管體驗片段的資料夾路徑。 選項僅適用於建立新的體驗片段。
   • 範本： 指定體驗片段範本的路徑。 如果您沒有體驗片段範本， 建立它. 該選項僅可用於將最適化表單新增到現有的體驗片段。
   • 片段標題： 指定體驗片段的標題。 標題可唯一識別體驗片段。
   • 片段標籤： 指定體驗片段的標籤。 標籤可唯一識別體驗片段的類別。

設定最適化表單內嵌(v2)屬性

您可以自訂 最適化表單 — 內嵌(v2) 元件。 在 編輯最適化Forms — 內嵌 對話方塊中，您可以指定下列專案：

• 資產路徑：瀏覽並選取要內嵌的最適化表單。 若您從「資產」瀏覽器中將其刪除，則會自動填入。

• 貼文提交 ：選取要在表單提交時觸發的動作。 您可以選擇顯示感謝訊息或感謝頁面。

  • 顯示感謝訊息：使用RTF編輯器撰寫訊息，以在表單提交時顯示。 只有當您選擇顯示感謝訊息時，才能使用此選項。
  • 顯示感謝頁面：瀏覽並選取表單提交時顯示的頁面。 只有當您選擇顯示感謝頁面時，才能使用此選項。
  • 重新導向至感謝頁面：啟用選項，將包含內嵌最適化表單的頁面取代為感謝頁面。 否則，感謝頁面會取代中的最適化表單 最適化Forms — 內嵌(v2) 元件，而不要重新整理頁面上的基礎網站。 只有當您選擇顯示感謝頁面時，才能使用此選項。
  • 感謝訊息：成功提交表單後熒幕上顯示的簡短確認或確認。
  • 感謝頁面：瀏覽並選取成功提交表單後要顯示的頁面。

• 使用頁面語言：使用AEM Sites頁面的本機，而非最適化表單的地區設定。 此選項僅適用於最適化表單(Foundation)。

• 設定表單焦點：選取以將焦點設定在最適化表單的第一個欄位上。 此選項僅適用於最適化表單(Foundation)。

• 主題：選取定義最適化表單元件樣式的主題。 樣式包含外觀屬性，例如字型樣式、背景顏色、尺寸和對齊。 此選項僅適用於最適化表單(Foundation)。

  注意

  您可以使用 使用頁面語言， 設定表單焦點 和 主題 僅適用性表單(Foundation)的選項。

• 表單覆蓋影格的整個寬度：內嵌框架(iframe)是HTML元素，可將最適化表單載入至AEM Sites頁面。

  • 如果 表單覆蓋影格的整個寬度 核取方塊時，最適化表單會佔據其所在容器的完整寬度。 在此情況下，不會使用iframe來呈現表單。 最適化表單的版面配置和設計可適應容器的整個寬度，使其回應速度更快，並能夠調整到不同的熒幕大小。 此選項可讓您將多個最適化Forms內嵌在AEM Sites頁面中。

    注意

    若要在AEM Sites頁面中內嵌多個表單，請選取 表單覆蓋影格的整個寬度 核取方塊。

  • 如果 表單覆蓋影格的整個寬度 核取方塊未勾選，最適化表單未涵蓋容器的整個寬度。 而是使用iframe來呈現表單，其不可延伸超過特定寬度。 當最適化表單具有明確的邊界，且必須在容器內與其旁的其他AEM元件共存時，此方法就相當實用。 如果未核取此選項，則僅允許在AEM Sites頁面中嵌入一個不含iframe的最適化Forms。

    注意

    AEM Sites頁面僅支援一個不含iframe的最適化表單。 若要使用，新增更多最適化Forms 最適化Forms — 內嵌 元件，選取 表單覆蓋影格的整個寬度 選項。

• 高度：指定容器的高度。 保留空白以自動調整容器大小。

• CSS使用者端資料庫：指定CSS使用者端資料庫的路徑。

發佈內嵌式最適化表單

讓我們考慮下列在AEM Sites頁面中發佈內嵌式最適化表單的情況：

• 如果您是第一次發佈AEM網站頁面，且其中包含內嵌的最適化表單，請發佈網站頁面和內嵌資產。
• 如果您只修改已發佈網站頁面中內嵌的最適化表單，請發佈原始資產，而變更會反映在已發佈的網站頁面中。 已發佈的網站頁面包含對資產的引用，不需要重新發佈頁面。
• 如果您修改了網站頁面和內嵌的最適化表單，請重新發佈網站頁面和內嵌資產。

修改內嵌的最適化表單

若要修改內嵌調適型表單的任何設定或屬性，請執行下列任一項作業。

• 在個別編輯器中以最適化表單開啟原始表單，並加以修改。
• 在編輯模式下從網站頁面內選取最適化表單，然後選取「 」 在新視窗中編輯. 原始表單會以您可以修改的編輯模式開啟。

最佳做法

在AEM Sites頁面中內嵌最適化Forms時，請記住下列幾點：

• 內嵌表單中不包含原始表單的頁首和頁尾。
• 使用者草稿和提交內嵌表單受到支援，並可在Forms Portal的草稿和已提交的Forms標籤中看到。
• 在原始表單上設定的提交動作會保留在內嵌表單中。
• 如果您已針對原始表單設定Adobe Analytics，則會在Adobe Analytics中擷取內嵌表單的分析資料。 但是，它不會出現在Forms Analytics報告中。

另請參閱

• 建立以核心元件為基礎的獨立最適化Forms
• 直接在AEM Sites頁面中建立以核心元件為基礎的最適化表單