[AEM Forms]{class="badge positive" title="適用於AEM Forms)。"}

根據核心元件將調適性表單嵌入至外部網頁 embed-adaptive-form-in-external-web-page

最後更新： 2026年6月5日

適用對象：
Experience Manager as a Cloud Service

建立對象：

Admin
Developer
User

版本

文章連結

AEM as a Cloud Service

本文章

AEM 6.5

按一下這裡

你可以在 AEM Sites 頁面嵌入調適型表單或在 AEM 外部託管的網頁嵌入調適型表單。嵌入式調適型表單功能齊全，使用者無需離開頁面即可填寫並提交表單。此功能可幫助使用者在網頁維持相關的其他元素，並同時與表單進行互動。

先決條件 prerequisites

將調適型表單嵌入外部網站之前執行以下步驟

發佈要內嵌至AEM Forms伺服器發佈例項的最適化表單。
在您的網站上建立或識別可託管最適化表單的網頁。請確定網頁可以從CDN讀取jQuery檔案，或內嵌jQuery的本機復本。必須有 jQuery 才可呈現調適型表單。
當AEM伺服器和網頁位於不同的網域時，請執行一節中列出的步驟，使用GuideBridge設定絕對要求URL以及啟用AEM Forms以將最適化表單提供給跨網域網站。

嵌入調適型表單 embed-adaptive-form

您可以在網頁中插入幾行 JavaScript 來嵌入調適型表單。代碼中的 API 會向 AEM 伺服器發送 HTTP 請求以獲得調適型表單資源，並將調適型表單注入指定的表單容器中。

嵌入調適型表單：

使用以下代碼在您的網站上建立網頁：

code language-html

     <!doctype html>
     <html>
       <head>
         <title>This is the title of the webpage!</title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
       </head>
       <body>
       <div class="customafsection"/>
         <p>This section is replaced with the adaptive form.</p>

      <script>
      var options = {path:"/content/forms/af/myadaptiveform.html", CSS_Selector:".customafsection"};
      alert(options.path);
      var loadAdaptiveForm = function(options){
      //alert(options.path);
         if(options.path) {
             // options.path refers to the path of the adaptive form
             // For Example: /content/forms/af/ABC, where ABC is the adaptive form
             // Note: If AEM server is running on a context path, the adaptive form URL must contain the context path
             var path = options.path;
             $.ajax({
                 url  : path ,
                 type : "GET",
                 data : {
                     // wcmmode=disabled is only required for author instance
                     // wcmmode : "disabled"
                 },
                 async: false,
                 success: function (data) {
                     // If jquery is loaded, set the inner html of the container
                     // If jquery is not loaded, use APIs provided by document to set the inner HTML but these APIs would not        evaluate the script tag in HTML as per the HTML5 spec
                     // For example: document.getElementById().innerHTML
                     if(window.$ && options.CSS_Selector){
                         // HTML API of jquery extracts the tags, updates the DOM, and evaluates the code embedded in the        script tag.
                         $(options.CSS_Selector).html(data);
                     }
                 },
                 error: function (data) {
                     // any error handler
                 }
             });
         } else {
             if (typeof(console) !== "undefined") {
                 console.log("Path of Adaptive Form not specified to loadAdaptiveForm");
             }
         }
      }(options);

      </script>
       </body>
     </html>

在嵌入代碼中：
- 使用最適化表單的發佈URL路徑變更 options.path 變數的值。如果 AEM 伺服器在上下文路徑上執行，請確保 URL 包含上下文路徑。一定要提及調適型表單的完整名稱，包括副檔名。例如，上述程式碼和最適化表單位於相同的AEM Forms伺服器上，因此此範例使用最適化表單/content/forms/af/myadaptiveform.html的內容路徑。
- CSS_Selector 是所嵌入調適型表單的表單容器 CSS 選擇器。例如，.customafsection css 類是上面範例中的 CSS 選擇器。

調適型表單嵌入網頁中。在嵌入式調適型表單中觀察以下內容：

草稿和提交的表單列在表單入口網站的「草稿」和「提交」標籤中。
在原始最適化表單上設定的提交動作會保留在內嵌表單中。
調適型表單規則保留在嵌入式表單中並完全發揮作用。
在原始調適型表單中設定的體驗鎖定目標和 A/B 測試在嵌入式表格中不能使用。
如果在原始表單上設定Adobe Analytics，則Adobe Analytics伺服器會擷取分析資料。但是，在 Forms 分析報告中不能使用。
在以核心元件為主的調適型表單中，用戶端資料庫 (ClientLibs) 會包含在內，並會連同載入表單的標頭和頁腳元件。因此，當您將以核心元件為主的調適型表單嵌入網頁時，此表單一定會包含表單的標頭和頁腳。

使用GuideBridge設定絕對請求URL configure-base-url

當AEM伺服器和網頁位於不同的網域時，您可以使用GuideBridge API將絕對AEM發佈來源附加至guideruntime程式庫產生的請求。使用baseUrl設定可指示guideruntime在指定的絕對來源前面加上請求，例如表單提交、預填資料擷取、記錄檔案產生、檔案上傳和內部提交作業。

將下列程式碼片段新增至內嵌網頁，以及現有的guideBridge.connect實作：

window.guideBridge.connect(function () {
    window.guideBridge.registerConfig("baseUrl", "https://publish.example.com");
});

以AEM Forms伺服器的發佈URL取代https://publish.example.com。

使用此設定時，請求URL類似於以下範例：

/content/forms/af/my-form/jcr:content/guideContainer.af.submit.jsp

會傳送至AEM伺服器做為：

https://publish.example.com/content/forms/af/my-form/jcr:content/guideContainer.af.submit.jsp

當AEM伺服器和網頁位於不同的網域時，您也必須在AEM發佈執行個體上設定CORS。執行啟用AEM Forms以將最適化表單提供給跨網域網站一節中列出的步驟。

範例拓撲 sample-topology

嵌入式調適型表單的外部網頁會發送請求至 AEM 伺服器；伺服器通常位於私人網絡中的防火牆後面。為確保將請求安全導向 AEM 伺刷器，建議設定反向代理伺服器。

讓我們來看一個範例，說明如何在不使用Dispatcher的情況下設定Apache 2.4反向Proxy伺服器。在此範例中，您正在裝載的AEM伺服器具有/forms內容路徑，並對應反向Proxy的/forms。這可確保Apache伺服器上對/forms的任何請求都會導向到AEM執行個體。此拓撲有助於減少Dispatcher層級的規則數量，因為所有要求都會加上前置詞/forms，以路由傳送至AEM伺服器。

開啟 httpd.conf 設定檔案並取消註釋以下代碼行。或者，您可以將這些代碼行加入檔案中。

code language-text
`LoadModule proxy_html_module modules/mod_proxy_html.so LoadModule proxy_http_module modules/mod_proxy_http.so`

將以下代碼行加入 httpd-proxy.conf 設定檔案中，以設定代理規則。

code language-text
`ProxyPass /forms https://[AEM_Instance]/forms ProxyPassReverse /forms https://[AEM_Instance]/forms`

以規則中的 AEM 伺服器發佈 URL 取代 [AEM_Instance]。

如果您未在內容路徑上掛載AEM伺服器，則Apache層的Proxy規則如下：

ProxyPass /content https://<AEM_Instance>/content
ProxyPass /etc https://<AEM_Instance>/etc
ProxyPass /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# CSRF Filter
ProxyPass /libs/granite/csrf/token.json https://<AEM_Instance>/libs/granite/csrf/token.json

ProxyPassReverse /etc https://<AEM_Instance>/etc
ProxyPassReverse /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# written for thank you page and other URL present in AF during redirect
ProxyPassReverse /content https://<AEM_Instance>/content

NOTE

如果您設定任何其他拓撲，請確保將提交、預填充和其他 URL 加入 Dispatcher 層級的允許清單。

最佳做法 best-practices

將調適型表單嵌入網頁時，請考慮以下最佳做法：

確保網頁 CSS 定義的樣式規則與表單物件 CSS 不衝突。為了避免衝突，您可以在使用 AEM 用戶端資料庫的調適型表單主題中重複使用網頁 CSS。有關使用調適型主題的用戶端資料庫資訊，請參閱 AEM Forms 主題。
讓網頁中的表單容器使用整個視窗寬度。這樣可確保為行動裝置設定的 CSS 規則可使用，而無需任何變更。如果表單容器未採用完整的視窗寬度，您必須撰寫自訂CSS，讓表單能適應不同的行動裝置。
使用 [getData](https://developer.adobe.com/experience-manager/reference-materials/6-5/forms/javascript-api/GuideBridge.html) API，取得用戶端以 XML 或 JSON 表示的表單資料。
使用 [unloadAdaptiveForm](https://developer.adobe.com/experience-manager/reference-materials/6-5/forms/javascript-api/GuideBridge.html) API 從 HTML DOM 卸載調適型表單。
設定從AEM伺服器傳送回應時的存取控制來源標頭。

啟用AEM Forms以向跨網域網站提供最適化表單 cross-site

當AEM伺服器和網頁位於不同的網域時，請使用下列其中一個選項來設定AEM發佈執行個體。

NOTE

AEM as a Cloud Service不提供發佈執行個體上OSGi Web Console的存取權。在ui.config/src/main/content/jcr_root/apps/<application-folder>/osgiconfig/config.publish和透過Cloud Manager部署變更下，將下列設定新增至您的Cloud Manager Git存放庫。

使用GuideBridge baseUrl設定

當您使用GuideBridge baseUrl設定時，請在AEM發佈執行個體上設定CORS，讓AEM伺服器傳回適當的標頭，以用於提交、預填和記錄檔案端點。

在您的Cloud Manager Git存放庫中，導覽至ui.config/src/main/content/jcr_root/apps/<application-folder>/osgiconfig/config.publish。

使用類似下列範例的內容建立OSGi設定檔com.adobe.granite.cors.impl.CORSPolicyImpl~embedded-forms.cfg.json。將https://www.example.com取代為內嵌網頁的來源。

code language-json

{
  "supportscredentials": false,
  "supportedmethods": [
    "GET",
    "HEAD",
    "POST"
  ],
  "exposedheaders": [
    ""
  ],
  "alloworigin": [
    "https://www.example.com"
  ],
  "maxage:Integer": 1800,
  "alloworiginregexp": [
    ""
  ],
  "supportedheaders": [
    "Origin",
    "Accept",
    "X-Requested-With",
    "Content-Type",
    "Access-Control-Request-Method",
    "Access-Control-Request-Headers"
  ],
  "allowedpaths": [
    "/content/forms/af/.*",
    "/libs/granite/csrf/token.json"
  ]
}

透過Cloud Manager管道提交、推送和部署設定。

如需詳細資訊，請參閱跨原始資源共用(CORS)組態。

Apache Sling反向連結篩選器

當您使用反向Proxy或內嵌不含GuideBridge baseUrl設定的調適型表單時，請在AEM發佈執行個體上設定Apache Sling反向連結篩選器。

在您的Cloud Manager Git存放庫中，導覽至ui.config/src/main/content/jcr_root/apps/<application-folder>/osgiconfig/config.publish。

使用類似下列範例的內容建立或更新OSGi設定檔org.apache.sling.security.impl.ReferrerFilter.cfg.json。以網頁所在的網域取代www.example.com。

code language-json
`{ "allow.empty": false, "allow.hosts": [ "www.example.com" ], "allow.hosts.regexp": [ "" ], "filter.methods": [ "POST", "PUT", "DELETE", "COPY", "MOVE" ], "exclude.agents.regexp": [ "" ] }`

透過Cloud Manager管道提交、推送和部署設定。

note warning
WARNING
AEM 的查閱者篩選器不是 OSGi 設定工廠，這表示一次只有一個設定在 AEM 服務上作用。儘可能避免新增自訂反向連結篩選設定，因為這會覆寫AEM的原生設定，且可能會破壞產品功能。

如需詳細資訊，請參閱反向連結篩選設定。

recommendation-more-help

experience-manager-cloud-service-help-main-toc