DocumentationAEM 6.5User Guide

Create or add an Adaptive Form to AEM Sites page create-or-add-an-adaptive-form-to-aem-sites-page

Last update: Mon Jun 24 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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.

Version
Article link
AEM 6.5
This article
AEM as a Cloud Service
Click here

With AEM Forms, you can seamlessly incorporate adaptive forms into your web pages. This allows your visitors to conveniently fill and submit forms without ever leaving the page they are on. By doing so, they can effortlessly stay engaged with other elements of the website while actively interacting with the form.

You can use AEM Page Editor to quickly create and add multiple forms to your AEM Sites pages. Using AEM Page Editor allows content authors to create seamless data capture experiences within a Sites page using the power of adaptive forms components including dynamic behavior, validations, data integration, generate document of record and business process automation. It also lets you use various features of AEM Sites pages like, versioning, targeting, translation, and multi-site manager.

AEM Forms provide Adaptive Form Container and Adaptive Forms – Embed components. You can use Adaptive Form Container to create a form in an Experience Fragment or AEM Sites page, while Adaptive Forms – Embed component lets you add an existing Adaptive Form or create a form using Adaptive Forms Editor.

Adaptive form in sites page

Benefits of using Adaptive Form Container component in AEM Page Editor or Experience Fragment

Using Adaptive Form Container in AEM Page Editor lets you create seamless data capture experiences within a Sites page using the power of Adaptive Forms components including dynamic behavior, validations, data integration, generate document of record and business process automation. It also lets you use various features of AEM Sites pages like, versioning, targeting, translation, and multi-site manager, enhancing the overall form creation and management experience. Let’s explore some of these features:

  • Versioning: AEM Sites pages offer robust versioning capabilities, allowing you to track and manage different versions of your forms. This enables you to make changes and enhancements to forms while maintaining the ability to roll back to previous versions if needed. Versioning ensures a controlled and organized approach to form development and evolution.
  • Targeting (Integration with Adobe Target): With AEM Sites pages targeting capabilities, you can also personalize the form experience for different audiences. By using user segments and targeting criteria, you can tailor the form’s content, design, or behavior to specific groups of users. This enables you to provide a personalized and relevant form experience, increasing engagement and conversion rates.
  • Translation: AEM Sites seamless integration with translation services, allowing you to translate forms into multiple languages easily. This feature simplifies the localization process, ensuring that your forms are accessible to a global audience. You can manage translations efficiently within AEM translation projects, reducing time and effort required for multilingual form support. Refer considerations section for more information on translation.
  • Multi-site Management and Live Copy: AEM Sites provide robust Multi-site Management and Live Copy capabilities, enabling you to create and manage multiple websites within a single environment. This feature now lets you reuse forms across different sites, ensuring consistency and reducing duplication efforts. With centralized control and management, you can efficiently maintain and update forms across multiple websites.
  • Themes: AEM Sites pages provide a framework for designing and maintaining consistent visual styles across multiple web pages. These define colors, fonts, style sheets, and other visual elements that contribute to the overall look and feel of the website. You can use the themes designed for an AEM Sites page for an Adaptive Form, saving time and effort.
  • Tagging: AEM Sites pages let you assign tags or labels to a page, an asset, or other content. Tags are keywords or metadata labels that provide a way to categorize and organize content based on specific criteria. You can assign one or more tags to pages, assets, or any other content items within AEM to improve search and categorize the assets.
  • Locking and Unlocking content: AEM Sites allow users to control access and modifications to pages within the AEM Sites environment. When a page is locked, it means that it is protected from unauthorized changes or edits by other users. Only the user who has locked the content or a designated administrator can unlock it to allow modifications.

Various options to add an Adaptive Form in AEM Page Editor

You can take full advantage of this feature by utilizing the following options:

  • Add a custom Adaptive Form to an AEM Sites page: Build a brand-new form from scratch, tailoring it specifically to your requirements and design preferences.

  • Add a custom Adaptive Form to an Experience Fragments: Extend the reach of your forms by adding them to AEM Experience Fragments, allowing for seamless reuse across multiple pages or sites.

  • Convert an Adaptive Form to Experience Fragment: Convert an Adaptive Form added to an AEM Sites page to an Experience Fragment for reusing the form across multiple AEM Sites pages.

  • Create and add forms based on approved templates to an AEM Sites page: Leverage pre-approved templates to quickly create forms that align with your organization’s branding guidelines and design standards. The option is available only for Adaptive Forms created with Adaptive Forms Editor or Adaptive Forms - Embed component.

  • Add existing forms to an AEM Sites page: Easily integrate forms that you have already created into your websites, enabling visitors to interact with them directly. The option is available only for Adaptive Forms created with Adaptive Forms Editor or Adaptive Forms - Embed component.

  • Add multiple forms to an AEM Sites page or Experience Fragment: Add multiple forms to a page to provide multiple choices to users based on their preferences and requirements. These can a combination of brand-new form from scratch and existing forms.

Considerations consideration

  • When you use the Adaptive Form Container to create or add a form, the forms undergo translation and localization through the AEM Sites translation flow. For each language, a separate copy (language copy) of the sites page and corresponding forms is generated and when a content author modifies a rule in a form on the parent page, the same changes must be made in all language copies of the form. Adaptive Form Container also lets you use various features of AEM Sites pages like, versioning, targeting, translation, and multi-site manager.

  • When you create or add a form using the Adaptive Form-embed component, the forms undergo translation and localization using the AEM Forms translation flow. In this case, a single form is maintained and referenced in all the language copies of the Sites pages. Adaptive Form-embed component does not provide access to various features of AEM Sites pages like, versioning, targeting, translation, and multi-site manager.

Before you start before-you-start

Enable Adaptive Forms Core Components for your environment
Ensure that the Adaptive Forms Core Components are enabled for your environment.
Add Adaptive Forms Client Libraries to your AEM Sites page and Experience Fragment page components

To enable complete functionality of the Adaptive Forms Container component, add the Customheaderlibs and Customfooterlibs client libraries to your AEM Sites page using the deployment pipeline. To add the libraries:

  1. Login to your AEM Author instance and open CRX DE. The default URL for an Author instance running locally is http://localhost:4502/crx/de.

  2. Open the /apps/[your-sites-project]/components/page/customheaderlibs.html file and add the following code to the file:

    code language-none 
        //Customheaderlibs.html
    <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
    </sly>

  3. Open the /apps/[your-sites-project]/components/page/customfooterlibs.html file and add the following code to the file:

    code language-none 
        //customfooterlibs.html
    <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
    </sly>

  4. Open the /apps/[your-sites-project]/components/xfpage/customheaderlibs.html file and add the following code to the file:

    code language-none 
        //Customheaderlibs.html
    <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
    </sly>

  5. Open the /apps/[your-sites-project]/components/customfooterlibs.html file and add the following code to the file:

    code language-none 
        //customfooterlibs.html
    <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
    </sly>

  6. Repeat the above steps all the Author and Publish instances in your environment.

Enable Adaptive Forms Container

To enable Adaptive Forms Container component in template’s policy, perform the following steps:

  1. Open the AEM Sites page or Experience Fragment for editing. To open the page for editing, select the page, and click Edit.
  2. Open the template of your Sites or Experience Fragment page. To open the template, go to the Page Information Page Information > Edit Template. It opens the corresponding template in template editor.
  3. In the Structure view, click the Policy Policy icon in the menu bar. In the Allowed Components list and select the Adaptive Forms Container checkbox under the [AEM Archetype Project Name] - Adaptive Form.
  4. Click Done.
embed

https://video.tv.adobe.com/v/3419370?quality=12&learn=on

Create an Adaptive Form create-an-adaptive-form-in-sites-editor-or-experience-fragment

You can create a brand-new form from scratch, tailoring it specifically to your requirements and design preferences, directly in an AEM Sites page or in Experience Fragment. For single-use forms, direct authoring to an AEM Sites page is recommended, while Experience Fragments are ideal for forms that need to be reused across multiple pages on your website.

Create a form in an AEM Sites page create-an-adaptive-form-in-sites-editor

You can use the Adaptive Form Container component in AEM Page Editor to create a custom form. The component lets you create a form by dragging and dropping the form components. The form components are based on Core Components. You can easily customize these as per the requirement of your organization.

https://video.tv.adobe.com/v/3419284?quality=12&learn=on

To create an Adaptive Form in a Sites page:

  1. Open the AEM Sites page in edit mode.
  2. Drag-and-drop the Adaptive Forms Container component from the Component Browser to the Sites page. It creates a space on the page for the form. You can use the layout mode to change the Size of the container space.
  3. Drag-and-drop Adaptive Form Core Components to the container space to create the form.
  4. Add the Submit button.

Next, you set the Submit Action and advanced properties.

Create a form in an Experience Fragment create-an-adaptive-form-in-experience-fragment

You can extend the reach of your forms by adding them to AEM Experience Fragments, allowing for seamless reuse across multiple pages or sites. For example, you can include a newsletter signup form within an Experience Fragment. This lets you conveniently reuse the fragment across multiple pages of your website, eliminating the need to recreate the form repeatedly. Any updates or modifications made to the newsletter signup form within the Experience Fragment are automatically propagated to all the pages where it is utilized. This streamlines the process and ensures a seamless user experience while simplifying the management of your website’s forms.

To create an Adaptive Form in an Experience Fragment:

  1. Open an Experience Fragment.
  2. Drag-and-drop the Adaptive Forms Container component from the Component Browser to the Experience Fragment.
  3. Drag-and-drop Adaptive Form Core Components to the container space in the Experience Fragment to create the form.
  4. Add the Submit button.

Next, you set the Submit Action and advanced properties.

Convert an Adaptive Form in AEM Sites page to an Experience Fragment convert-an-adaptive-form-in-sites-page-to-an-experience-fragment

You can convert an existing Adaptive Form in a Sites Page Editor to an Experience Fragment to reuse the form across multiple pages or sites.

To convert an Adaptive Form in AEM Sites page to an Experience Fragment:

  1. Open the AEM Sites page containing the Adaptive Form (in Adaptive Forms Container component) in edit mode.

  2. Open the Content Tree, and select the Adaptive Forms Container that hosts your Adaptive Form. An AEM Sites page can host multiple Adaptive Forms. So, carefully select the correct Adaptive Forms Container.

  3. On the menu bar, select the Convert to experience fragment variation icon Convert to Experience Fragment variation icon.
    Convert form in sites page to an experience fragment

    A dialog box to convert the Adaptive Form container to a new Experience Fragment or add to an existing Experience Fragment appears

  4. On the Convert to Experience Fragment variation dialog box, set values for the following options:

    • Action: Select to create an Experience Fragment or Add to an existing Experience Fragment.
    • Parent path: Specify path of the folder to host the Experience Fragment in. The option is available only for creating an Experience Fragment.
    • Template: Specify path of the Experience Fragment template. If you do not have an Experience Fragment template, create it. The option is available only for adding Adaptive Form to an existing Experience Fragment.
    • Fragment title: Specify title of the Experience Fragment. The title uniquely identifies an Experience Fragment

Configure Submit Action for the form configure-submit-action-for-form

A Submit Action lets you choose the destination of data captured by way of an Adaptive Form. It is triggered when a user clicks the Submit button on an Adaptive Form. Adaptive forms include some out of the box submit actions. You can also extend a default submit actions to create your own custom submit action. To configure a Submit Action for your form:

  1. Open the AEM Page Editor or Experience Fragment that contains the Adaptive Form.
  2. Open the Content Tree, and select the Adaptive Forms Container that hosts your Adaptive Form. An AEM Sites page can host multiple Adaptive Forms. So, carefully select the correct Adaptive Forms Container.
  3. Click the Adaptive Form Container properties Adaptive Form Container properties icon. The Adaptive Form Container dialog box to configure submit actions opens.
    Adaptive forms container
  4. Select and configure a Submit action, based on your requirements. For detailed information about Submit Actions, see Adaptive Form Submit Action

Configure a Schema or Form Data Model for a form configure-schema-or-data-model-for-form

You can use the Form Data Model to connect a form to a Data Source to send and receive data based on user actions. You can also connect a form to a JSON schema to receive the submitted data in a pre-defined format.

Before you connect a form to a schema or Form data model

To configure a JSON Schema or Form Data Model for your form:

  1. Open the AEM Page Editor or Experience Fragment that contains the Adaptive Form.

  2. Open the Content Tree, and select the Adaptive Forms Container that hosts your Adaptive Form. An AEM Sites page can host multiple Adaptive Forms. So, carefully select the correct Adaptive Forms Container.

  3. Click the Adaptive Form Container properties Adaptive Form Container properties icon. The Adaptive Form Container dialog box to configure Data Models opens.
    Form data model adaptive forms container

  4. Select and configure a JSON Schema or Form Data Model, based on your requirements. For detailed information about Submit Actions, see Adaptive Form Submit Action.

    • When you select the Form Model option, use the Select Form Data Model option to select a pre-configured Form Data Model.
    • When you select the Schema option, use the Schema option to select a JSON schema for your form.

  5. Click Done.

Configure a pre-fill service for a form configure-prefill-service-for-form

You can use the prefill service to auto fill fields of an Adaptive Form using existing data. When a user opens a form, the values for those fields are prefilled. You can:

Use Form Data Model Prefill service fdm-prefill-service

You can use the Form Data Model Prefill service to prepopulate fields of a form using a configured Form Data Model. The Form Data Model Prefill service uses the Get Service of configured Form Data Model to retrieve data. To use Form Data Model Prefill service for an Adaptive Form:

  1. Open the AEM Page Editor or Experience Fragment that contains the Adaptive Form.
  2. Open the Content Tree, and select the Adaptive Forms Container that hosts your Adaptive Form. An AEM Sites page can host multiple Adaptive Forms. So, carefully select the correct Adaptive Forms Container.
  3. Click the Adaptive Form Container properties Adaptive Form Container properties icon. The Adaptive Form Container dialog box to configure Data Models opens.
    Prefill service fdm aem sites page editor
  4. Select a form data model. Open the Basic tab. In the prefill service, select Forms Portal Draft Prefill Service.
  5. Click Done.

Redirect the user to a new user on form submission or show a thank you message

On submission of a form, you can redirect the user to another webpage or a message. To redirect the user or configure the thank you message:

  1. Open the AEM Page Editor or Experience Fragment that contains the Adaptive Form.

  2. Open the Content Tree, and select the Adaptive Forms Container that hosts your Adaptive Form. An AEM Sites page can host multiple Adaptive Forms. So, carefully select the correct Adaptive Forms Container.

  3. Click the Adaptive Form Container properties Adaptive Form Container properties icon. The Adaptive Form Container dialog box to configure Data Models opens.

  4. Open the Submission tab.

    • To configure a Redirect URL, for on Submit option, select the Redirect to URL option, and provide an absolute address or a Redirect URL or relative path of an AEM Sites page.

    • To configure a custom or thank you message, for on Submit option, select the Show Message option, and provide a message in the Message content box. It is a rich text box, you can use the full screen option to view all the available rich text items.

See also see-also

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2