将自适应表单嵌入到外部网页中

了解如何在外部网页中嵌入自适应表单

您可以在AEM Sites](/docs/experience-manager-64/forms/using/embed-adaptive-form-aem-sites.html?lang=zh-Hans)页面或AEM外托管的网页中嵌入自适应表单。 [嵌入式自适应表单功能齐全，用户无需离开页面即可填写和提交表单。 它有助于用户保持在网页上其他元素的上下文中并同时与表单交互。

前提条件

在将自适应表单嵌入到外部网站之前，请执行以下步骤：

  • 在AEM发布实例上发布自适应表单。
  • 在您的网站上创建或标识网页以托管自适应表单。 确保网页可以从CDN读取jQuery文件，或包含嵌入的jQuery的本地副本。 需要jQuery才能渲染自适应表单。
  • 当AEM服务器和网页位于不同域上时，请执行部分中列出的步骤，使AEM Forms能够向跨域站点提供自适应表单。
  • 设置反向 代理以启用外部页面与AEM Forms服务器之间的通信。

嵌入自适应表单

可以通过在网页中插入几行JavaScript嵌入自适应表单。 代码中的API向AEM服务器发送HTTP请求以获得自适应表单资源，并以指定的表单容器注入自适应表单。 以下是将自适应表单嵌入到外部页面的示例代码。 不要使用代码，因为它位于生产环境中。 自定义代码以适合您的网站，如为使用自己版本的jQuery的网站使用iFrame。 使用iFrame有助于避免jQuery版本内的冲突：

  1. 将以下代码嵌入到您网站的网页中：

    <!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>

  2. 在嵌入代码中：

    • 使用自适应表单的发布URL路径更改options.path变量的值。 如果AEM服务器在上下文路径上运行，请确保URL包含上下文路径。 例如，上述代码和adaptive from驻留在同一aem forms服务器上，因此该示例使用自适应表单的上下文路径/content/forms/af/locbasic.html。
    • 将options.dataRef替换为要随URL一起传递的属性。 可以使用dataref变量来预填自适应表单](/docs/experience-manager-64/forms/using/prepopulate-adaptive-form-fields.html?lang=zh-Hans)。[
    • 将options.themePath替换为指向主题的路径，而不是自适应表单中配置的主题。 或者，您也可以使用request属性指定主题路径。
    • CSS_Selector 是嵌入自适应表单的表单容器的CSS选择器。例如，.customafsection css类是上例中的CSS选择器。

自适应表单嵌入到网页中。 在嵌入的自适应表单中观察以下内容：

  • 原始自适应表单中的页眉和页脚未包含在嵌入表单中。
  • 草稿和提交的表单位于Forms门户网站的“草稿和提交”选项卡中。
  • 在原始自适应表单上配置的提交操作将保留在嵌入式表单中。
  • 自适应表单规则在嵌入式表单中保留并具有完全功能。
  • 在原始自适应表单中配置的体验定位和A/B测试在嵌入式表单中不起作用。
  • 如果在原始表单上配置了Adobe Analytics，则将在Adobe Analytics服务器中捕获分析数据。 但是，Forms分析报告中不提供此功能。

设置反向代理

嵌入自适应表单的外部网页会向AEM服务器发送请求，该服务器通常位于专用网络中防火墙的后面。 为确保将请求安全地定向到AEM服务器，建议设置反向代理服务器。

让我们看一个示例，您如何在不使用调度程序的情况下设置Apache 2.4反向代理服务器。 在此示例中，您将承载具有/forms上下文路径的AEM服务器，并映射反向代理的/forms。 它确保Apache服务器上的/forms请求都定向到AEM实例。 此拓扑有助于减少调度程序层的规则数，因为所有预先固定/forms的请求都会路由到AEM服务器。

  1. 打开httpd.conf配置文件并取消以下代码行的注释。 或者，也可以在文件中添加这些代码行。

    LoadModule proxy_html_module modules/mod_proxy_html.so 
 LoadModule proxy_http_module modules/mod_proxy_http.so

  2. 通过在httpd-proxy.conf配置文件中添加以下几行代码来设置代理规则。

    ProxyPass /forms https://[AEM_Instance]/forms 
 ProxyPassReverse /forms https://[AEM_Instance]/forms

    将规则中的[AEM_Instance]替换为AEM服务器发布URL。

如果未在上下文路径上装载AEM服务器，则Apache层的代理规则将如下所示：

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
注意

如果设置了任何其他拓扑，请确保将提交、预填充和其他URL添加到调度程允许列表序层的。

最佳实践

在网页中嵌入自适应表单时，请考虑以下最佳实践：

  • 确保网页CSS中定义的样式规则与表单对象CSS不冲突。 要避免冲突，您可以使用AEM客户端库在自适应表单主题中重复使用网页CSS。 有关在自适应表单主题中使用客户端库的信息，请参阅AEM Forms](/docs/experience-manager-64/forms/using/themes.html?lang=zh-Hans)中的[主题。
  • 使网页中的表单容器使用整个窗口宽度。 它可确保为移动设备配置的CSS规则正常工作，而无需进行任何更改。 如果表单容器不采用整个窗口宽度，您需要编写自定义CSS以使表单适应不同的移动设备。
  • 使用getData API获取客户端中表单数据的XML或JSON表示形式。
  • 使用unloadAdaptiveForm API从HTML DOM中卸载自适应表单。
  • 从AEM服务器发送响应时设置访问控制来源头。

使AEM Forms能够向跨域站点提供自适应表单

  1. 在AEM发布实例上，转到位于http://[server]:[port]/system/console/configMgr的AEM Web Console Configuration Manager。
  2. 找到并打开​Apache Sling 推荐人​过滤器配置。
  3. 在​允许的主机​字段中，指定网页所在的域。 它使主机能够向AEM服务器发出POST请求。 您还可以使用常规表达式指定一系列外部应用程序域。

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now