Introduction to authoring adaptive forms

Overview

Adaptive forms allow you to create forms that are engaging, responsive, dynamic, and adaptive. AEM Forms provides an intuitive user interface and out-of-the-box components for creating and working with adaptive forms. You can choose to create an adaptive form based on a form model or schema or without a form model. It is important to carefully choose the form model that not only suits your requirements but extends your existing infrastructural investments and assets. You get to choose from the following options to create an adaptive form:

  • Using a form data model
    Data integration lets you integrate entities and services from disparate data sources in to a form data model that you can use to create adaptive forms. Choose form data model if the adaptive form you are creating involves fetching and write data from and to multiple data source.

  • Using an XDP Form Template
    It is an ideal form model if you have investments in XFA-based or XDP forms. It provides a direct way to convert your XFA-based forms into adaptive forms. Any existing XFA rules are retained in the associated adaptive forms. The resulting adaptive forms support XFA constructs, such as validations, events, properties, and patterns.

  • Using an XML Schema Definition (XSD) or a JSON Schema
    XML and JSON schemas represent the structure in which data is produced or consumed by the back-end system in your organization. You can associate the schema to an adaptive form and use its elements to add dynamic content to the adaptive form. The elements of the schema will be available for use in the Data Model Objects tab of the Content browser when authoring adaptive forms.

  • Using none or without a form model
    Adaptive forms created with this option don’t use any form model. The data XML generated from such forms has flat structure with fields and corresponding values.

For more information about creating an adaptive form, see Creating an adaptive form.

Adaptive form authoring UI

The touch-optimized UI for authoring adaptive forms is intuitive, and provides:

  • Drag-and-drop functionality
  • Standard form components
  • Integrated repository for assets

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

Adaptive form authoring UI

A. Sidebar B. Page toolbar C. Adaptive form page

The Sidebar allows you to

  • See form content such as panels, components, fields, and layout.
  • Edit component properties.
  • Search, view, and use assets in your AEM Digital Asset Management (DAM) repository.
  • Add components on your form.

Sidebar

A. Content browser B. Properties browser C. Assets browser D. Components browser

The sidebar comprises the following browsers:

  • Content browser
    In the content browser, you can see

    • Form Objects
      Shows object hierarchy of the Form. Author can navigate to specific form component by tapping that element in Form Object Tree. Author can search objects and rearrange them from this tree.

    • Data Model Objects
      Lets you see the form model hierarchy.
      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. You can see data model objects when your form uses XML schema, JSON schema, or XDP template.

  • Properties browser

    Lets you edit the properties of a component. Properties change according to a component. To see properties of the adaptive form container:

    Select a component, then tap field-level > Adaptive Form Container, and then tap cmppr.

  • Assets browser

    Segregates different types content such as images, documents, pages, movies, and so on.

  • Components browser

    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 components browser.

Component Functionality
Adobe Sign Block Adds a block of text with placeholders for fields to be filled while signing using Adobe Sign.
Button Adds a button, which you can configure to perform actions, such as save, reset, go next, go previous, and so on.
Captcha Adds CAPTCHA validation using Google reCAPTCHA service. For details, see Using CAPTCHA in adaptive forms.
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 Input Field Use Date Input Field component in your form, to let customers fill day, month, and year separately in three boxes. You can customize the look and feel of the component, and change the date format. For example, you can let your customers input dates in MM/DD/YYYY or DD/MM/YYYY format.
Date picker Adds a calendar 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
Email

Adds a field to capture email address. The Email component, by default, validates email addresses using the following regular expression.

^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$
File attachment

Adds a button that allows users to browse and attach supporting documents to a form. You can attach multiple files to a File attachment component. You can also specify the **Maximum File Size** and **Supported File Types** for the attachments in the properties browser of the component.

Note:

  • The component does not support attaching files with filename starting with characters (.), containing characters \ / : * ? " < > | ; % $, or containing special filenames reserved for Windows operating system like nul, prn, con, lpt, or com.
  • To attach multiple files to a file attachment component opened in Apple Safari browser, select and attach files one by one. You cannot select and attach multiple files at once.
  • The File Attachment component supports a pre-defined set of file formats in adaptive forms enabled for Adobe Sign. For more information, see Supported file formats.

File attachment listing Adds a field that lists all the attachments uploaded using the File Attachment component.
Header
 Adds the page header that typically includes logo of a corporation, title of the form, and summary.
Footer Adds the page footer that typically includes copyright information, and links to other pages.
Image Allows you to insert an image.
Image Choice Lets your customers select an image to provide information. You can use the information to provide personalized services to your customers.
Next Button Adds a button to navigate to the next panel in a form.
Numeric box Adds a field for capturing numeric values
Numeric Stepper Use Numeric Stepper in your form to let your customers input a numeric value, which they can increase or decrease based on a predefined step.
Panel

Adds a panel or subpanel.

You can also add a panel component from the parent panel toolbar using the Add Child Panel button. Similarly, you can add a panel-specific toolbar using the Add Panel Toolbar button. You can configure the position of the panel toolbar using the Edit Panel dialog.
Password box Adds a field for capturing a password.
Previous button Adds a button that users require to go back to the previous page or panel.
Radio button Adds radio buttons.
Reset button Adds a button to reset form fields.
Save Button Adds a button to save form data.
Scribble signature Adds a field for capturing scribble signatures.
Separator Enables visual segregation of panels in your form.
Signature Step Displays the information provided in the form and the signature fields for the user to verify and sign the form.
Text Allows you to specify static text.
Submit Button Adds a submit button to submit the form to the configured submit action.
Summary Step Submits the form and displays summary text that authors specifies after the form is submitted.
Switch Adds a switch that performs a toggle or enable/disable action. You cannot add more than two options in the Switch component. Since a switch can have only two values: On or Off, mandatory is not applicable. At-least one value is saved irrespective of the user input.
Table Adds a table that lets you organize data in rows and columns.
Telephone

Adds a field to capture telephone number. The Telephone component allows authors to configure one of following phone number types. Each type is associated with a default regular expression for validation.

  • Type International is validated by ^[+][0-9]{0,14}$.
  • Type USPhoneNumber is validated by {'+1 ('999') '999-9999}.
  • Type UKPhoneNumber is validated by text{'+'99 999 999 9999}.
  • Type Custom does not provide a default validation pattern. It takes the value of the last selected phone number type. You can also specify your own custom validation pattern.
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.

By default, the Text Box component accepts only plain text. You can enable a Text Box component to accept Rich Text. A Rich Text enabled text component provide options to add headers, change character styles (bold, italicize, underline the characters), create ordered and unordered lists, change text background and text color, and add hyperlinks. To enable rich text for a text box, enable the Allow Rich Text option in the component properties.
Title Specifies a title for the adaptive form.
Verify Step

Adds a placeholder to display the filled form for verification by user.

Note: Adaptive form containing the Verify component does not support anonymous users. Also, it is not recommended to use the Verify component in an adaptive form fragment.

Best practices for working with components

Some best practices and key points to remember when working with adaptive form components are as follows:

  • Each component has associated properties that control its appearance and functionality. To configure the properties of a component, tap the component and tap cmppr to open the component properties in the Properties browser.

  • A component is identified with its element name. When you tap cmppr, you can change the name of the component by changing the Element Name field value in the properties browser. 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.

  • You can modify the Title property of an adaptive form component inline in the form editor without opening the Properties browser as long as the title is visible on the form. To do so:

    1. Tap to select a component that has a Title property and whose Hide title property is disabled.

    2. Tap aem_6_3_edit to make the title editable.

    3. Modify the title and tap the Return key or tap anywhere outside the component to save the changes. Tap the Esc key to discard the changes.

  • Some adaptive form components like Email and Telephone include out-of-the-box validation patterns. However, you can specify custom validation by updating the Validation Pattern field under the Patterns accordion in the component properties. See component descriptions in the table above for more information about default validations.

  • Adaptive forms fields, such as Numeric Box and Email can be configured to include specialized HTML5 input types. When these fields are in focus on mobile devices and tablets, the keypad displays specific alphabet, numbers, and characters upfront that are commonly used to input information in the fields. It helps users enter information quickly without having to toggle between characters sets on the keypad. To allow specialized input for a component, enable the Use HTML Type Number check box in its component properties.

  • You can enable a Text Box component to accept Rich Text. To enable rich text for a text box, enable the Allow Rich Text check box in the component properties.

  • You can enable Text Box, Email, and Telephone components to autofill values for fields like name, address, credit card, telephone, and email from the information stored in browser’s autofill settings. To enable this feature, select Enable Autofill in the component properties and select an Autofill Attribute. When a user fills an adaptive form, the values are suggested from the autofill profile in the browser or based on the values earlier filled by the user. Note that autofill works if autofill settings in user’s browser are turned on.

  • Specify values for Radio Button and Check Box items in {value}={text} format in component properties.

  • The File attachment component, by default, allows a user to attach only one file. However, you can configure the component properties to support multiple attachments. In addition, if a user attaches multiple files with the same filename, the attachments can cause some issues. Therefore, it is recommended to associate a unique identifier for each submitted attachment at form submission. To do so:

    1. On your AEM Forms server, navigate to Adobe Experience Manager > Tools > Operations > Web Console.
    2. Find and tap Adaptive Forms Configuration Service.
    3. In the Adaptive Forms Configuration Service dialog, enable Make File Names Unique. By default, it is disabled.

  • To enable users to attach a PDF using Safari browser, ensure that application/pdf is added to the Supported File Types property of the File attachment component. Adaptive forms created with previous AEM Forms version may contain .pdf instead of application/pdf in the Supported File Types property.

For more best practices around adaptive forms, see Best practices for working with adaptive forms.

NOTE

Adaptive form components do not support right to left (RTL) languages. For example, Hebrew.

Page toolbar

The page toolbar on the top provides options that let you preview the form, change form properties, and edit form layout. You can preview the form when you author it, and make changes accordingly. In the page toolbar, you see:

  • Toggle Side Panel toggle-side-panel: Lets you show or hide Sidebar.

  • Page information theme-options: Lets you view page properties, publish/unpublish a form, start a form workflow, and open the form in classic UI.

  • Emulator ruler: Lets you emulate the look of your form for different display sizes such as tablets and phones.

  • Edit: Lets you select other modes such as: Edit, Style, Developer, and Design.

    • Edit: Lets you edit the properties of the form and its components. For example, adding a component, dropping an image, and specifying mandatory fields.

    • Style: Lets you style the appearance of components of your form. For example, in style mode, you can select a panel and specify its background color.

    • Developer: Lets a developer to:

      • Discover what forms are composed of.
      • Debug what is happening where and when, which in turn helps to resolve issues.

    • Design. Lets you enable or disable custom components, or out-of-the-box components that are not listed in the Sidebar.

  • Preview: Lets you preview how the form looks when you publish it.

Component toolbar

Component toolbar in the touch UI

When you select a component, you see a toolbar that lets you work it. You get options to cut, paste, move, and specify properties of the components. Your options are:

A.Configure: When you tap Configure, component properties are visible in the sidebar. Configuring these properties let you customize the data capturing experience. You can change the element name of the component, specify the label text in the Title field of the component. Element name lets you capture values users enter using the component. In the component properties, you specify the behavior of the component, and manage user input. Configure properties in the sidebar to capture user data and use it for further processing. Properties for adaptive form container let you specify Client libraries, Layouts, Themes, Document of Record settings, save settings, submission settings, and metadata settings.

B.Copy: You can use the copy option to copy a component and paste it in other places in the form. When you paste a component, the pasted component gets a new element name but retains the properties of the copied component.

C.Cut: You can use the cut option to move a component from one place to another in the adaptive form.

D. Delete: Lets you delete the component from the form.

E. Insert: Lets you insert a component above the selected component.

F. Paste: Lets you paste the component you cut or copied using the options described above.

G. Edit rules: Lets you open the rule editor. For more information, see Rule Editor.

H. Group: Lets you select multiple components if you want to cut, copy, or paste more than one component together.

I. Parent: Lets you select the parent of a component. For example, a text field lies within a sub-section, which resides in a section. The section resides in the guide root panel, and the adaptive form container is the parent of a guide root panel. For a component, you can see all the options with the hierarchy sorted bottoms-up.

For example, if you tap Parent for a text box, you can see:

  • Sub-section
  • Section
  • guideRootPanel
  • Adaptive Form container

J. Others: Provides more options to work with the selected component.

  • View SOM expression
  • Save a panel as fragment (for panels only)
  • Add child panel (for panels only)
  • Add panel toolbar (for panels only)
  • Replace (not for panels)

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

Business.Adobe.com resources

Docs links
Cms Cloud Content Intelligence Responsive Forms Document Generation Content Management Headless Cms

On this page