AEM Forms Basics Step-by-Step Tutorial with MySQL

Forms have evolved from printed versions that required pen and paper to digital forms that customers can complete on their desktops, tablets, or smartphones. Like other digital interactions today, customers expect an integrated and user-friendly experience that doesn’t require navigating to another website to complete a form.

Adobe Experience Manager (AEM) Forms allows businesses to accomplish this by integrating a user-friendly experience into a company’s main website. The platform includes a user-friendly (WYSIWYG) interface for content authors to create, maintain, publish, and update digital forms while integrating back-end processes, business rules, and third-party data sources. Content teams can also leverage AEM’s content flow management, security, correspondence management, and integrated analytics capabilities.

Configuring a Form Data Model and creating an AEM Form out of it is generally straightforward. However, visual interfaces have changed as AEM has evolved, and some services have been replaced. Consequently, much of the information explaining how to create an AEM Form and configure the Data Model has become outdated.

This step-by-step tutorial provides an up-to-date document AEM users can use to create forms.

Prerequisites

• A functioning AEM local environment.

• An Adobe account that allows you to download software packages from Adobe.

• Basic AEM Development Knowledge, including:

  • Authoring with Core Components

  • Templates and how to edit them

  • Package manager usage

  • Felix console usage

Software Versions

Important Note: This tutorial is based on:

• Adobe Experience Manager (AEM) version 2024.8.17569.20240822T203847Z

• Adobe AEM Forms version 2024.9.8.00

Basic Concepts

This tutorial provides a hands-on example explaining, step by step, how to create a basic AEM Form connected to a local MySQL database.

For essential reference about what AEM Forms are, what they are used for, and specific scenarios, check the complete Adobe official documentation at:

• Introduction to AEM Forms as a Cloud Service

• Adaptive Forms Core Components

A) Set Up AEM Forms Environment

Set up the required AEM Forms packages: The AEM Forms Add-On and AEM Forms Reference Content.

1. Installing AEM Forms Add-On

1. Download the latest package (aem-forms-addon-sdk-2024.09.08.00-240900.zip) from https://experience.adobe.com

   

2. Navigate to the folder where you downloaded the AEM Forms Add-On and extract the content.

3. Copy the .far file to the [aem-author-install- path]/crx-quickstart/install folder.

   

   Note: create the /install folder if it does not exist yet.

4. Restart the AEM author instance now AEM Forms should appear as an available option:

   

2. Installing AEM Forms Reference Content

1. Download the latest package (aem-forms-reference-content.ui.content-2.1.0.zip) from Adobe.

   

2. Navigate to the AEM PackageManager, upload, and install the AEM Forms Reference Content package.

   

B) Set Up a MySQL Database

1. Install MySQL RDBS

Download MySQL RDBS from MySQL Downloads and install it (choose a root password you can remember)

1. Note: Usually, the full MySQL installation bundle is downloaded. Extract its contents, find the MySQL installer, and run it (on Mac, for example, it's the mysql-commercial-9.0.1-macos14-arm64.dmg file).

2. Note: On mac, it’s required to add the MySQL installation folder to the PATH environment variable.

   1. Locate where MySQL is installed (usually under /usr/local folder) and copy the full path to the bin directory (for example, /usr/local/mysql-commercial-9.0.1-macos14-arm64/bin)

   2. Open ~/.zprofile file in a text editor, search for the last definition of PATH variable (last export PATH line) and add the MySQL bin folder path to your PATH variable. Use the following lines as an example:

      export MYSQL_PATH='PATH_TO_MYSQL_BIN_FOLDER'
        export PATH=$MYSQL_PATH:$PATH
        

   3. Close the Terminal application, restart it, and type: mysql -u root -p and enter the root password. If you set up MySQL correctly, you should be able to see the MySQL prompt like this:

      

2. Install MySQL Workbench

Download MySQL Workbench from MySQL Workbench Downloads and install it. It will provide a handy WYSIWYG interface to work with MySQL.

Notes:

1. If prompted, just ignore the “Unsupported Operating System” warning.

2. When you open the MySQL Workbench app, it should automatically identify the MySQL instance installed at the 3306 port. Click on it.

   

3. Create a CONTACT_US_FORMS table:

   Create a database and table to store the Contact Us Form information using MySQL Workbench:

   

   NOTE: Copy this script and execute it (click on the first thunder icon to execute all instructions or the second thunder icon to execute one by one).

   create database CONTACT_US_DB;
       show databases;
       USE  CONTACT_US_DB;
       
       CREATE TABLE IF NOT EXISTS CONTACT_US_FORMS(
       	form_id INT AUTO_INCREMENT PRIMARY KEY,
           form_date DATETIME DEFAULT now(),
           client_name VARCHAR(255) NOT NULL,
           client_last_name VARCHAR(255) NOT NULL,
           client_email VARCHAR(255),
           client_message VARCHAR(3072)
           );
       

4. INSERT INTO CONTACT_US_FORMS(client_name, client_last_name, client_email, client_message) VALUES ('Client Name,' 'Client Last Name,' 'client@email.com,' 'I need to be contacted per...');

C) Connect AEM and MySQL using a JDBC

1. Install MySql Driver in AEM:

1. Find the MySql Driver - Oracle Corporation's JDBC and XDevAPI Driver for MySQL from MvnRepository.

   

2. It can be added as a maven dependency to an AEM project (pom file) or installed directly as a Bundle in AEM. We’ll install it as a bundle to avoid creating a new project. Click on the link to download the jar.

3. Navigate to Sling Bundles and add the:

   

2. Create a Database connection using Day Commons JDBC Connections Pool:

1. Go to Felix OSGi Configurations in AEM author.

2. Search for “Day Commons JDBC Connections Pool” and add a new configuration for the new database CONTACT_US_DB.

   

New JDBC Connection configuration

Note: Most tutorials say to use the old Apache Sling Connection Pooled Datasource, but it has been deprecated.

D) Create a Configurations Folder

Using the configuration browser, create a configuration folder that allows the creation of Editable templates (select the "Editable templates" checkbox).

E) Create a Forms Data Model with Services

1. Navigate to Forms

   

2. Data Integrations

   

3. Click on Create → Form Data Model

   

4. Add the new Form Data Model information and select the previously created Configuration.

   

5. Select the JDBC connection.

   

6. Select all table attributes and services and click on “Add Selected.”

   

7. The model will appear. Do not try to save the model at this point.

   

   If you click Save, you’ll see errors and warnings because services still need to be configured.

   

8. Configure Services.

   Click on the “Services” tab and select the first service: Get and click on “Edit Properties.”

   

   1. Configure Get Service:

      1. Add a title

      2. Add a description

      3. Select the Model Object (this comes from the Data Source that has been configured for this Data Model)

      4. Keep the arguments to only FORM_IDKeep the arguments to only FORM_ID

      5. Click done

         

      6. Now, the get service appears configured in the data source services.

         

   2. Configure Insert and Update services:

      

      

   3. Click on Save:

      

   4. Define Read and Write Services:

      

      1. Check the Data Model

      2. Select Edit Properties

      3. Add a Title

      4. Configure the Read Service to use the get service, binding to a literal and the form_id

      5. Configure the Write Service to use the insert service

      6. Click done

      7. Click Save

      8. No more warnings should appear

9. Test Data Model Services:

   1. Test Get Data Service:

      1. Select the Get service and click on “Test Service.”

         

      2. In the Input field, use an existing form_id, like “1”, click on “test,” and check that the correct values are retrieved

         

   2. Test Insert Data Service:

      1. Select Insert Service, and the editor will auto-populate a valid JSON payload with dummy data.”

         

      2. Remove the two auto-generated fields from it, fill it with valid data, and click on “Test.”

         

      3. Check the MySQL Workbench to see if the entry was inserted in the CONTACT_US_FORMS table.

         

   3. Test Insert Data Service:

      As an exercise, test the Update Service, following steps similar to the ones you did for insert.

Note: you can also edit the Sample data by clicking on “Edit Sample Data”.

F) Create a Form Template

An Adaptive Form template is a specialized AEM Page Template, following the concept of reusable pieces of content + structure of regular static Page templates, but for Forms. It makes it possible to define a reusable structure and visual design for all forms in the site, like a common header and footer with their corresponding images and styles, allowing consistent branding across the site.

1. Go to Tools → Templates

   

2. Select the Configuration Folder for Contact Us

   

3. Create the Template inside the Configuration Folder

   

4. Select the “Adaptive Form Template” and click Next.

   

5. Enter the Template Information and click Open in the Success popup.

   

   
   

6. The Template Content Editor is shown:

   

7. Add Template Structure:

   1. Select Structure mode to add structural elements:

      

   2. Add a Header

      1. Search for the Header component, and drag and drop it into the upper container.

         

      2. Edit the header image (select any available image) and remember to click the check to apply the changes.

         

      3. Edit the Header text and remember to click the check to apply the changes.

         

   3. Add a Footer

      1. Search for the Footer component, and drag and drop it into the lower container.

         

      2. Edit the Footer, add any text, and remember to click the check to apply the changes.

         

   4. Add a Title

      1. Search for the Title General component, and drag and drop it into the upper container.

         

      2. Edit the Title text.

         

      3. Switch back to “Initial Content,” and the template should look something like this:

         

8. Set the Data Model in the Template:

   1. Select the Adaptive Form Container

   2. Click on Configure

   3. Open the Data Model section

   4. Select the Form Data Model created for the Contact Us form

   5. Click to save changes

      

      Important Notice: This step allows you to create Adaptive Forms with a set of form fields automatically mapped to the Contact Us Table fields defined in the Form Data Model when using this form template. This saves a lot of time in manual configurations for each form field.

9. Enable the Template for Contact Us:

   Close the editor window, return to Templates inside the configuration folder, select the Contact Us template, and click Enable.

   

10. Final consideration: Adaptive Template Forms are a special type of regular static AEM Page Templates, which means forms created using a template do not reflect any further changes to the original template after the form creation time.

G) Create an Adaptive Form using a Data Model

1. Go to Forms → Forms & Documents

   

2. Click on Create → Adaptive Form

   

3. On the Source tab, click on the Configuration folder created for Contact Us and select the Contact Us Form Template.

   

4. On the Style tab, select any visual form Style.

   

5. On the Data tab, select the Contact Us Data Model and click Create.

   

6. Enter the Adaptive Form name and select Create.

   

7. The Form editor will show the newly created Contact Us Adaptive Form containing all the fields of the Data Model:

   

8. Add a Submit Button at the end of the Adaptive Form.

   

9. Click Configure and Set the Data Model Bind Reference to the Contact US Table

   

10. Set the Adaptive Form container submission to use the Contact Us Data Model

    

    1. Select the Adaptive form container and click Configure.

    2. Select Submission tab.

    3. Set the action to Submit using the Form Data Model.

    4. Select the Contact Us data model.

    5. Click Check to save the changes.

11. Click on Preview and test the form submission:

    Enter some data in the form and click submit:

    

12. In real life, the Form ID and Date are automatically populated by MySQL, so delete both fields and test the submission again:

    

H) Updating an Adaptive Form to Reflect Changes in the Database

With time, more information might be required from the client, requiring updates in the data repository (MySQL database, in this case) to be reflected in the AEM Form.

Let’s say the company wants the client to specify if he wants to be contacted by email to follow up or to avoid contacting a client who doesn’t want to be contacted. A new field, client_request_contact, must be added to the database and the AEM Form. Let’s look at how that can be achieved using the current Data Model.

1. Add the new data field to the Database:

   1. Execute the following SQL script in MySQLWorkbench to add the new field

      USE CONTACT_US_DB;
      ALTER TABLE CONTACT_US_FORMS ADD COLUMN client_request_contact BOOLEAN;
            

   2. Click on the “refresh” button to update the table view and check the new field has been created

      

2. Update the Data Model to reflect changes done in the Database:

   1. Navigate to the Contact Us DataModel, click on the Refresh button at the top, and click Refresh again in the popup.

      

   2. The new field will appear in the Datasource. Select it, and click Add Selected.

      

   3. The new field now appears in the Data Model. Click save to preserve the changes.

      

3. Update the Adaptive Form with the new field.

   1. Navigate to your Contact Us Adaptive Form, select the DataSources left menu, and find the new available field.

      

   2. Drag and drop the field into the Adaptive Form, click on Configure, verify the form field is associated with the newly created database field, and click “Done.”

      

      Note: The Form field has been created as a switch to accommodate the field type(boolean).

4. Test submission

   1. Click on “Preview,” enter some test data and click submit.

      

   2. Go to MySQLWorkbench and verify the new entry has been registered

      

      Note: The other previous records in the database now have a null in the newly created column/field, as they did not have any prior value.

Conclusion

AEM Forms allows you to create web forms while reducing development time. Although straightforward, setting up forms involves different steps that require execution in a specific order. Once that is clear and the basic configuration is set up by a developer, creating an AEM Form becomes easy for any AEM Author user to perform by themselves.

If you want to create engaging, dynamic forms that enhance user experience and drive higher conversion rates, you need a partner who understands Adobe products, including AEM Forms. Oshyn is an Adobe partner that helps companies generate engaging experiences while leveraging solutions like AEM with AEM Forms. This allows employees to own the company websites, empowering them to author the content themselves and create innovative interactions with end users. Contact us to see how we can help with your AEM needs.

References for Future Reading

• Introduction to AEM Forms as a Cloud Service

• Adaptive Forms Core Components

• Medium.com - Setup-aem-form-on-aem-as-a-cloud-service

• AEM Forms #8 | Bind Form data model with Adaptive Form to submit form