在外部網頁中內嵌最適化表單

瞭解如何在外部網頁中內嵌最適化表單

您可以在AEM Sites](/docs/experience-manager-64/forms/using/embed-adaptive-form-aem-sites.html?lang=zh-Hant)頁面或AEM外部代管的網頁中，使用[內嵌最適化表單。內嵌的最適化表單功能完整，使用者可填寫並提交表單，而不需離開頁面。它可協助使用者保留在網頁上其他元素的上下文中，並同時與表單互動。

必備條件

在將最適化表單內嵌至外部網站之前，請執行下列步驟：

在AEM Publish實例上發佈最適化表單。
在您的網站上建立或識別網頁以代管最適化表單。請確定網頁可從CDN讀取jQuery檔案，或內嵌jQuery的本機副本。需要有jQuery才能轉換最適化表單。
當AEM伺服器和網頁位於不同網域時，請執行章節中所列的步驟，讓AEM Forms為跨網域網站提供最適化表單。
設定反向代碼，以啟用外部頁面與AEM Forms伺服器之間的通訊。

內嵌最適化表單

您可以在網頁中插入幾行JavaScript，以嵌入最適化表單。程式碼中的API會傳送HTTP要求給AEM伺服器，以取得最適化表單資源，並在指定的表單容器中插入最適化表單。以下是范常式式碼，可將最適化表單內嵌至外部頁面。請勿在生產環境中使用程式碼。自訂程式碼以符合您的網站，例如為使用自己版本jQuery的網站使用iFrame。使用iFrame有助於避免jQuery版本中的衝突：

將下列程式碼嵌入您網站的網頁：

<!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/locbasic.html", dataRef:"", themepath:"", CSS_Selector:".customafsection"};
 alert(options.path);
 var loadAdaptiveForm = function(options){
 //alert(options.path);
 if(options.path) {
     // options.path refers to the publish URL of the adaptive form
     // For Example: http:myserver:4503/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;
     path += "/jcr:content/guideContainer.html";
     $.ajax({
         url  : path ,
         type : "GET",
         data : {
             // Set the wcmmode to be disabled
             wcmmode : "disabled"
             // Set the data reference, if any
            // "dataRef": options.dataRef
             // Specify a different theme for the form object
           //  "themeOverride" : options.themepath
         },
         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>

在內嵌的程式碼中：
- 變更options.path變數的值，並變更最適化表單的發佈URL路徑。如果AEM伺服器是在內容路徑上執行，請確定URL包含內容路徑。例如，上述程式碼和adaptive from位於相同的aem表單伺服器上，因此此範例使用adaptive form /content/forms/af/locbasic.html的上下文路徑。
- 將options.dataRef取代為要以URL傳遞的屬性。您可以使用dataref變數來預填最適化表單。
- 以主題的路徑取代options.themePath，而非在最適化表單中設定的主題。或者，您也可以使用request屬性來指定主題路徑。
- CSS_Selector 是內嵌最適化表單之表單容器的CSS選取器。例如，.customafsection css類是上述範例中的CSS選擇器。

最適化表單內嵌在網頁中。在嵌入式自適應表單中觀察以下內容：

原始最適化表單中的頁首和頁尾不包含在內嵌表單中。
草稿和提交的表單可在表單入口網站的「草稿和提交」標籤中使用。
在原始最適化表單上設定的提交動作會保留在內嵌表單中。
自適應表單規則會保留在內嵌表單中，並具備完整功能。
在原始最適化表單中設定的體驗定位和A/B測試無法在內嵌表單中運作。
如果Adobe Analytics是在原始表單上設定，則分析資料會在Adobe Analytics伺服器中擷取。但是，Forms分析報表中不提供它。

設定反向代理

內嵌最適化表單的外部網頁會傳送要求至AEM伺服器，而AEM伺服器通常位於私人網路的防火牆後方。為確保請求安全地導向至AEM伺服器，建議您設定反向代理伺服器。

讓我們看一個示例，說明如何在沒有調度程式的情況下設定Apache 2.4反向代理伺服器。在此範例中，您會以/forms內容路徑來代管AEM伺服器，並映射/forms做為反向proxy。它可確保Apache伺服器上的任何/forms要求都會導向至AEM例項。此拓撲可協助減少發送器層的規則數，因為所有前置有/forms的請求都會路由到AEM伺服器。

開啟httpd.conf配置檔案並取消對以下代碼行的注釋。或者，您也可以在檔案中新增這些程式碼行。
```
LoadModule proxy_html_module modules/mod_proxy_html.so 
 LoadModule proxy_http_module modules/mod_proxy_http.so
```
在httpd-proxy.conf配置檔案中添加以下代碼行，以設定代理規則。
```
ProxyPass /forms https://[AEM_Instance]/forms 
 ProxyPassReverse /forms https://[AEM_Instance]/forms
```
在規則中，將[AEM_Instance]取代為AEM伺服器發佈URL。

如果您未將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

注意

如果設定了任何其他拓撲，請確保將submit、prefill和其他URL添加到調度程式層的allowlist中。

最佳做法

在網頁中內嵌最適化表單時，請考慮下列最佳實務：

請確定網頁CSS中定義的樣式規則與表單物件CSS不衝突。若要避免衝突，您可以使用AEM用戶端程式庫，在最適化表單主題中重複使用網頁CSS。如需在最適化表單主題中使用用戶端程式庫的詳細資訊，請參閱「AEM Forms中的主題」。
讓網頁中的表格容器使用整個視窗寬度。它可確保為行動裝置設定的CSS規則可正常運作，而不需做任何變更。如果表單容器不佔用整個視窗寬度，您需要編寫自訂CSS，讓表單能適應不同的行動裝置。
使用getData API，取得用戶端中表單資料的XML或JSON表示法。
使用unloadAdaptiveForm API從HTML DOM卸載自適應表單。
從AEM伺服器傳送回應時，請設定存取控制原點標題。

啟用AEM Forms，將最適化表單提供至跨網域網站

在AEM作者例項上，請前往http://[server]:[port]/system/console/configMgr的AEM Web Console Configuration Manager。
找到並開啟Apache Sling Referrer Filter組態。
在允許的主機欄位中，指定網頁所在的網域。它可讓主機向AEM伺服器發出POST請求。您也可以使用規則運算式來指定一系列外部應用程式網域。

adobe.com 上的資源

Ecommerce Integrations Cms Cloud Targeted Content Content Intelligence Document Generation Digital Asset Management

本頁內容

檢視下一個:

隱私權（已更新）

使用條款