使用Co-worker建立具有最適化表單的AEM Sites聯絡我們頁面
[AEM Forms as a Cloud Service]{class="badge informative"}
概觀
Co-worker Enterprise提供AI輔助方式,使用自然語言指示完成Adobe Experience Manager (AEM)中的工作。 使用者可以描述想要建立的體驗,而不必手動執行每個撰寫和設定步驟,而Co-worker可協助執行AEM中支援的工作。
同事可以互動方式工作,並在需要其他資訊(例如參考頁面、現有設定或要使用的服務)時詢問後續問題。 這可讓您將AI輔助撰寫與現有的AEM資產、元件、表單和整合結合在一起。
在本文中,我們使用Co-worker協助建立AEM Sites聯絡我們體驗,包括建立頁面和最適化表單、設定郵遞區號查閱,以及設定表單提交至現有Azure儲存體設定。
此教學課程示範如何使用 同事 來建立AEM Sites 聯絡我們頁面,包括:
- 全形銀行主題橫幅
- 內嵌於AEM Sites頁面的最適化表單
- 兩欄式表單版面配置
- 平板電腦和行動裝置的回應式行為
- 客戶資訊與查詢詳細資訊的邏輯分組
頁面將會建立於下列專案下:
/content/bankingapplication/us/contact-us
先決條件
開始之前,請確定:
您有權存取AEM環境,並擁有建立和修改Sites頁面和自適應Forms所需的許可權。
在本文章使用的範例中,Banking Application是在我們的環境中設定的AEM專案,而「聯絡我們」頁面是在/content/bankingapplication/us下建立。
您的AEM專案名稱和內容結構可能不同。 將本文的範例路徑取代為AEM環境的適當專案名稱和內容位置。
同樣地,最適化Forms和相關資產可以在專案的適當位置建立;它們不需要使用本文中顯示的相同路徑。
步驟1:開啟同事
開啟「同事」,並提供描述您要建立之頁面的自然語言要求。
提示應包括:
- 頁面位置
- 所需的頁面結構
- 橫幅需求
- 最適化表單要求
- 兩欄式配置
- 回應式行為
- 表單上所需的欄位
- 視覺效果和協助工具的期望
一般而言,詳細的提示會產生比簡短請求(例如「建立聯絡人頁面」)更可預測的結果。
步驟2:提供頁面建立提示
將下列提示複製並貼到Co-worker中:
步驟2:提供頁面建立提示
將下列提示複製並貼到Co-worker中:
我想要在AEM Sites中建立以下內容路徑下的 聯絡我們 頁面:
/content/bankingapplication/us
頁面需求
1. 全形銀行橫幅
- 新增橫幅/主圖影像,使其跨越頁面的整個寬度。
- 以 現代銀行與金融服務主題 建立適當的橫幅影像。
- 視覺效果應傳達信任、專業精神、安全性和客戶服務。
- 橫幅在桌上型電腦、平板電腦和行動版面配置中應該都能正常運作。
2. 連絡我們最適化表單
- 在頁面的下半部,直接在AEM Sites頁面中新增AEM最適化表單。
- 在案頭上以邏輯方式將表單欄位組織成兩個並排的面板/欄。
- 在平板電腦和行動裝置上,面板應垂直棧疊以提供回應式體驗。
左面板 — 您的資訊
- 名稱
- 電子郵件地址
- 街道地址
- 城市
- 狀態
- 郵遞區號
右側面板 — 我們能提供什麼協助?
- 查詢型別
- 主旨
- 訊息/評論
- 慣用聯絡時間
將 Submit 按鈕放置在表單欄位下方的邏輯位置,讓整體表單感覺平衡且易於使用。
頁面位置
建立「聯絡我們」頁面:
/content/bankingapplication/us/contact-us
回答同事的後續追蹤問題
提交提示後,同事可在建立AEM Sites頁面前詢問其他問題。 這些問題可協助Co-worker瞭解現有的網站結構、設計慣例、可用元件以及所需的實施。
同事回應