For AEM 6.2 Forms version of this help, see Introduction to authoring adaptive forms.

 

Overview

The adaptive forms feature of Adobe Experience Manager (AEM) forms allows you to create engaging, responsive, and adaptive forms that automatically render as PDF or HTML5 based on device and browser settings. Adaptive forms dynamically adapt to user responses by adding or removing fields or sections based on user response.

With adaptive forms, you can break down a form into logical sections, which enables end users to focus on filling out one section at a time. In addition, you can leverage the default form templates supplied with AEM forms, use existing Adobe XML or XFA templates, or create your own templates from scratch.

Note:

Adaptive form authoring is not supported in Touch authoring mode. So if the URL contains /editor.html/, you need to replace it with /cf#/, which enforces the classic authoring mode.

Adaptive form authoring UI

The intuitive interface, drag-and-drop functionality, standard form components, and integrated repository for assets facilitate quick and easy authoring of adaptive forms in no time.

When you create a new or edit an existing adaptive form, you use the following UI elements:

  • Content finder
  • Adaptive form page
  • Sidekick
Adaptive form authoring UI
A. Content finder B. Adaptive form page C. Sidekick 

Content finder

The Content finder pane allows you to search, view, and use assets in your AEM Digital Asset Management (DAM) repository. It consists of several tabs that segregate different types of content, such as images, documents, pages, movies, and so on. For more information about finding assets in DAM, see Finding and Viewing Digital Assets.

However, in case of an adaptive form that uses an XML schema or XDP form template as its form model, a new tab displaying the form-model hierarchy is shown in the content finder. It allows you to drag and drop form-model elements on the adaptive form. The added elements automatically get converted into form components while retaining their original properties.

Adaptive form page

The adaptive form page is the actual form. It is like any other WCM page modeled as the WCM cq:Page component. The following image shows the content structure of a typical adaptive form.

Content structure of an adaptive form WCM page

The content structure typically contains the following primary components:

  • guideContainer: The root of an adaptive form, which is marked as Start of adaptive form in the adaptive form UI. In this component, you can specify:
    • Mobile Layout of the adaptive form: Defines the appearance of the form on mobile devices.
    • Thank You page: Defines the page where the user is redirected after submitting the form.
    • Submit Action: Defines how the form is processed on the server once the user submits the form.
    • Styling: Specifies the path to the CSS file used to customize the appearance of the form.
  •  rootPanel: The root panel of an adaptive form. It can contain subpanels under the items node. Each panel including the root panel can have a layout associated with it. The layout of the panel dictates how the form is laid out. For example, in the Accordion layout, its items are laid out as Accordion steps.
  • toolbar: An adaptive form container has an associated global toolbar, which is global to the form. This toolbar can be added using the Add Toolbar action in the edit bar, which allows authors to add actions, such as Submit, Save, Reset, and so on. 
  • assets: This node contains additional information used for form authoring. For example, form model details, localization details, and so on).

Sidekick

Sidekick includes components that you can use to build an adaptive form. You can drag components from onto the adaptive form to add form elements, and configure added element as per the requirements. The following table describes the components listed in the Adaptive Form category in the sidekick.

Component Functionality
Button Adds a button, which you can configure to perform actions, such as save, reset, go next, go previous, and so on
Chart
Adds a chart that you can use in adaptive forms and documents for visual representation of two-dimensional data in repeatable panels and table rows.
Check box Adds a check box
Date picker Adds a calender field to pick a date
Document Fragment Lets you add reusable components of a correspondence.
Document Fragment Group Lets you add group of related document fragments that you can use in a letter template as a single unit.
Drop-down list Adds a drop-down list - single or multi-select
E-sign

Adds a signing area where users can sign the form. It allows you to configure Adobe Document Cloud eSign services or scribble signatures signing services.

For adaptive forms using XDP Form template, the E-sign component shows the original form template associated with the adaptive form.  

Note: Adaptive forms containing E-sign components do not
support anonymous users.

File attachment Adds a button that allows users to browse and attach supporting documents to the form
Image Allows you to insert an image
Numeric box Adds a field for capturing numeric values
Panel Adds a panel or subpanel
Password box Adds a field for capturing a password
Radio button Adds radio buttons
Reset button Adds a button to reset form fields
Scribble signature Adds a field for capturing scribble signatures
Separator Enables visual segregation of panels in your form
Static text Allows you to specify static text
Submit button Adds a submit button to submit the form to the configured submit action.
Summary Adds summary text that authors specify. It shows up after the form is submitted.
Table Adds a table that lets you organize data in rows and columns.
Terms and conditions
Adds a field that authors can use to specify the terms and conditions for users to review before filling the form
Text box   Adds a text box in which a user can specify the required information
Verify

For adaptive forms using XDP Form template, the Verify component renders the form for users to verify the information.

Note: Adaptive forms containing Verify components do not support anonymous users.  

Note:

You can also add a panel component from the parent panel toolbar using the Add Child Panel button. Similarly, one can add a panel-specific toolbar using the Add Toolbar button. This toolbar can be configured to be present at the top or the bottom of the panel using the Edit Panel dialog.

Each component has associated properties that control its appearance and functionality. To configure the properties of a component, right-click the component and click Edit to open the component edit dialog.

A component is identified with its element name. When you click Edit, you can change the name of the component by changing the Element Name field value. 

Note:

The Element Name field accepts letters, numbers, hyphens (-), and underscores (_) only. Other special characters are not allowed, and element name should begin with a letter. 

Sidekick provides other tabs like Page Properties and Workflow. In general, it is recommended not to use other tabs and rely on AEM forms UI for form management capabilities of AEM forms. For example, you must use AEM forms UI to publish forms instead of using the Page Properties tab for publishing.

Previewing a form

You can preview an adaptive form while you are authoring it. It helps you verify how the form will appear to the end user and modify accordingly. To preview a form, click at the bottom of the sidekick. Click to switch back to the edit mode.

Note:

You can preview how your form will render on a variety of devices by selecting an appropriate device from the Devices drop-down list, which appears below the Sidekick when previewing a form.

Preview adaptive forms on different devices

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy