Publish your Adaptive Form to Edge Delivery Services
This feature is available through the early access program. To request access, send an email with your GitHub organization name and repository name from your official address to aem-forms-ea@adobe.com. For example, if the repository URL is https://github.com/adobe/abc, the organization name is adobe and the repository name is abc.
When your form is finalized and ready for use, you can publish it to make it accessible to your customers for data collection and submission. Publishing ensures that the form is available on Edge Delivery, enabling users to interact with it seamlessly. This process allows customers to fill out and submit the form in real time, ensuring efficient data capture and streamlined processing.
Prerequisites
- A form created using the Edge Delivery Services template. Learn more about creating an EDS-based form.
Publish Your Form
You can publish any EDS-based Adaptive Form to Edge Delivery by following these steps:
-
Open your adaptive form in the editor and click the Publish icon on the upper rail.
-
When you click Publish, a screen or pop-up appears that shows the publishing assets, including the form鈥檚 title. In this example, the Wknd_Form template is used.
-
Click Publish again, and a confirmation pop-up appears, indicating that your form is now published.
-
To check the form鈥檚 publish status, click Publish again.
-
To unpublish a form, open your form in the editor, click the three-dot menu in the upper-right corner and click Unpublish.
Enable Form Submission on Edge Delivery by Configuring a Referrer Filter for AEM Publisher
To ensure secure form submission, you need to configure a Referrer Filter in AEM Publisher. This filter ensures that only authorized requests from Edge Delivery can perform write operations (POST, PUT, DELETE, COPY, MOVE), preventing unauthorized modifications. Following are the steps given to configure a Referrer Filter for AEM Publisher:
Update the AEM Instance URL in Edge Delivery
Modify the submitBaseUrl in the constant.js file within the form block to specify the AEM instance URL:
For Cloud Setup:
export const submitBaseUrl = 'https://publish-p120-e12.adobeaemcloud.com';
For Local Development:
export const submitBaseUrl = 'http://localhost:4503';
Modify the CORS Configuration
Adjust the CORS settings to allow form submission requests from Edge Delivery domains. Refer to the CORS Configuration Guide for details.
Sample CORS Configuration:
# Developer Localhost
SetEnvIfExpr "env('CORSProcessing') == 'true' && req_novary('Origin') =~ m#(http://localhost(:\d+)?$)#" CORSTrusted=true
# Franklin Stage
SetEnvIfExpr "env('CORSProcessing') == 'true' && req_novary('Origin') =~ m#(https://.*\.hlx\.page$)#" CORSTrusted=true
# Franklin Live
SetEnvIfExpr "env('CORSProcessing') == 'true' && req_novary('Origin') =~ m#(https://.*\.hlx\.live$)#" CORSTrusted=true
For local development, refer to the documentation to enable CORS from your development UI host URL.
Configure the Referrer Filter
Set up the Referrer Filter in AEM Cloud Service via Cloud Manager. Know more about configuring the referrer filter on an AEM Cloud Service instance using a cloud manager.
JSON Configuration for the Referrer Filter:
{
"allow.empty": false,
"allow.hosts": [],
"allow.hosts.regexp": [
"https://.*\\.hlx\\.page:443",
"https://.*\\.hlx\\.live:443"
],
"filter.methods": [
"POST",
"PUT",
"DELETE",
"COPY",
"MOVE"
],
"exclude.agents.regexp": [
""
]
}
This configuration specifies which HTTP methods are filtered, which referrers are allowed, and which user agents are excluded from the filter. By implementing these configurations, form submissions via Edge Delivery will be secured and restricted to authorized sources only.
Access Your Published Adaptive Form
Your Adaptive Form is now accessible via Edge Delivery using the following URL format:
https://<branch>--<repo>--<owner>.aem.page/content/forms/af/<form_name>
For example, the URL for the Wknd-Form is:
https://main--universaleditor--wkndforms.aem.live/content/forms/af/wknd-form