Create and Publish Adaptive Forms with Edge Delivery Services
This document provides step-by-step instructions for creating, configuring, and publishing Adaptive Forms using Edge Delivery Services templates in AEM. It covers the complete workflow from form creation to production deployment.
By the end of this guide, you will learn how to:
- Create forms using Edge Delivery Services templates
- Author forms using Universal Editor
- Configure and publish forms to Edge Delivery Services
- Access published forms and verify deployment
Prerequisites
Ensure the following prerequisites are met before proceeding:
-
AEM Forms as a Cloud Service: An active author instance with a Forms license.
-
GitHub Account: Personal or organizational account for repository management.
-
Repository Setup: Choose one of the following:
- New Project: Create a new AEM project with Adaptive Forms Block. The repository is pre-configured for Edge Delivery Services.
- Existing Project: Add Adaptive Forms Block to an existing repository and update the configuration.
-
AEM-GitHub Connection: Establish a connection between your AEM instance and GitHub repository.
-
Edge Delivery Services: Ensure the repository is configured for automatic deployment.
-
Permissions: Verify you have the necessary access rights for form creation and publishing.
-
Confirm the GitHub repository contains the Adaptive Forms Block.
Form Creation and Publishing Workflow
The process consists of three main phases:
- Phase 1: Form Creation
- Phase 2: Form Authoring and Design
- Phase 3: Configuration and Publishing
Each phase includes validation steps to confirm correct setup.
Step 1: Form Creation
-
Access Form Creation
- Log in to your AEM Forms as a Cloud Service author instance.
- Navigate to ÃÛ¶¹ÊÓÆµ Experience Manager > Forms > Forms & Documents.
- Click Create > Adaptive Forms.
-
Select Template
-
In the Source tab, select an Edge Delivery Services-based template.
-
The Create button becomes enabled.
-
-
Configure Options (Optional)
- Data Source tab: Select data integration if required.
- Submission tab: Choose a submit action (can be configured later).
- Delivery tab: Set publishing/unpublishing schedule.
-
Complete Form Setup
-
Click Create to open the Form Creation wizard.
-
Enter the following:
- Name: Internal identifier (no spaces, use hyphens).
- Title: Display name for your form.
- GitHub URL: Repository URL (e.g.,
https://github.com/your-org/your-repo
).
-
-
Validation
-
After clicking Create, verify:
- The form opens in Universal Editor.
- The GitHub URL is correctly linked.
- The component palette is available.
- The form canvas is visible.
-
Outcome: The form is ready for authoring in the Universal Editor.
Step 2: Form Authoring and Design
-
Access Component Library
- Open the Content browser in Universal Editor.
- Navigate to the Adaptive Form component in the content tree.
-
Add Form Fields
- Click the Add icon to open the component library.
- Select components from the Adaptive Form Components list.
- Drag and drop components onto the form canvas.
-
Design the Form
- Configure field properties in the properties panel.
- Set validation rules and behaviors.
- Adjust styling and layout as needed.
Validation
- All required fields are present.
- Field properties are correctly configured.
- Layout is responsive and accessible.
- Validation rules function as expected.
Next Steps
- Configure submit actions for data handling.
- Universal Editor guide for advanced features.
Step 3: Configuration and Publishing
Configure Edge Delivery Services and publish your form.
Configuration: Automatic (no manual setup required).
- The GitHub repository connection and Edge Delivery Services configuration are created during form creation.
- Publishing endpoints are configured automatically.
Verification:
- Confirm the configuration appears in the form’s settings.
- Ensure the GitHub URL is correctly linked.
Publishing the Form
-
In Universal Editor, click the Publish button (upper-right corner).
-
Confirm publishing success in the dialog.
-
Note the generated URLs for staged and live versions.
Form URLs
Published forms are accessible via Edge Delivery Services URLs.
URL Structure
-
Staged (Preview/Testing):
code language-none https://<branch>--<repo>--<owner>.aem.page/content/forms/af/<form_name>
-
Live (Production):
code language-none https://<branch>--<repo>--<owner>.aem.live/content/forms/af/<form_name>
URL Parameters
<branch>
: GitHub branch name (e.g.,main
,develop
)<repo>
: GitHub repository name (e.g.,my-forms-project
)<owner>
: GitHub organization or username (e.g.,company-name
)<form_name>
: Form identifier as defined in AEM (e.g.,contact-us
)
Example
Example for form contact-us
in repository forms-project
under organization acme-corp
:
- Staged:
https://main--forms-project--acme-corp.aem.page/content/forms/af/contact-us
- Live:
https://main--forms-project--acme-corp.aem.live/content/forms/af/contact-us
Environment Differences
- Staged (.page): Latest changes for testing.
- Live (.live): Published content for production.
Edge Delivery Services form URL structure breakdown
Visual Examples
Edge Delivery Services Template:
- Staged:
- Live:
Troubleshooting
Below are common issues and solutions for AEM Forms with Edge Delivery Services.
Issue: Form URL returns 404 or blank page.
Resolution:
- Remove
.html
extension from URLs. - Verify the form is published.
- Check the GitHub repository for the Adaptive Forms Block.
- Ensure the form name matches the URL (case-sensitive).
Issue: Edge Delivery Services configuration not working.
Resolution:
- Ensure GitHub URL is in
https://github.com/owner/repository
format. - Use the correct branch name in configuration.
- Verify repository access (public or authenticated).
- Check
fstab.yaml
for correct GitHub details.
Issue: Changes not appearing on the live site.
Resolution:
- Wait 2–3 minutes for CDN cache refresh.
- Confirm the publishing workflow completed.
- Test on staged (.page) environment first.
- Ensure the GitHub repository is updated.
Issue: Cannot edit form or components not loading.
Resolution:
- Use a supported browser (Chrome, Firefox, Safari).
- Clear browser cache and cookies.
- Verify network connectivity.
- Confirm author permissions.
Issue: Form submissions not working.
Resolution:
- Configure the submit action in form properties.
- Test submission endpoints manually.
- Check CORS settings if embedding forms.
- Verify required fields are configured.
Issue: Slow form loading or poor performance.
Resolution:
- Optimize images.
- Remove unnecessary components.
- Leverage Edge Delivery Services CDN.
- Minimize custom JavaScript/CSS.
If issues persist:
- Check ÃÛ¶¹ÊÓÆµ Experience Cloud service status.
- Review Edge Delivery Services documentation.
- Visit .
- Contact ÃÛ¶¹ÊÓÆµ Customer Care.
Next Steps
After completing form creation and publishing, consider the following:
- Configure Submit Actions: Set up data handling and integrations.
- Form Data Models: Connect forms to backend data sources.
- Edge Delivery Services Best Practices: Maximize performance.
- Form Analytics: Track form performance and user behavior.