Documentation AEM as a Cloud Service User Guide

Create an Adaptive Form template

Last update: January 29, 2025

Applies to:
Experience Manager as a Cloud Service

CREATED FOR:

User
Developer
Admin

NOTE

Adobe recommends using the modern and extensible data capture Core Components for creating new Adaptive Forms or 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	Click here
AEM as a Cloud Service	This article

When you author a form, you add fields and components to define form structure, content, and actions in the editor. You add fields and components in the guideRootPanel of the form container. With Template Editor, you can create a template that contains basic structure and initial content that authors can use to create forms.

For example, you want all form authors to have certain text boxes, navigation buttons, and a submit button in an enrollment form. You can create a template with the components that authors can use to create a form that is consistent with other enrollment forms. When authors use the template to create an Adaptive Form, the new form inherits the structure and components you have specified in the template. Template Editor lets you:

Add header and footer components of a form in the structure layer.
Provide the initial content for the form.
Specify a theme, Submit Actions.

You can download and install AEM Forms reference content package from Software Distribution portal to import reference themes and templates to your environment.

Working with templates

You can access template editor from the Tools menu by navigating to Adobe Experience Manager > Tools > General > Templates. Here, the templates are organized in folders enabled for editable templates.

Experience Manager provides a global folder to organize templates. However, it is not enabled by default. You can request your Administrator to enable the global folder or create a folder for templates. For more information on how to create folders, see Template Folders.

Creating a template

After you have created a folder, open the folder and perform the following steps to create a template:

Select Create inside the folder you have created.
In the Pick a Template Type section, select Adaptive Form template and select Next.
In the Template Details section, provide a Template Title and select Create.
You can also provide a description.
Select Done to return to the console, or select Open to open the template in the editor.

Template editor UI

When you open a template for editing, you can see the following AEM Editor components:

Page toolbar
Contains the following options:
- Toggle Side Panel: Lets you show or hide the sidebar.
- Page Information: Lets you specify information such as the publish/unpublish time, thumbnails, client-side libraries, page policy, and page design client-side library.
- Mode selector: Lets you change the mode.You can choose Structure mode, Initial Content, Layout Control mode. Structure mode lets you add and customize the header and footer. Initial Content mode lets you customize the form content.
- Preview: Lets you preview how the template looks when you publish it. You can use Layer Selector and Preview to toggle editing and preview modes.
Sidebar: Provides the Content, Properties, Assets, and Components browsers.
Component toolbar: When you select a component, you see a toolbar that lets you customize the component.
Page: The area where you add content to create the template.

Editing a template

An Adaptive Form template is created using two layers:

Structure
Initial Content

The layer selector is available beside the Preview option in the upper-right corner of the screen.

Structure

When you select the structure layer in the Template Editor, you can see the layout containers above and below the Adaptive Form Container. Authors can use these layout containers for header and footer. You can add, edit, or customize the header and footer. Drag-drop the Adaptive Form Header component in the layout container above the Adaptive Form Container to customize the template header. Drag-drop the Adaptive Form Footer component in the layout container below the Adaptive Form Container to customize the template footer.

Layout container in the structure layer

Layout containers in the structure layer

A. Layout container for Header component B. Layout container for Footer component

Drag-drop the Adaptive Form Header component in the layout container above the Adaptive Form Container. After you add the component, you can specify its properties that let you add a logo and provide its title.

Similarly, when you drag-drop the footer component in the layout container below the Adaptive Form Container, you can provide the copyright information and company details.

Header and footer added in the Structure layer

Locking/unlocking components in the structure layer

When you edit the template with structure layer selected, you can unlock the header and footer of the template. If a component is unlocked in the template, form authors can edit the component in the Adaptive Form that uses the template. Locking a component prevents form authors from editing it in the Adaptive Form. Lock option is available in the component toolbar.

For example, you add the header component in the template. When you select the component, you can see a lock option in the component toolbar. Typically, header includes company name and logo, and you do not want form authors to change the logo and header in a template. In an Adaptive Form created using the template with the header component locked, form authors cannot change the logo and company name.

NOTE

Locking or unlocking image or logo in the header component, individually, is not recommended. You can unlock the header component.

Initial Content

When the Initial Content option is selected, the Adaptive Form Container of the template opens like an Adaptive Form for editing. Like authoring an Adaptive Form, you can specify initial settings, such as selecting a theme and Submit Actions.

Form authors use it as a base to create a form. Content flow structure is specified in the Initial Content layer of the template. To switch to editing initial content of the form template, before Preview in the page toolbar, select > Initial Content.

In the Initial Content layer, you create the Adaptive Form template that your authors use as a base. Authoring a template is similar to authoring a form, you use options available in the Sidebar. Sidebar provides content, properties, assets, and components browsers.

NOTE

When you select Store content or StorePDF as the Submit Action, you get an option to specify the Storage path. If you specify path in template, then all forms created from it have the same path. You can specify the correct storage path, or ensure form authors to update it to prevent data from every form getting stored at same location.

Creating an Adaptive Form template with tabs and panels

For example, you want to create a template with the following tabs:

General Information
Professional Information

You have added a logo, provided a title, and added a footer in the structure layer. Lock the header and footer to stop form authors from editing them when they use the template to create forms.

Change the layer from Structure to Initial Content, and start adding content to the form. To create a tabbed structure, add a child Panel in the guideRootPanel of the Adaptive Form container. To add a panel:

You can add a panel by tapping the + button when you select the Drag components here option.
You can drag-drop the panel component from the components browser in the sidebar.
You can add child panel of the guideRootPanel from the component toolbar.

To create the General Information and Professional Information tabs, add two panels in the child panel of the guideRootPanel. Select the panels and select to open the properties in the sidebar. Change the element names as general-info and professional-info, and titles as General Information and Professional Information respectively. In the sidebar, select content to open the content browser. In the Form Objects tab, select guideRootPanel. In the editor, the guideRootPanel is selected. Select in the component toolbar to open its properties. In the Panel Layout field, select Tabs on Top and select Done. The tabbed template structure is applied.

Adding content in tabs

After you add panels and structure them as tabs, you can add fields inside the tabs. When you select a tab in the editor, you can see the Drag components here option. You can drag-drop components such as text-boxes, list items, and buttons. You can drag-drop components from the components browser in the sidebar.

Each component has properties that enhance data capturing and manipulation. For example, you can enable the Required field property of a component. Your authors can specify a message that your customers see when they skip filling a required field. Specify the message in Required Field Message property.

In the example template, Name, Phone number, and Date of birth fields are added in the General Information tab. In the Professional Information tab, Currently employed, employment type, Educational qualification fields are added.

After you have added fields, you can add buttons such as Submit and Reset.

Enabling the template

When you create a template, it is added as a draft. Enable the template to use it for creating Adaptive Forms. To enable a template:

Navigate to Adobe Experience Manager > Tools > Templates, and open the folder in which you have created the template.
The template you have created is marked as Draft.
Select the template and select Enable in the toolbar.
When you create an Adaptive Form, you can see the template listed when you are asked to choose a template.

Importing or exporting a template

A form works with its template. When you download an Adaptive Form created using a customized template, the template is not downloaded. When you import the form on a different AEM Forms instance, it is imported without its template. If a form is imported but its template is not available, the form is not rendered. You can package the custom template from /conf node in https://<server>:<port>/crx/packmgr, and port it in the AEM Forms instance where you want to upload the form. You can also Create a template using AEM Archeype and deploy it to your Cloud Services instance.

NOTE

You can also configure the Document of Record template directly from the Adaptive Form editor or Adaptive Form template editor. For more information, see Generate Document of Record for Adaptive Forms.

Associate a Form Data Model Schema to a template

Authors can associate a Form Data Model Schema to an Adaptive Form template in the template editor. It allows authors to select a schema from the template editor. When you associate a schema to a template and a form author creates a form based on the template, the schema is pre-selected for the form. It helps forms authors regulate the use of schema and saves time for forms author also. To select a form data model schema in template editor:

Select Content Browser located on the left hand side.
Go to the form container Setting.
Select Data Model.
Choose your form data model through Select Form Data Model and save the configuration.

Form-Data-Model-Association-in-Forms

Creating an Adaptive Form using the template

After you create and enable a template, it is available in the forms manager when you create an Adaptive Form. To use a template and create an Adaptive Form, see Creating an Adaptive Form.

Save an Adaptive Form as a template

You can also save an Adaptive Form as a template for future use. To save a Adaptive Form as a template:

Select an Adaptive Form to save it as a template.
Click Save as Template. A dialog box appears.
Specify Title (mandatory field), Location (mandatory field) and Description (optional field) for the template.
Click Create.

NOTE

To use the same container policy as of the source Adaptive Form, it is recommended to save the template in the same folder as of the source Adaptive Form. In case, the template is saved in any other folder, than the created template uses a default container policy.

Recommendations

When you modify properties of the form in template editor, do not use the BindReference property.
If you want to add a breakpoint, create it when you author an Adaptive Form template.
For more information on breakpoints, see Responsive Layout.

Create an Adaptive Form template

Working with templates

Creating a template

Template editor UI

Editing a template

Structure

Locking/unlocking components in the structure layer

Initial Content

Creating an Adaptive Form template with tabs and panels

Adding content in tabs

Enabling the template

Importing or exporting a template

Associate a Form Data Model Schema to a template

Creating an Adaptive Form using the template

Save an Adaptive Form as a template

Recommendations

See Also