Add an Adaptive Form to an AEM Sites page or Experience Fragment

Overview

With AEM Forms, you can seamlessly add a form to your AEM Sites page. 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 Cloud Service provides Adaptive Form Container and Adaptive Forms – Embed components. You can use Adaptive Form Container to create a form in an AEM Sites page or Experience Fragment, while Adaptive Forms – Embed component lets you add an existing Adaptive Form or create a form using Adaptive Forms Editor.

Why use Adaptive Forms Core Components to create an Adaptive Form in AEM Sites page or Experience Fragment?

If you have created Adaptive Forms Foundation Component or plain HTML based forms for your Sites in the past, Adobe recommends that you use Adaptive Forms Core Components to create an Adaptive Form in AEM Sites page or Expereince Fragment. It 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 for Adaptive Forms. 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. See 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 allow you to 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.

In addition, Adaptive Forms in AEM Page Editor use Adaptive Forms Core Components. These Core Components provide a standard and easier methods to style and customize the components, identical to AEM Sites WCM Components.

How to create or add an Adaptive Form in AEM Sites page or AEM Experience Fragment?

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

• Create and add a custom Adaptive Form to an AEM Sites page: You can use the Adaptive Form Container component to build a brand-new form from scratch, tailoring it specifically to your requirements and design preferences.

• Create and add a custom Adaptive Form to an Experience Fragments: You can 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: You can leverage pre-approved templates to quickly create Adaptive 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: You can 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: You can create or add multiple Adaptive Forms to an AEM Sites 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. You can use the Adaptive Form Container component multiple times to add Adaptive Forms in an AEM Sites page. You can use the Adaptive Forms - Embed component multiple times in an AEM Sites page, only if Form covers entire width of the frame option is selected. In case the Form covers entire width of the frame option is not checked, AEM Sites page supports only one Adaptive Form to exist without an iframe. To add more Adaptive Forms using the Adaptive Forms - Embed component, select Form covers entire width of the frame option.

Considerations to create an Adaptive Form in AEM Sites page or AEM Experience Fragment

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

Requirements to create or add an Adaptive Form in AEM Sites page or AEM Experience Fragment

Before you start creating or an Adaptive Form, enable Adaptive Forms Core Components and add Adaptive Forms Client Libraries to your AEM Sites page:

Create an Adaptive Form

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 a form in an Experience Fragment
• Convert an Adaptive Form in AEM Sites page to an Experience Fragment

Create a form in an AEM Sites page

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.

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

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 a form in AEM 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.
   

   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 a form in AEM Sites page or Expereince Fragment

A Submit Action lets you choose the destination of data captured via 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 icon. The Adaptive Form Container dialog box to configure submit actions opens.
   
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 in AEM Sites page or Expereince Fragment

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. Based on the requirement, connect your form to a JSON schema or Form data model:

• Create a JSON Schema and upload to your environment or,
• Create a 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 icon. The Adaptive Form Container dialog box to configure Data Models opens.
   

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 in AEM Sites page or Expereince Fragment

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:

• Create a custom pre-fill service
• Use Form Data Model Prefill service

Use Form Data Model Prefill service to prepopulate fields of a form in AEM Sites page or Expereince Fragment

You can use the Form Data Model Prefill service to prepopulate fields of an Adaptive Form in AEM Sites page or Expereince Fragment using a Form Data Model or a custom pre-fill service. 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 icon. The Adaptive Form Container dialog box to configure Data Models opens.
   
4. Select a form data model. Open the Basic tab. In the prefill service, select Form Data Model Prefill Service.
5. Click Done. Your Adaptive form is now configured to use Form Data Model Prefill. You can now, use the rule editor to create rules to prepopulate fields of the form.

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

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. Open the Submission tab.

   • To configure a Redirect URL, for on Submit option, select the Redirect to URL option, and browse and select an AEM Sites page, or provide URL of an external 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

• Create an AEM Adaptive Form
• Add an AEM Adaptive Form to AEM Sites page
• Apply themes to an AEM Adaptive Form
• Add components to an AEM Adaptive Form
• Use CAPTCHA in an AEM Adaptive Form
• Generate PDF version (DoR) of an AEM Adaptive Form
• Translate an AEM Adaptive Form
• Enable Adobe Analytics for an Adaptive Form to track form usage
• Connect Adaptive Form to Microsoft SharePoint
• Connect Adaptive Form to Microsoft Power Automate
• Connect Adaptive Form to Microsoft OneDrive
• Connect Adaptive Form to Microsoft Azure Blob Storage
• Connect Adaptive Form to Salesforce
• Use Adobe Sign in an AEM Adaptive Form
• Add a new locale for an Adaptive Form
• Send Adaptive Form data to a database
• Send Adaptive Form data to a REST endpoint
• Send Adaptive Form data to AEM Workflow
• Use Forms Portal to list AEM Adaptive Forms on an AEM website
• Add dynamic behavior to forms using the rule editor
• Set layout of forms for different screen sizes and device types