蜜豆视频

1. Access the AEM Forms Boilerplate template

   • Go to

   
   Figure: AEM Forms Boilerplate repository with pre-configured Adaptive Forms Block

2. Create your repository

   • Click Use this template > Create a new repository

   
   Figure: Using the template to create a new repository

3. Configure repository settings

   • Owner: Select your GitHub account or organization
   • Repository name: Choose a descriptive name (e.g., my-forms-project)
   • Visibility: Select Public (recommended for Edge Delivery Services)
   • Click Create Repository

   
   Figure: Configuring your new repository with public visibility

Validation: Confirm you have a new GitHub repository based on the AEM Forms Boilerplate template.

AEM Code Sync automatically synchronizes content changes between your AEM authoring environment and your GitHub repository.

1. Install the GitHub App

   • Go to

2. Configure access permissions

   • Select Only select repositories
   • Choose your newly created repository
   • Click Save

   
   Figure: Installing AEM Code Sync with repository-specific permissions

Checkpoint: AEM Code Sync is now installed and has access to your repository.

The fstab.yaml file connects your GitHub repository to AEM authoring environment for content synchronization.

1. Navigate to your repository

   • Go to your newly created GitHub repository
   • You should see the AEM Forms Boilerplate files

2. Create the fstab.yaml file

   • Click Add file > Create new file in the root directory
   • Name the file fstab.yaml

   
   Figure: Creating the fstab.yaml configuration file

3. Add your AEM connection details

   Copy and paste the following configuration, replacing the placeholders:

   code language-yaml
   mountpoints: /: https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main

   Replace:

   • <aem-author>: Your AEM as a Cloud Service author URL (e.g., author-p12345-e67890.adobeaemcloud.com)
   • <owner>: Your GitHub username or organization
   • <repository>: Your repository name

   Example:

   code language-yaml
   mountpoints: /: https://author-p12345-e67890.adobeaemcloud.com/bin/franklin.delivery/mycompany/my-forms-project/main

   
   Figure: Configuring the mountpoint for AEM integration

4. Commit the configuration

   • Add a commit message: 鈥淎dd AEM integration configuration鈥�
   • Click Commit new file

   
   Figure: Committing the fstab.yaml configuration

Validation: Confirm your GitHub repository connection to AEM.

    <div class="extension note">
    <div>NOTE</div>
    <div>
    <p>Having build issues? See <a href="#troubleshooting-github-build-issues">Troubleshooting GitHub build issues</a>.</p>
    </div>
    </div>

1. Access the AEM Sites console

   • Log into your AEM as a Cloud Service authoring instance
   • Navigate to Sites

   
   Figure: Accessing the AEM Sites console

2. Start site creation

   • Click Create > Site from template

   
   Figure: Creating a new site from template

3. Select the Edge Delivery Services template

   • Choose the Edge Delivery Services Site template
   • Click Next

   
   Figure: Selecting the Edge Delivery Services site template

   note note
   NOTE
   Template not available? If you don鈥檛 see the Edge Delivery Services template:
   Click Import to upload the template Download templates from

4. Configure your site

   Enter the following information:

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Field	Value	Example
   Site Title	Descriptive name for site	鈥淢y Forms Project鈥�
   Site Name	URL-friendly name	鈥渕测-蹿辞谤尘蝉-辫谤辞箩别肠迟鈥�
   GitHub URL	Your repository URL	https://github.com/mycompany/my-forms-project

   
   Figure: Configuring your new AEM site with GitHub integration

5. Complete site creation

   • Review your settings
   • Click Create

   
   Figure: Confirming site creation

   Success! Your AEM site is now created and connected to GitHub.

6. Open in Universal Editor

   • In the Sites console, locate your new site
   • Select the index page
   • Click Edit

   
   Figure: Opening your site for editing

   The Universal Editor opens in a new tab, providing WYSIWYG authoring capabilities.

   
   Figure: Your site opened in Universal Editor for WYSIWYG editing

Validation: Confirm your AEM site is ready for form authoring.

Publishing makes your site available on Edge Delivery Services for global access.

1. Quick publish from Sites console

   • Return to the AEM Sites console
   • Select your site pages (or select all with Ctrl+A)
   • Click Quick Publish

   
   Figure: Selecting pages for quick publish

2. Confirm publishing

   • In the confirmation dialog, click Publish

   
   Figure: Confirming the publish action

   Alternative: You can also publish directly from Universal Editor using the publish button.

   
   Figure: Publishing directly from Universal Editor

3. Access your live site

   Your site is now live at:

   code language-none
   https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/

   URL Structure Explained:

   • <branch>: GitHub branch (usually main)
   • <repo>: Your repository name
   • <owner>: Your GitHub username or organization
   • <site-name>: Your AEM site name

   Example:

   code language-none
   https://main--my-forms-project--mycompany.aem.page/content/my-forms-project/

Validation: Confirm your site is live on Edge Delivery Services.

Next: Create your first form

1. Navigate to your local project

   code language-bash
   cd /path/to/your/aem-project

2. Download required files from AEM Forms Boilerplate

   Copy these files from the :

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Source	Destination	Purpose
   	blocks/form/	Core form functionality
   	scripts/form-editor-support.js	Universal Editor integration
   	scripts/form-editor-support.css	Editor styling

3. Update editor support

   • Replace your /scripts/editor-support.js file with the

Validation: Confirm form block files are in your project.

1. Update section model

   Open /models/_section.json and add form components to the filters:

   code language-json
   { "filters": [ { "id": "section", "components": [ "text", "image", "button", "form", "embed-adaptive-form" ] } ] }

   What this does: Enables form components in the Universal Editor component picker.

Validation: Confirm form components appear in Universal Editor.

Why this step: Prevents linting errors from form-specific files and configures proper validation rules.

1. Update .eslintignore

   Add these lines to /.eslintignore:

   code language-bash
   # Form block rule engine files blocks/form/rules/formula/* blocks/form/rules/model/* blocks/form/rules/functions.js scripts/editor-support.js scripts/editor-support-rte.js

2. Update .eslintrc.js

   Add these rules to the rules object in /.eslintrc.js:

   code language-javascript

   { "rules": { // Existing rules... // Form component cell limits 'xwalk/max-cells': ['error', { '*': 4, // default limit form: 15, wizard: 12, 'form-button': 7, 'checkbox-group': 20, checkbox: 19, 'date-input': 21, 'drop-down': 19, email: 22, 'file-input': 20, 'form-fragment': 15, 'form-image': 7, 'multiline-input': 23, 'number-input': 22, panel: 17, 'radio-group': 20, 'form-reset-button': 7, 'form-submit-button': 7, 'telephone-input': 20, 'text-input': 23, accordion: 14, modal: 11, rating: 18, password: 20, tnc: 12 }], // Disable this rule for forms 'xwalk/no-orphan-collapsible-fields': 'off' } }

Validation: Confirm ESLint works with form components.

1. Install dependencies and build

   code language-bash
   # Install any new dependencies npm install # Build component definitions npm run build:json

   What this does:

   • Updates component-definition.json with form components
   • Generates component-models.json with form models
   • Creates component-filters.json with filtering rules

2. Verify generated files

   Check that these files in your project root contain form-related objects:

   • component-definition.json
   • component-models.json
   • component-filters.json

3. Commit and push changes

   code language-bash
   git add . git commit -m "Add Adaptive Forms Block integration" git push origin main

Validation: Confirm your project includes form capabilities.

1. Open your page in Universal Editor

   • Navigate to the Sites console in AEM
   • Select the page where you want to add a form (e.g., index)
   • Click Edit

   Your page opens in Universal Editor for WYSIWYG editing.

2. Add the Adaptive Form component

   • Open the Content Tree panel (left sidebar)
   • Navigate to a section where you want to add your form
   • Click the Add (+) icon
   • Select Adaptive Form from the component list

   
   Figure: Adding an Adaptive Form block to your page

Validation: Confirm you have an empty form container.

1. Navigate to your form block

   • In the Content Tree, locate your newly added Adaptive Form section

   
   Figure: Adaptive Form block in the content tree

2. Add form components

   You can add components in two ways:

   Method A: Click to Add

   • Click the Add (+) icon in your form section
   • Select components from the Adaptive Form Components list

   Method B: Drag and Drop

   • Drag components directly from the component panel to your form

   
   Figure: Adding components to your form

   Recommended starter components:

   • Text Input (for name, email)
   • Text Area (for messages)
   • Submit Button

3. Configure component properties

   • Select any form component

   • Use the Properties panel (right sidebar) to configure:

     • Labels and placeholders
     • Validation rules
     • Required field settings

   
   Figure: Configuring component properties

4. Preview your form

   Your form will look something like this:

   
   Figure: Example form created with Universal Editor

Validation: Confirm your form is ready for publishing.

1. Publish from Universal Editor

   • Click the Publish button in Universal Editor

   
   Figure: Publishing your form from Universal Editor

2. Confirm publishing

   • In the confirmation dialog, click Publish

   
   Figure: Confirming the publish action

   You鈥檒l see a success message confirming publication.

   
   Figure: Successful publication confirmation

3. View your live form

   Your form is now live at:

   code language-none
   https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/

   Example URL:

   code language-none
   https://main--my-forms-project--mycompany.aem.page/content/my-forms-project/

   
   Figure: Your published form page on Edge Delivery Services

Congratulations! Your form is now live and ready to collect submissions.

1. Install AEM CLI

   The AEM CLI simplifies local development tasks:

   code language-bash
   npm install -g @adobe/aem-cli

2. Clone your repository

   code language-bash
   git clone https://github.com/<owner>/<repo> cd <repo>

   Replace <owner> and <repo> with your actual GitHub details.

3. Start the local development server

   code language-bash
   aem up

   This starts a local server with hot-reload capabilities.

4. Make customizations

   • Edit files in the blocks/form/ directory for form styling and behavior
   • Modify form.css for styling
   • Update form.js for behavior

   See changes instantly in your browser at http://localhost:3000

5. Deploy your changes

   code language-bash
   git add . git commit -m "Custom form styling" git push origin main

   Your changes will be available at:

   • Preview: https://<branch>--<repo>--<owner>.aem.page/content/<site-name>
   • Production: https://<branch>--<repo>--<owner>.aem.live/content/<site-name>

Problem: Build failures or linting errors

Solution 1: Handle Linting Errors

If you encounter linting errors:

1. Open package.json in your project root

2. Find the lint script:

   code language-json
   "scripts": { "lint": "npm run lint:js && npm run lint:css" }

3. Temporarily disable linting:

   code language-json
   "scripts": { "lint": "echo 'skipping linting for now'" }

4. Commit and push the changes

Solution 2: Module Path Errors

If you see 鈥淯nable to resolve path to module 鈥�/scripts/lib-franklin.js鈥欌��:

1. Navigate to blocks/form/form.js

2. Update the import statement:

   code language-javascript
   // Change this: import { ... } from '/scripts/lib-franklin.js'; // To this: import { ... } from '/scripts/aem.js';

Problem: Form submissions not working

Solutions:

• Ensure you have a submit button component
• Check form action URL configuration
• Verify form validation rules
• Test in preview mode first

Problem: Styling issues

Solutions:

• Check CSS file paths in blocks/form/
• Clear browser cache
• Verify CSS syntax
• Test in the local development environment

Problem: Form components not appearing in Universal Editor

Solutions:

• Verify AEM Code Sync is installed and running
• Check that fstab.yaml has the correct AEM author URL
• Ensure your AEM instance has early access enabled
• Confirm component-definition.json includes form components

Problem: Changes not visible after publishing

Solutions:

• Wait for CDN cache refresh
• Check browser cache (try incognito/private mode)
• Verify the correct URL format is being used