Show Menu
主题×

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

您可以 将自适应表单嵌入到AEM站点页面 ,或AEM外部托管的网页中。 嵌入式自适应表单功能齐全,用户无需离开页面即可填写和提交表单。 它帮助用户保持在网页上其他元素的上下文中并与表单同时交互。

前提条件

在将自适应表单嵌入到外部网站之前,请执行以下步骤
  • 发布要嵌入到AEM Forms服务器的发布实例的自适应表单。
  • 在您的网站上创建或标识网页以托管自适应表单。 确保网页可以 从CDN读取jQuery文件 ,或嵌入了jQuery的本地副本。 渲染自适应表单时需要jQuery。
  • 当AEM服务器和网页位于不同的域上时,请执行部分中列出的步骤,使 AEM Forms能够向跨域站点提供自适应表单

嵌入自适应表单

通过在网页中插入几行JavaScript,可以嵌入自适应表单。 代码中的API向AEM服务器发送HTTP请求以获取自适应表单资源,并在指定的表单容器中插入自适应表单。
要嵌入自适应表单,请执行以下操作:
  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: https: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表单服务器上,因此该示例使用自适应表单/content/forms/af/locbasic.html的上下文路径。
    • 将 ** options.dataRef替换为要随URL传递的属性。 您可以使用dataref变量预填自 适应表单
    • options.themePath替换为指向主题的路径 ,而不是自适应表单中配置的主题。 或者,您也可以使用request属性指定主题路径。
    • CSS_Selector是嵌入自适应表单的表单容器的CSS选择器。 例如,.customafsection css类是上例中的CSS选择器。
自适应表单嵌入到网页中。 在嵌入的自适应表单中观察以下内容:
  • 原始自适应表单中的页眉和页脚不包括在嵌入的表单中。
  • 草稿和提交的表单位于表单门户的“草稿和提交”选项卡中。
  • 在原始自适应表单上配置的提交操作将保留在嵌入式表单中。
  • 自适应表单规则在嵌入的表单中保留并完全可用。
  • 在原始自适应表单中配置的体验定位和A/B测试在嵌入式表单中不起作用。
  • 如果在原始表单上配置了Adobe Analytics,则Adobe Analytics服务器会捕获分析数据。 但是,表单分析报告中不提供该功能。

示例拓扑

嵌入自适应表单的外部网页会向AEM服务器发送请求,该服务器通常位于专用网络中防火墙的后面。 要确保将请求安全定向到AEM服务器,建议设置反向代理服务器。
让我们看一个示例,了解如何在不使用调度程序的情况下设置Apache 2.4反向代理服务器。 在此示例中,您将承载具有上下文路径的AEM服 /forms 务器并映射 /forms 反向代理。 它可确保Apache服务器上 /forms 的任何请求都定向到AEM实例。 此拓扑有助于减少调度程序层的规则数,因为所有请求都以路由到AEM服 /forms 务器为前缀。
  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列在调度程序层的白名单中。

Best practices

在网页中嵌入自适应表单时,请考虑以下最佳实践:
  • 确保网页CSS中定义的样式规则与表单对象CSS不冲突。 要避免冲突,您可以使用AEM客户端库在自适应表单主题中重用网页CSS。 有关在自适应表单主题中使用客户端库的信息,请参阅AEM 表单中的主题
  • 使网页中的表单容器使用整个窗口宽度。 它确保为移动设备配置的CSS规则工作而无需任何更改。 如果表单容器不采用整个窗口宽度,您需要编写自定义CSS以使表单适应不同的移动设备。
  • 使 [getData](https://helpx.adobe.com/experience-manager/6-3/forms/javascript-api/GuideBridge.html) 用API在客户端获取表单数据的XML或JSON表示形式。
  • 使 [unloadAdaptiveForm](https://helpx.adobe.com/experience-manager/6-3/forms/javascript-api/GuideBridge.html) 用API从HTML DOM卸载自适应表单。
  • 从AEM服务器发送响应时设置访问控制来源头。

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

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