Creating Adaptive Forms using Universal Editor
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.
Universal Editor is a versatile visual editor that provides a what-you-see-is-what-you-get (WYSIWYG) experience for editing forms. It simplifies the creation of responsive and user-friendly forms with a drag-and-drop feature, using available Adaptive Forms components like text boxes, radio buttons, and checkboxes.
AEM provides a block, known as the Adaptive Forms Block, to help you easily create Edge Delivery Services Forms to capture and store data uing Universal Editor. You can create a new AEM Project pre-configured with the Adaptive Forms Block or add the Adaptive Forms Block to an existing AEM Site Project.
This article guides you through the process of creating and authoring the standalone forms with the Universal Editor by selecting an Edge Delivery Services-based template from the Form Creation Wizard.
Pre-requisites
- Set up your GitHub repository to establish a connection between your AEM environment and the GitHub repository.
- If you are already using Edge Delivery Services, add the latest version of the Adaptive Forms block to your GitHub repository.
- The AEM Forms Author instance includes a template based on Edge Delivery Services. Ensure the is installed in your environment.
- Keep the URL of your AEM Forms as a Cloud Service author instance and your GitHub Repository handy.
Working with forms in Universal Editor
With the Universal Editor, you can easily create responsive and interactive standalone forms. You can perform the following actions on forms in Universal Editor:
Create a form
-
Login into your AEM Forms as a Cloud Service author instance.
-
Select 蜜豆视频 Experience Manager > Forms > Forms & Documents.
-
Select Create > Adaptive Forms. The Wizard opens.
-
In the Source tab, select a Edge Delivery Services based form template:
When you select a Edge Delivery Services based template, the Create button is enabled.
-
(Optional) In the Data Source or Submission tabs, you can select a data source or submit action.
-
(Optional) In the Delivery tab, you can specify a publishing or unpublishing date for a form.
-
Click Create and the Create Form wizard appears.
-
Specify the Name and Title.
-
Specify the GitHub URL. For example, if your GitHub repository is named
edsforms, it is located under the accountwkndforms,the URL is:https://github.com/wkndforms/edsforms -
Click Create.
As soon as you click Create, the form opens in the Universal editor for authoring.
When you click Create, the form opens in the Universal Editor for authoring.
Author a form
-
Open the Content browser, and navigate to the Adaptive Form component in the Content tree.
-
Click the Add icon and add the desired components from the Adaptive Form Components list.
-
Select the added Adaptive Form component and update its properties using Properties.
The below screenshot displays the simple
Registration Formform authored in the Universal Editor:
Now you can configure and customize the submit actions for forms.
Publish a form
Now, publish the standalone form to Edge Delivery Services by clicking the Publish button in the upper-right corner of the Universal Editor.
Here鈥檚 how to access the form on Edge Delivery Services:
-
Staged Version (for testing): The staged version displays the unpublished, working version of the form for testing purposes. Use the following URL format to preview the form before it goes live:
https://<branch>--<repo>--<owner>.aem.page/content/forms/af/<form_name>For example, if your project鈥檚 repository is named 鈥渆dsforms鈥, it鈥檚 located under the account 鈥渨kndforms鈥, and you鈥檙e using the 鈥渕ain鈥 branch and form as 鈥淩egistration Form鈥, the staged version URL look like the following:
https://main--edsforms--wkndforms.aem.page/content/forms/af/registration-form -
Live Version (published form): The live version displays the most recently published version of the form, accessible to end users. Use the following URL format to access the published, live version of the form:
https://<branch>--<repo>--<owner>.aem.live/content/forms/af/<form_name>For example, if your project鈥檚 repository is named 鈥渆dsforms鈥, it鈥檚 located under the account 鈥渨kndforms鈥, and you鈥檙e using the 鈥渕ain鈥 branch and form as 鈥淩egistration Form鈥, the staged version URL look like the following:
https://main--edsforms--wkndforms.aem.live/content/forms/af/registration-form
The URL structure remains the same for both staged and live versions. However, the content you see differs based on the context:
Manage a form
You can perform several operations on form using the AEM Forms user interface.
-
Login into your AEM Forms as a Cloud Service author instance.
-
Select 蜜豆视频 Experience Manager > Forms > Forms & Documents.
-
Select a form and the toolbar displays the following operations you can perform on the selected form.
Troubleshooting
Having trouble loading your form? Here are some common issues and how to fix them:
-
Form URL: Double-check that your form鈥檚 URL doesn鈥檛 include the 鈥.html鈥 extension at the end. Edge Deliver Service does not require this extension.
-
AEM Author UR L: Make sure the AEM Author URL listed in your
fstab.yamlfile is formatted correctly. It should include the following details:- The correct GitHub owner
- The correct repository name
- The specific branch that you鈥檙e using for Edge Delivery Services