Embed an adaptive form or Interactive Communication in AEM Sites Single Page Application

Last update: May 2, 2024

CREATED FOR:

  • User
  • Developer

Adobe recommends using the modern and extensible data capture Core Componentsfor creating new Adaptive Formsor adding Adaptive Forms to AEM Sites pages. These components represent a significant advancement in Adaptive Forms creation, ensuring impressive user experiences. This article describes older approach to author Adaptive Forms using foundation components.

Overview

AEM Forms allows form developers to seamlessly embed adaptive forms and Interactive Communications in an AEM Sites Single Page Application (SPA). The embedded adaptive form and Interactive Communication is fully functional and users can fill and submit the form without leaving the page. It helps user remain in context of other elements on the web page and simultaneously interact with the adaptive form or Interactive Communication.

In AEM Sites Single Page Application, you can add an adaptive form or Interactive Communication using the AEM Forms SPA Container component. It is an AEM Forms component for AEM Sites SPAs that you can add to your Sites page.

For information about embedding an adaptive form in a non-SPA AEM Sites, see Embed an adaptive form or interactive communication in AEM Sites page.

Prerequisites

To embed an adaptive form or Interactive Communication in an AEM sites SPA using the AEM Forms SPA Container component, ensure that you have installed:

Install AEM Forms SPA Container component

Execute the following steps install the AEM Forms SPA Container component:

  1. Clone or download the AEM Forms component for SPA.

  2. Install the AEM Forms component for SPA. The instructions to install the component are available in the README.md file.

    The component includes a sample React component that can be used to integrate SPA container component with a React-based SPA project.

  3. Clone or download a React-based SPA project.

  4. Integrate SPA container component with a React-based SPA project using the instructions available in the README.md file.

    After installing the AEM Forms SPA Container component and integrating the component with a React-based SPA project, you can embed an adaptive forms and Interactive Communications in the AEM Sites page.

Embed an adaptive form or Interactive Communication

To embed an adaptive form or Interactive Communication using AEM Forms for SPA Container component:

  1. Open the AEM sites page, in edit mode, in which you want to embed an adaptive form or Interactive Communication.

  2. Insert the AEM Form for SPA component on the page using any of the following options:

    • Select the layout container on the Sites page, select + and select the AEM Form for SPA component.

    • From the Component browser panel, drag-drop the AEM Form for SPA component on the page.

    • Search for an adaptive form or Interactive Communication in the Assets browser and drag-drop it onto the Sites page. It embeds the form in an AEM Forms for SPA component container.

    NOTE
    Rendering multiple AEM Forms SPA Container components on a page are not supported. You can have multiple AEM Forms SPA Container on a page but only one component is rendered at a time. Ensure that only one component is visible on a page to avoid discrepancies.

  3. Select the embedded AEM Forms SPA Container component in the sites page, and then select settings_icon on the action bar. The Edit AEM Forms SPA Container dialog opens.

  4. In the Edit AEM Forms Container dialog, specify the following:

    • Asset Type: Select the type of asset to embed. The options are Adaptive Form and Interactive Communication

    • Asset Path: Browse and select the adaptive form or Interactive Communication to embed. The field is auto-populated if an adaptive form or Interactive Communication is inserted using the Assets browser.

    • Channel (Interactive Communication Only): Select the type of interactive channel to embed. The options are Web Channel and Print Channel.

    • Theme: Select a theme that defines styling for components of your adaptive form or Interactive Communication. Styling includes appearance properties such as font style, background color, dimensions, and alignment.

  5. Select done_icon to save the settings. The adaptive form or Interactive Communication is now embedded in the page.

Publish embedded adaptive form and Interactive Communication

Consider the following scenarios for publishing an embedded asset (adaptive form or Interactive Communication) on AEM Sites page:

  • If you are publishing the AEM Sites page for the first time and it includes an embedded adaptive form or Interactive Communication, publish the Sites page and the embedded asset.
  • If you modified only the embedded adaptive form or Interactive Communication in a published Sites page, publish the original asset and the changes reflect in the published Sites page. The published Sites page includes a reference to the asset and does not require republishing the page.
  • If you modified the Sites page and the embedded adaptive form or Interactive Communication, republish the Sites page and the embedded asset.

Modify embedded adaptive form and Interactive Communication

AEM sites page maintains a reference to the adaptive form and Interactive Communication in the AEM Forms Container. Therefore, all configurations and properties, such as the theme, styles, and submit action, configured in the original adaptive form and Interactive Communication are retained in the embedded adaptive form and Interactive Communication.

To modify any configuration or property of the embedded adaptive form and Interactive Communication, do one of the following.

  • Open the original form in adaptive forms or Interactive Communication in respective editors and modify them.
  • Select the adaptive form or Interactive Communication from within the Sites page in edit mode and then select Edit in a new window. The original form opens in edit mode.

Considerations and best practices

Do keep the following points in mind when embedding adaptive forms in AEM sites pages:

  • Header and footer in the original form are not included in the embedded form.
  • User drafts and submissions of embedded forms are supported and visible in Drafts and Submitted Forms tabs on the forms portal.
  • The submit action configured on the original form is retained in the embedded form.
  • Experience targeting and A/B tests configured on the original form do not work in the embedded form. However, you can use experience targeting on the Sites page to present different forms based on user profiles.
  • If you have Adobe Analytics configured for the original form, the analytics data of the embedded form is captured in Adobe Analytics. However, it is not available in the forms analytics report.

Experience Manager


Espressos & Experience Manager: AEM Forms

Espressos & Experience Manager

Thursday, Mar 6, 7:00 PM UTC

Join Adobe's AEM product team as they highlight AEM Forms' latest innovations, including: the new Gen AI Assistant, Unified Composition with AEM Sites, and new ways to deploy forms through conversations.

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more

Register now