Getting Started with Edge Delivery Services for AEM Forms in Universal Editor - Developer Tutorial

Documentation AEM as a Cloud Service User Guide

Getting Started with Edge Delivery Services for AEM Forms using Universal Editor (WYSIWYG)

Last update: Wed Mar 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Edge Delivery Services

CREATED FOR:

Admin
Developer

Version

Article link

Universal Editor-based Authoring

This article

Document-based Authoring

Click here

This feature is available through the early access program. To request access, send an email from your official address to aem-forms-ea@adobe.com with your GitHub organization name and repository name. For example, if the repository URL is https://github.com/adobe/abc, the organization name is adobe and the repository name is abc.

In today鈥檚 digital age, user-friendly forms are essential for all organizations. Edge Delivery Services Forms are created using the Universal Editor, which offers WYSIWYG (what-you-see-is-what-you-get) capabilities. It provides a modern, intuitive interface for efficient form authoring.

AEM Forms provide a block, known as the Adaptive Forms Block, to help you easily create Edge Delivery Services Forms to capture and store data. You can create a new AEM Project pre-configured with the Adaptive Forms Block or add the Adaptive Forms Block to an existing AEM Project.

Github Repository Workflow {align="center" width="50%"}

This tutorial guides you through creating, previewing, and publishing your own form with a new or existing 蜜豆视频 Experience Manager Site project using Universal Editor鈥檚 WYSIWYG authoring.

Prerequisites

You have a GitHub account, and understand Git basics.
You understand the basics of HTML, CSS, and JavaScript.
You have Node/npm installed for local development.

Create a new AEM project pre-configured with Adaptive Forms Block

The AEM Forms Boilerplate template gets you started quickly with an AEM project pre-configured with the Adaptive Forms Block. It is the quickest and easiest way to follow AEM best practices and jump right into building your forms.

Get started with the AEM Forms boilerplate repository template

Create a GitHub repository for your AEM Project. To create repository:
1. Go to .
2. Click the Use this template option and select the Create a new repository option.
  
  The Create a new repository screen opens.
3. On the Create a new repository screen, select the owner, and specify Repository name . 蜜豆视频 recommends to set the repository to Public. So, select the public option, and click Create Repository.
Install the AEM Code Sync GitHub App on your repository. To install:
1. Go to .
2. On the Install AEM Code Sync screen, select the Only select Repositories option and select your newly created repository. Click Save.
Now link the GitHub repository you created using AEM Forms Boilerplate to your AEM Project authoring environment. To connect:
1. Go to the GitHub repository that you created eariler using AEM Forms Boilerplate.
2. Open the fstab.yaml file for editing.
3. Edit the fstab.yaml file to update the mount point of your project. Replace the URL with the URL of your AEM as a Cloud Service authoring instance.
  https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main
4. Commit the updated fstab.yaml file, once you have updated the reference and everything looks good.
  
  If you encounter any build issues, see Troubleshooting GitHub build issues.

Create a new AEM Project

Now that you have a GitHub project, you can proceed to create and publish a new AEM Project at the AEM as a Cloud Service authoring instance.

To create a new AEM Project:

Login to AEM as a Cloud Service authoring instance and select Sites.
Click Create > Site from template.

Select the Edge Delivery Services Site template and click Next.

select-site-template

note note
NOTE
If the Edge Delivery Services Site template is not available on your authoring instance, click the Import button to upload the template. You can download the Edge Delivery Services Site templates from .

Enter the following details to create a new AEM Project:
- Site title - Add a descriptive title for the site.
- Site title - Use the site-name that you defined in the previous step.
- GitHub URL - Use the URL of the GitHub project you created in the previous step.
The Create Site dialog appears, click Okay.

In just a few minutes, your new AEM Project is created.
Navigate to your newly-created AEM project in the Sites console and click Edit.
In this case, the index.html page is used for illustration.

The AEM Project opens in the Universal Editor in a new tab, enabling WYSIWYG authoring. You can now edit your AEM Project.

Publish your created AEM Project

Once you finish editing your AEM Project, publish it. To publish:

On the Sites console, select all of the AEM Project pages and click Quick Publish.
The Quick Publish confirmation dialog appears, click Publish to start the publishing process.

Alternatively, you can publish your AEM Project pages directly from the Universal Editor user interface.

Congratulations! You have a new website running on https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/.

<branch> refers to the branch of your GitHub repository.
<repository> denotes your GitHub repository.
<owner> refers to username of your GitHub account that hosts your GitHub repository.
<site-name> refers to the name of your created site name.

For example, if the branch name is main, repository is edsforms, owner is wkndforms and the site-name is eds-forms, the website would be up and running at https://main--edsforms--wkndforms.aem.page/content/eds-forms/

note note
NOTE
To view the `index.html` page of the AEM Project, use the URL: `https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/` To view pages other than the `index page` of the AEM Project, use the URL: `https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/<site-page-name>`

Now, you can start creating and adding forms to your AEM Project.

Add Adaptive Forms Block to your existing AEM Project

If you have an existing AEM Project, you can integrate the Adaptive Forms Block into your current project to get started on form creation.

NOTE

This step applies to projects built with the . If you created your AEM Project using the , you can skip this step.

To integrate:

Add required files and folders
1. Copy and paste the following folders and files from the into your AEM Project:
  - folder
  - folder
  - folder
  - file
  - file
Update component definitions and models files
1. Navigate to the ../models/_component-definition.json file in your AEM Project and update it with the changes from the .
2. Navigate to the ../models/_component-models.json file in your AEM Project and update it with the changes from the
Add Form Editor in editor script
1. Navigate to the ../scripts/editor-support.js file in your AEM Project and update it with the changes from the

Update ESLint configuration file

Navigate to the ../.eslintignore file in your AEM Project and add the following line of codes to prevent errors related to the Form Block rule engine:

code language-none
`blocks/form/rules/formula/* blocks/form/rules/model/*`

Commit and push these changes to your AEM Project repository on GitHub.

That鈥檚 it! The Adaptive Forms Block is now part of your AEM Project. You can start creating and adding forms to your AEM Project.

Author Forms using WYSIWYG

You can open your AEM Project in the Universal Editor for WYSIWYG authoring, where you can edit the project and add the Adaptive Form section to include Edge Delivery Services forms on AEM Project pages.

Add the Adaptive Form section to your AEM Project page. To add:
1. Navigate to your AEM project in the Sites console, select the site page you want to edit, and click Edit. The AEM project page opens in Universal Editor for editing.
  In this case, the index.html page is used for illustration.
2. Open the Content tree and navigate to a section where you want to add the Adaptive Form section.
3. Click the Add icon and select the Adaptive Form component from the component list.
The Adaptive Form section is added. You can now begin adding form components to the AEM Project page.

Add form components to the added Adaptive Form section. To add form components:

Navigate to the added Adaptive Form section in the Content tree.
Click the Add icon and add the desired components from the Adaptive Form Components list.

You can also drag and drop the required Adaptive Forms components, as the Universal Editor offers an intuitive drag-and-drop feature.
Select the added Adaptive Form component to update its properties using Properties.

Preview the form.
The screenshot below displays the form authored in the AEM Project using WYSIWYG authoring:

added form

Once satisfied with the preview, the user can proceed to publish the page.

note note
NOTE
It is important to publish your AEM Project page again after making changes; otherwise, the updates are not visible in the browser.

Re-publish the AEM Project page.
1. Click Publish to publish the AEM Project page again after adding the form.
2. The Publish confirmation dialog appears on screen, click Publish to start publishing.
  
  Once you click the Publish button, the Publish started successfully message appears.
You can now view the AEM Project page with the added Edge Delivery Services Form at the following URL:
https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/.

For example, if the branch name is main, the repository is edsforms, the owner is wkndforms, and the site-name is eds-forms, the URL would be:
https://main--edsforms--wkndforms.aem.page/content/eds-forms/

You can style the Edge Delivery Services Forms by editing the .css and .js files in the Adaptive Forms Block and setting up a local AEM development environment to view the changes instantly in your browser.

NOTE

You can also author a standalone form in Universal Editor and publish it to Edge Delivery Services.

Set up local AEM development environment

You can set up a local AEM development environment for developing custom styles and components locally. To be up and running with a local AEM development environment:

Install the AEM CLI: The AEM CLI simplifies development tasks. Let鈥檚 install it globally using npm:

code language-bash
`npm install -g @adobe/aem-cli`

Clone your GitHub project: Clone your AEM Project repository from GitHub using the following command, replacing with the repository owner and with the repository name:

code language-none
`git clone https://github.com/<owner>/<repo>`

Start Your Local Environment: Navigate to your project directory and start your local AEM instance with a single command:

code language-none
`cd <repo> aem up`

You can make local changes in the Adaptive Forms Block blocks/form folder for styling and coding for your forms! Edit the .css or .js files within this directory, and you can see that the changes reflected instantly in your browser.

Once you have completed your changes, use Git commands to commit and push them. This updates your preview and production environments, accessible at the following URLs (replace placeholders with your project details):

Preview: https://<branch>--<repo>--<owner>.aem.page/content/<site-name>

Production: https://<branch>--<repo>--<owner>.aem.live/content/<site-name>

Troubleshooting GitHub build issues

Ensure a smooth GitHub build process by addressing potential issues:

Handle Linting Errors:
Should you come across any linting errors, you can bypass them. Open the [EDS Project]/package.json file and modify the 鈥渓int鈥� script from "lint": "npm run lint:js && npm run lint:css" to "lint": "echo 'skipping linting for now'". Save the file and commit the changes to your GitHub project.
Resolve Module Path Error:
If you encounter the error "Unable to resolve path to module 鈥溾€樷€�/鈥�/scripts/lib-franklin.js鈥欌€�, navigate to the [EDS Project]/blocks/forms/form.js file. Update the import statement by replacing the lib-franklin.js file with the aem.js file.

蜜豆视频