Create a form using Adaptive Forms Block

Instead of navigating through complex processes, crafting a form can be effortlessly achieved using a spreadsheet. You can define the rows and columns that will make up the form structure. Each row represents an individual form field and the column headers define the corresponding field properties.

For instance, consider the following spreadsheet where rows outline fields for a enquiry form and column headers define their properties:

To proceed with form creation:

1. Access your AEM Edge Delivery project folder on Microsoft SharePoint or Google Drive.

2. Create a Microsoft Excel Workbook or Google Sheet anywhere within your AEM Edge Delivery project directory. For example, create a spreadsheet named enquiry on AEM Edge Delivery project directory on Google Drive.

   

3. Ensure that the sheet is shared with the appropriate AEM user (for example helix@adobe.com) as per the configurations specified for your project. Grant the user editing permission for the sheet.

4. Open the created spreadsheet and rename the default sheet to “shared-default”.

   

5. To add the form fields, insert rows and column headers into the ‘shared-default’ sheet. Each row should represent a form field, with column headers defining the corresponding field properties.

   For a swift start, consider copying the contents of the Enquiry spreadsheet into your spreadsheet. After copying the content, save your spreadsheet.

   embed
   https://video.tv.adobe.com/v/3427468?quality=12&learn=on

6. Use AEM Sidekick to preview the sheet.

   

   Upon previewing, new browser tabs display the sheet’s contents in JSON format. Ensure to capture the preview URL, as this is required for rendering the form in next the section. The URL format is as follows:

   code language-json
   https://<branch>--<repository>--<owner>.hlx.live/<form-path>/<form-file-name>.json

   • <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.

   For example, if your project’s repository is named “portal”, it’s located under the account “wkndforms”, and you’re using the “main” branch, the URL look like the following:

   https://main--portal--wkndforms.hlx.page/enquiry.json

Till now, you have prepared the structure of the form. Now, to preview the form:

1. Open your Microsoft SharePoint or Google Drive account and navigate to your AEM Edge Delivery project directory.

2. Open a document file (For example, index file) to embed the form. Alternatively, you can create a new document.

3. Move to the desired location within the document where you intend to add the form.

4. To create a form block to render the form. Select Insert > Table, and create a one column, two row table. Name the table “Form” and paste the preview URL in the second row. Make sure the URL is formatted as a hyperlink, not plain text, as illustrated below:

   table 0-row-1 1-row-1
   Form
   https://main–wefinance–wkndforms.hlx.live/enquiry.json

   

   This block serves as a placeholder where the form is embedded. In the second row of the block, add the preview URL of your <form>.json file as a hyperlink.

   note important
   IMPORTANT
   Ensure that the URL is formatted as a hyperlink rather than being displayed as plain text.

5. Use AEM Sidekick to preview the document. The page now displays the form. For example, here is the form based on the enquiry spreadsheet:

   

   Now, fill the form and click the submit button, you experience an error, similar to the following, because the spreadsheet is not set to accept the data yet.