使用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:開啟同事

開啟「同事」,並提供描述您要建立之頁面的自然語言要求。

提示應包括:

  1. 頁面位置
  2. 所需的頁面結構
  3. 橫幅需求
  4. 最適化表單要求
  5. 兩欄式配置
  6. 回應式行為
  7. 表單上所需的欄位
  8. 視覺效果和協助工具的期望

一般而言,詳細的提示會產生比簡短請求(例如「建立聯絡人頁面」)更可預測的結果。

步驟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瞭解現有的網站結構、設計慣例、可用元件以及所需的實施。

同事回應

同事回應

recommendation-more-help
experience-manager-learn-help-cloud-service