Embed an adaptive form or interactive communication in AEM sites page

Last update: May 3, 2023

CREATED FOR:

  • User
CAUTION
AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

Overview

AEM Forms allows form developers to seamlessly embed adaptive forms and interactive communications in an AEM Sites page or a web page hosted outside AEM. 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 form or interactive communication.

For information about embedding an adaptive form in an external web page, see Embed adaptive form in external web page.

In AEM Sites page, you can add an adaptive form or interactive communication using:

  • AEM Forms Container component
    AEM Forms provides a component that you can add to your site pages. The AEM Forms Container component lets you embed an adaptive form and interactive communication.

  • Asset browser
    All the forms and interactive communications you create are available under Assets. You can drag-drop the form as an asset on your page.

Prerequisites

To embed an adaptive form or interactive communication in an AEM sites page that uses an editable template, ensure that the AEM Form component is configured as an allowed component in the associated template. For more information, see Policy & Properties (Layout Container) section in Creating Page Templates.

In case of a Sites page using a static template, you need to configure it in the paragraph system of the site page. See Configuring Components in Design Mode for more information.

Embedding an adaptive form or interactive communication

To embed an adaptive form or interactive communication using AEM Forms Container component:

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

  2. From the Component browser panel, drag-drop the AEM Forms Container component on the page.

    Alternatively, you can 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 Container.

    NOTE
    Multiple AEM Forms Container components on a page are not supported.

  3. Tap the embedded AEM Forms Container component in the sites page, and then tap settings_icon on the action bar. The Edit AEM Forms 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. It is auto-populated if you dropped it from the Assets browser.

    • (Adaptive form only) Post Submission: Select the action to trigger on form submission. You can choose to show a thank you message or a thank you page.

      • Thank You Message: Write a message using the rich text editor to show on form submission. This option is available only when you choose to show a thank you message.
      • Thank You Page: Browse and select the page to display on form submission. This option is available only when you choose to show a thank you page.
      • Refresh Page on Submission: Enable to refresh the page containing the embedded adaptive form to show the thank you page. Otherwise, the thank you page replaces the adaptive form in the AEM Forms container, without refreshing the page. This option is available only when you choose to show a thank you page.

    • 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.

    • Height: Specify the height of the container. Leave it blank to automatically resize the container.

    • CSS Client library: Specify path to a CSS client library.

  5. Save the settings. The adaptive form or interactive communication is now embedded in the page.

Publishing embedded adaptive form and interactive communication

Let’s consider the following scenarios for publishing an embedded asset (adaptive form or interactive communication) in 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 site page, publish the original asset and the changes reflect in the published site page. The published site 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.

Modifying 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.
  • Tap the adaptive form or interactive communication from within the site page in edit mode and then tap Edit in a new window. The original form opens in edit mode that you can modify.
NOTE
The changes made in the original adaptive form or interactive communication automatically reflect in the embedded form. However, republish the adaptive form, interactive communication, or the site page to reflect the changes in the published page.