Level 2

Question

How to deliver an AEM Form via an Experience Fragment into Adobe Target for personalization

Forum|Forum|22 days ago
August 13, 2026
4 replies
210 views

What is the best way to deliver an AEM Form via an Experience Fragment into Adobe Target for personalization? What specific client library or CSS requirements are needed so the form renders and submits correctly?

PrasanthV

Level 4

Hi @KumarMu1,

Delivering an AEM Form inside an Experience Fragment (XF) via Adobe Target is a common scenario, but it often fails at runtime if the rendering and script initialization order are not architected correctly.

Because Adobe Target injects HTML dynamically into the DOM via JavaScript after page load, standard AEM forms will not automatically initialize, render, or submit unless their required clientlibs and execution contexts are carefully managed.

Here is the technical blueprint and client library architecture required to make this work reliably.

1. Delivery Architecture (The Recommended Pipeline)

To deliver an AEM Form via Target, follow the AEM Export to Target (HTML Offer) delivery pattern:

AEM Authoring: Create the Experience Fragment (Web Variation) containing your Adaptive Form / Core Form component.
Export to Target: Export the XF to Adobe Target via IMS S2S OAuth integration. This pushes the XF HTML payload into Target as an HTML Offer.
Target Activity: Inject the Experience Fragment HTML Offer into your targeted target container/mbox using either the Visual Experience Composer (VEC) or Form-Based Composer.

2. Client Library (Clientlib) & Dependency Requirements

The primary failure point when Target injects an AEM Form XF is missing or uninitialized JavaScript dependencies. When AEM exports an XF to Target, AEM strips structural page templates and often omits required component clientlibs to prevent duplicates.

To ensure the form renders and submits correctly, your host page must pre-load all required form runtime dependencies.

Required Clientlibs on the Host Page:

Your AEM site template (or host application page) must include these client library categories in the header/footer before Target executes the offer injection:

Core Forms Runtime: cq.forms.core.runtime (or dam.forms.core.runtime depending on AEM Core Components version).
Adaptive Forms Runtime (if applicable): af.runtime, af.customcomponents, af.events.
Form Layout/Styling: cq.forms.core.components (CSS/JS for input fields, buttons, and layout containers).
Validation & Dependencies: granite.jquery, underscore (if using legacy AEM Adaptive Forms).

Rule of Thumb: Assume the Experience Fragment injected by Target contains only raw HTML markup. The host page must supply the CSS layout rules and JavaScript runtime engine.

3. Solving the "Dynamic Form Re-initialization" Problem

Standard AEM form JavaScript initializes during the native DOMContentLoaded or window.onload events. Because Adobe Target injects the Experience Fragment after these events have already fired, the form fields will remain uninitialized, and the submit button will be unresponsive.

To fix this, you must re-trigger the AEM Form JavaScript initialization logic immediately after Target inserts the offer.

Step 1: Wrap Target Delivery with an Event Listener

In your Adobe Target Activity (or via Adobe Launch / Tags), attach a custom post-injection callback:

JavaScript

// Target Custom Code / Launch Rule on Target Offer Rendered
document.addEventListener("at-request-succeeded", function (event) {
  var offers = event.detail.responseTokens;

  // Check if our targeted form container was injected
  var formContainer = document.querySelector(".cmp-form-container");

  if (formContainer && typeof GuideBridge !== "undefined") {
    // Re-initialize AEM Adaptive Form Runtime (Legacy AF)
    window.GuideBridge.connect(function () {
      console.log("AEM Form successfully initialized post-Target injection.");
    });
  } else if (formContainer && window.CMP && window.CMP.Forms) {
    // Re-initialize AEM Core Component Form Runtime
    window.CMP.Forms.Core.init(formContainer);
  }
});

Step 2: Ensure Relative Form Action & Endpoint URLs

Ensure the AEM Link Externalizer is properly configured on your Author/Publish instances during export.

Form Action Path: The <form action="..."> endpoint generated inside the Experience Fragment must point to a fully qualified domain (e.g., [https://www.yoursite.com/content/forms/af/myform.html/guideContainer](https://www.yoursite.com/content/forms/af/myform.html/guideContainer)) or a valid relative servlet endpoint (/bin/gated-form-submit).
CORS / CSRF Tokens: If the host page domain differs from the AEM Publish domain serving the form submission servlet, ensure your AEM CSRF filter (com.adobe.granite.csrf.impl.CSRFFilter) accepts cross-origin submissions and includes valid CSRF-Token headers.

KumarMu1Author

Level 2

Hi Prasanth,

Thank you for your response.
This is very help full document. If you provide me some more details info or any demo video. It will be more help to work on this use case.

I’m last two months onwards stuck in this project, need more help on this to execute.

Thanks is advance.
Kumar

PrasanthV

Level 4

Here are the complete step-by-step technical details, along with reference links to the official Adobe video tutorials and documentation to help you implement this end-to-end.

🎬 Official Adobe Video Guides

If you need a step-by-step visual demonstration of setting up the integration and exporting Experience Fragments (XFs) into Target, watch these official Experience League videos:

Setting Up Experience Fragments & Adobe Target Integration

Covers IMS OAuth configuration, Cloud Service setup, and syncing authoring permissions between AEM and Target.
Using AEM Experience Fragments with Adobe Target

Demonstrates exporting an XF variation into Target as an HTML offer and inserting it using the VEC (Visual Experience Composer).

🛠️ Detailed Implementation Guide

Step 1: Export the Form Experience Fragment to Target

In AEM Author, create an Experience Fragment using an Editable Template.
Drop your Form Component (Adaptive Form or Core Components Form) inside the Experience Fragment.
Go to the Fragment properties $\rightarrow$ Cloud Services tab $\rightarrow$ assign your Adobe Target Configuration.
Select the Experience Fragment variation and click Export to Adobe Target in the top action bar.
Verify in Adobe Target under Offers $\rightarrow$ Code Offers that your XF has synced as an HTML Offer.

Step 2: Set Up Host Page Clientlibs & Dependencies

Since Target injects raw HTML into the DOM, the host page must pre-load all Form dependencies. Add these to your site's main AEM clientlib configuration (or via Adobe Launch/Tags):

CSS & Styling

HTML

<!-- Core Form Component Styles -->
<link rel="stylesheet" href="/etc.clientlibs/core/wcm/components/form/container/v2/container/clientlibs/site.min.css" type="text/css">

Runtime JavaScript Libraries

HTML

<!-- AEM Core Forms Runtime -->
<script src="/etc.clientlibs/core/wcm/components/form/container/v2/container/clientlibs/site.min.js"></script>

Step 3: Configure Target Delivery & Dynamic Re-Initialization

When Target delivers the XF HTML offer, the form HTML is inserted after the browser's DOMContentLoaded event has already passed. You must execute a script to bind event listeners and re-initialize the form elements.

Option A: Inject via Target Custom Code Action (VEC)

When configuring your Activity in the Target Visual Experience Composer (VEC):

Select the target element $\rightarrow$ Replace With $\rightarrow$ Experience Fragment $\rightarrow$ Select your Form XF.
Click Add Modification $\rightarrow$ Custom Code.
Paste the following JavaScript block:

JavaScript

// Function to safely initialize AEM Forms injected by Target
function initializeTargetForm() {
  var formElement = document.querySelector('.cmp-form-container');

  if (formElement) {
    // 1. Re-bind AEM Core Form Components
    if (window.CMP && window.CMP.Forms && window.CMP.Forms.Core) {
      window.CMP.Forms.Core.init(formElement);
      console.log('AEM Core Form initialized via Target.');
    } 
    // 2. Re-bind Legacy Adaptive Forms (GuideBridge)
    else if (window.GuideBridge) {
      window.GuideBridge.connect(function() {
        console.log('AEM Adaptive Form initialized via GuideBridge.');
      });
    }
  }
}

// Execute immediately or wait for the Target offer render event
if (document.readyState === 'complete' || document.readyState === 'interactive') {
  setTimeout(initializeTargetForm, 100);
} else {
  document.addEventListener('at-request-succeeded', initializeTargetForm);
}

Step 4: Handle Cross-Origin & Submission Endpoints (CORS/CSRF)

If your form submits data back to an AEM Publish instance from a different host domain, configure the following in AEM Web Console (/system/console/configMgr):

Adobe Granite CSRF Filter:
- Add your host domain (e.g., [https://www.yourmainwebsite.com](https://www.yourmainwebsite.com)) to the Safe User Agents or Allowed Origins.
Apache Sling Referrer Filter:
- Ensure Allow Empty is checked, or explicitly whitelist the domain hosting the Target mbox.
Form Action Endpoint:
- Ensure the <form action="..."> attribute inside the Experience Fragment uses an Externalized Absolute URL (e.g., [https://publish.yoursite.com/content/forms/af/myform/jcr:content/guideContainer.af.submit.jsp](https://publish.yoursite.com/content/forms/af/myform/jcr:content/guideContainer.af.submit.jsp)) instead of a relative path.

KumarMu1Author

Level 2

Hi Prasanth,

This is very help full.

I will follow this and if stuck any where will message you.

1. Delivery Architecture (The Recommended Pipeline)

2. Client Library (Clientlib) & Dependency Requirements

Required Clientlibs on the Host Page:

3. Solving the "Dynamic Form Re-initialization" Problem

Step 1: Wrap Target Delivery with an Event Listener

Step 2: Ensure Relative Form Action & Endpoint URLs

🎬 Official Adobe Video Guides

🛠️ Detailed Implementation Guide

Step 1: Export the Form Experience Fragment to Target

Step 2: Set Up Host Page Clientlibs & Dependencies

CSS & Styling

Runtime JavaScript Libraries

Step 3: Configure Target Delivery & Dynamic Re-Initialization

Option A: Inject via Target Custom Code Action (VEC)

Step 4: Handle Cross-Origin & Submission Endpoints (CORS/CSRF)

Sign up

Login with SSO

Login to the community

Login with SSO