Publish your form and start collecting data

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

2. Open the spreadsheet that has your form. For example, the enquiry form Microsoft Excel workbook.

3. Use AEM Sidekick to preview the sheet.

   

   Upon successful completion of the preview operation, the spreadsheet content undergoes conversion into JSON format. The preview page then presents this content in a structured table format. For instance, the accompanying image illustrates the content of an ‘enquiry’ form.

   

4. Use AEM Sidekick to publish the sheet. Ensure to capture the publish URL, as this is required for rendering the form in the next section. The URL format is as follows:

   code language-json
   https://<branch>--<repository>--<owner>.hlx.live/<form>.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

Add the <form>.json to a webpage to facilitate customer interaction, enabling form fillers to effortlessly fill out and submit the form.

To add the form to your webpage:

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

2. Open a document file where you intend to embed the form. For instance, you can open the index.docx file, or alternatively, create a new document.

3. Identify the desired section within the document where you want to insert the form, and navigate to it accordingly.

4. Add a block named ‘Form’ to the file, similar to the example provided 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 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.

   Use the preview URL (.page URL) for developmental or testing purposes, or the publish URL (.live) for production. Here’s are examples with preview and publish URL:

   Preview URL

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

   Publish URL

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

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

   

6. Use AEM Sidekick to publish the form. Now, your customers can fill out the form and submit it.

If you encounter an error resembling the following message, it indicates that the spreadsheet is not configured to accept the submitted data yet.