[AEM Forms]{class="badge positive" title="Applies to AEM Forms)."}

Embed adaptive form based on core components to an external web page embed-adaptive-form-in-external-web-page

Last update: June 5, 2026

Applies to:
Experience Manager as a Cloud Service

CREATED FOR:

Admin
Developer
User

Version

Article link

AEM as a Cloud Service

This article

AEM 6.5

Click here

You can embed adaptive forms in an AEM Sites page or a web page hosted outside AEM. The embedded adaptive form is fully functional and users can fill and submit the form without leaving the page. It helps the user remain in the context of other elements on the web page and simultaneously interact with the form.

Prerequisites prerequisites

Perform the following steps before embedding an adaptive form to an external website

Publish the adaptive form to be embedded to the Publish instance of the AEM Forms Server.
Create or identify a webpage on your website where you can host the adaptive form. Ensure that the webpage can read jQuery files from a CDN or has a local copy of the jQuery embedded. jQuery is required to render an adaptive form.
When the AEM server and the web page are on different domains, perform the steps listed in section, Configure absolute request URLs with GuideBridge and enable AEM Forms to serve adaptive forms to a cross-domain site.

Embed adaptive form embed-adaptive-form

You can embed an adaptive form by inserting a few lines of JavaScript in the web page. The API in the code sends an HTTP request to the AEM server for adaptive form resources and injects the adaptive form in the specified form container.

To embed the adaptive form:

Create a webpage on your website with the following code:

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>

In the embedded code:
- Change the value of the options.path variable with the path of the publish URL of the adaptive form. If the AEM server is running on a context path, ensure that the URL includes the context path. Always mention the complete name of the adaptive form including extension. For example, the above code and adaptive form reside on the same AEM Forms Server so the example uses the context path of adaptive form /content/forms/af/myadaptiveform.html.
- CSS_Selector is the CSS selector of the form container in which the adaptive form is embedded. For example, .customafsection css class is the CSS selector in the above example.

The adaptive form is embedded in the web page. Observe the following in the embedded adaptive form:

Drafts and submitted forms are available in the Drafts and Submissions tab in the Forms Portal.
The Submit action configured on the original adaptive form is retained in the embedded form.
Adaptive form rules are retained and fully functional in the embedded form.
Experience targeting and A/B tests configured in the original adaptive form do not work in the embedded form.
If Adobe Analytics is configured on the original form, the analytics data is captured by the Adobe Analytics server. However, it is not available in the Forms analytics report.
In Adaptive Forms based on Core Components, the client libraries (ClientLibs) are included and loaded along with Header and Footer components of a form. So, when you embed an Adaptive Forms based on Core Components to a webpage, it always includes Header and Footer of the form.

Configure absolute request URLs with GuideBridge configure-base-url

When the AEM server and the web page are on different domains, you can use the GuideBridge API to prepend an absolute AEM publish origin to requests generated by the guideruntime libraries. Use the baseUrl configuration to instruct guideruntime to prepend the specified absolute origin to requests such as form submission, prefill data retrieval, Document of Record generation, file uploads, and internal submit operations.

Add the following snippet to the embedding web page, along with the existing guideBridge.connect implementation:

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

Replace https://publish.example.com with the publish URL of the AEM Forms Server.

With this configuration, a request URL similar to the following example:

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

is sent to the AEM server as:

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

When the AEM server and the web page are on different domains, you must also configure CORS on the AEM publish instance. Perform the steps listed in section, enable AEM Forms to serve adaptive forms to a cross-domain site.

Sample topology sample-topology

The external web page that embeds the adaptive form sends requests to the AEM server, which typically sits behind the firewall in a private network. To ensure that the requests are securely directed to the AEM server, it is recommended to set up a reverse proxy server.

Let’s look at an example of how you can set up an Apache 2.4 reverse proxy server without a Dispatcher. In this example, you are hosting the AEM server with /forms context path and map /forms for the reverse proxy. It ensures that any request for /forms on the Apache server are directed to the AEM instance. This topology helps to reduce the number of rules at the Dispatcher layer as all request prefixed with /forms route to the AEM server.

Open the httpd.conf configuration file and uncomment the following lines of code. Alternatively, you can add these lines of code in the file.

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

Set up proxy rules by adding the following lines of code in the httpd-proxy.conf configuration file.

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

Replace [AEM_Instance] with the AEM server publish URL in the rules.

If you do not mount the AEM server on a context path, the proxy rules at the Apache layer are as follows:

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

If you set up any other topology, ensure that you add the submit, prefill, and other URLs to the allowlist at the dispatcher layer.

Best practices best-practices

When embedding an adaptive form in a web page, consider the following best practices:

Ensure that the styling rules defined in the web page CSS do not conflict with the form object CSS. To avoid the conflicts, you can reuse the web page CSS in the adaptive form theme using AEM client library. For information about using client library in adaptive form themes, see Themes in AEM Forms.
Make the form container in the web page use the entire window width. It ensures that the CSS rules configured for mobile devices work without any changes. If the form container does not take the entire window width, you must write custom CSS to make the form adapt to different mobile devices.
Use [getData](https://developer.adobe.com/experience-manager/reference-materials/6-5/forms/javascript-api/GuideBridge.html) API to get the XML or JSON representation of form data in client.
Use [unloadAdaptiveForm](https://developer.adobe.com/experience-manager/reference-materials/6-5/forms/javascript-api/GuideBridge.html) API to unload the adaptive form from HTML DOM.
Set up the access-control-origin header when sending a response from an AEM server.

Enable AEM Forms to serve adaptive forms to a cross-domain site cross-site

When the AEM server and the web page are on different domains, configure the AEM publish instance using one of the following options.

NOTE

AEM as a Cloud Service does not provide access to the OSGi Web Console on publish instances. Add the following configurations to your Cloud Manager Git repository under ui.config/src/main/content/jcr_root/apps/<application-folder>/osgiconfig/config.publish and deploy the changes through Cloud Manager.

Using GuideBridge baseUrl configuration

When you use the GuideBridge baseUrl configuration, configure CORS on the AEM publish instance so the AEM server returns appropriate headers for submission, prefill, and Document of Record endpoints.

In your Cloud Manager Git repository, navigate to ui.config/src/main/content/jcr_root/apps/<application-folder>/osgiconfig/config.publish.

Create the OSGi configuration file com.adobe.granite.cors.impl.CORSPolicyImpl~embedded-forms.cfg.json with content similar to the following example. Replace https://www.example.com with the origin of the embedding web page.

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"
  ]
}

Commit, push, and deploy the configuration through a Cloud Manager pipeline.

For more information, see Cross-Origin Resource Sharing (CORS) configuration.

Apache Sling Referrer Filter

When you use a reverse proxy or embed the adaptive form without the GuideBridge baseUrl configuration, configure the Apache Sling Referrer Filter on the AEM publish instance.

In your Cloud Manager Git repository, navigate to ui.config/src/main/content/jcr_root/apps/<application-folder>/osgiconfig/config.publish.

Create or update the OSGi configuration file org.apache.sling.security.impl.ReferrerFilter.cfg.json with content similar to the following example. Replace www.example.com with the domain where the web page resides.

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

Commit, push, and deploy the configuration through a Cloud Manager pipeline.

note warning
WARNING
AEM’s Referrer Filter is not an OSGi configuration factory, meaning only one configuration is active on an AEM service at a time. When possible, avoid adding custom Referrer Filter configurations, as this will overwrite AEM’s native configurations and may break product functionality.

For more information, see Referrer Filter configuration.

recommendation-more-help

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