Adaptive form | Community
Skip to main content
P
pathikparmar19
Level 2
February 11, 2026
Solved

Adaptive form

  • February 11, 2026
  • 2 replies
  • 19 views

Hi Community, 

 

I have questions for the adaptive form, 

 

We have use case where we need to add the pagination for the adaptive form, is there any way we can achieve this? I haven’t seen such a business need in my previous role. 

 

As adaptive forms consider as SPA it’s very uncommon, Also, can we bind the logic on adaptive form to achieve exact analytics data? 

 

Best, 

Pathik

Best answer by Pranay_M

Hi ​@pathikparmar19,

Thanks for the questions. Please find below the response.

  1. Pagination / multi‑step form
    AEM Adaptive Forms fully support multi‑step (wizard‑style) forms. You can group fields into panels and use the Wizard or Tabs layout so that users move through the form step‑by‑step with Next/Back navigation and a progress indication, even though the form runs as a SPA.

  2. Analytics on multi‑step forms
    Adaptive Forms integrate with Adobe Analytics via Experience Platform Tags (Launch). Out of the box, they track key interactions (render, field visit, errors, help, submit, abandon). On top of this, we can configure custom step‑level events (e.g., “Step 2 completed”) using the Rule Editor and Tags so you get precise funnel and drop‑off reporting per step.

In short, we can provide both the paginated UX and the detailed step‑by‑step analytics you’re looking for.

Thanks
Pranay

2 replies

P
Adobe Employee
Pranay_MAdobe EmployeeAccepted solution
Adobe Employee
February 16, 2026

Hi ​@pathikparmar19,

Thanks for the questions. Please find below the response.

  1. Pagination / multi‑step form
    AEM Adaptive Forms fully support multi‑step (wizard‑style) forms. You can group fields into panels and use the Wizard or Tabs layout so that users move through the form step‑by‑step with Next/Back navigation and a progress indication, even though the form runs as a SPA.

  2. Analytics on multi‑step forms
    Adaptive Forms integrate with Adobe Analytics via Experience Platform Tags (Launch). Out of the box, they track key interactions (render, field visit, errors, help, submit, abandon). On top of this, we can configure custom step‑level events (e.g., “Step 2 completed”) using the Rule Editor and Tags so you get precise funnel and drop‑off reporting per step.

In short, we can provide both the paginated UX and the detailed step‑by‑step analytics you’re looking for.

Thanks
Pranay

    P
    pathikparmar19Author
    Level 2
    February 19, 2026

    Thank you Pranay :) 

    Vishal_Anand
    Vishal_Anand
    Level 5
    February 16, 2026

    ​@pathikparmar19 Here are the pagination options:

    • Built-in multi-page (recommended): create multiple pages/sections inside the Adaptive Form Container and enable form navigation/wizard. This gives native Next/Prev handling, validation per page, and state persistence.
    • Panel-based client pagination: group fields into panels/containers and implement Next/Prev to show/hide panels. Use this when you need custom step behavior or animated transitions.
    • Hybrid: use built-in pages for structure and small client-side JS for UX polish (animations, conditional skipping).

    Analytics / binding for SPA behavior:

    • Emit explicit step-change events (don’t rely on URL changes). On every Next/Prev or page load, push a structured event to the data layer:
      • Example (pseudo-JS): dataLayer.push({ event: 'afStepView', formId: 'bookingForm', stepId: 'passenger-info', stepIndex: 2, timeOnStepMs: 15000 });
    • Send conversion events for micro-actions (field-complete, step-complete, validation-error) and final submit/purchase:
      • Example events: afFieldComplete, afStepComplete, afFormSubmit, afValidationError.
    • Use Adobe Launch or AEP Rules to map these dataLayer events to Adobe Analytics/AEP events (virtual page views, custom eVars/events).
    • For time metrics, capture timestamp on step enter and compute timeOnStep on exit.

    Implementation tips:

    • Hook into Next/Prev buttons or AEM form navigation callbacks to fire events. If using panels, also fire on programmatic navigation.
    • Use history.pushState / URL hash for shareable step links and better back-button UX; still fire a virtual page view event when state changes.
    • Keep PII out of analytics payloads — send IDs or hashed tokens only.
    • Validate and persist partial data server-side or via form auto-save if users abandon and return.

    Code snippet for reference:

    // Minimal step tracking for AEM Adaptive Forms
    window.dataLayer = window.dataLayer || [];

    let _stepEnterTs = Date.now();

    function pushAfStepEvent(formId, stepId, stepIndex) {
      const timeOnStepMs = Date.now() - _stepEnterTs;
      window.dataLayer.push({
        event: 'afStepView',
        formId: formId,
        stepId: stepId,
        stepIndex: stepIndex,
        timeOnStepMs: timeOnStepMs
      });
      _stepEnterTs = Date.now();
    }

    // Example: hook into next/prev buttons or AF navigation callbacks
    document.addEventListener('click', function(e) {
      const btn = e.target.closest('[data-af-nav]');
      if (!btn) return;
      const form = btn.closest('form[data-af-id]');
      const formId = form && form.getAttribute('data-af-id') || 'unknownForm';
      const stepId = btn.getAttribute('data-target-step') || btn.getAttribute('data-af-nav');
      const stepIndex = parseInt(btn.getAttribute('data-step-index') || '0', 10);
      pushAfStepEvent(formId, stepId, stepIndex);
    });

    Data element: read event payload via direct data element referencing dataLayer (e.g., %event.afStepView% or custom JS returning last dataLayer item).

    Rule conditions: Event equals "afStepView".

    Actions:

    - Send Adobe Analytics (or AEP) event:

    • eVarX = dataLayer.formId
    • propY = dataLayer.stepId
    • eventZZ = 1 (step view)
    • eventTime = dataLayer.timeOnStepMs
    • Fire beacon on rule execution.

    - Keep PII out of payloads (use hashed IDs).

      P
      pathikparmar19Author
      Level 2
      February 19, 2026

      Thank you Vishal_Anand :)

        Vishal_Anand
        Vishal_Anand
        Level 5
        February 19, 2026

        ​@pathikparmar19 You can mark it as correct answer if it helped :)

        Terms & ConditionsAccessibility statement

        Loading footer...