1.3.1建立您的第一個表單
將AEM Forms與Edge Delivery Services搭配使用的1.3.1.1環境需求
在設定您的第一個表單之前，在您可以遵循以下步驟之前，需要滿足許多要求。
計畫設定
在您的Cloud Manager程式的 解決方案和附加元件 中，Forms需要啟用。
個區塊
在您的Github存放庫中，您需要有下列可用的區塊：
- 表單
- embed-adaptive-form
指令碼
在您的Github存放庫中，您需要有以下可用的指令碼：
- form-editor-support.css
- form-editor-support.js
此外，在 editor-support.js 檔案中，必須完成下列變更，才能在通用編輯器中編輯表單。
- 將函式宣告從 function attachEventListners(main) 變更為async function attachEventListners(main)
- 加入第152和153行：
const module = await import('./form-editor-support.js');
module.attachEventListners(main);
此外，在檔案 editor-support.js 中，將第90-92行變更如下：
if (block.dataset.aueModel === 'form') {
return true;
} else if (newBlock) {
paths.json
請確認您的Github存放庫組態，尤其是檔案paths.json。 檔案中必須存在以下行：
- 在對映之下： "/content/forms/af/：/forms/"
- 下包含： "/content/forms/af/"
{
"mappings": [
"/content/CitiSignal/:/",
"/content/CitiSignal/configuration:/.helix/config.json",
"/content/CitiSignal/headers:/.helix/headers.json",
"/content/CitiSignal/metadata:/metadata.json",
"/content/CitiSignal.resource/enrichment/enrichment.json:/enrichment/enrichment.json",
"/content/forms/af/:/forms/"
],
"includes": [
"/content/CitiSignal/",
"/content/forms/af/"
]
}
設定好這些需求後，您就可以建立第一個表單。
1.3.1.2建立表單
移至https://my.cloudmanager.adobe.com。 您應該選取的組織是--aepImsOrgName--。 開啟您的環境。
移至Forms。
移至Forms與檔案。
按一下建立，然後選取最適化表單。
選取Edge Delivery Services，然後選取空白頁面。 按一下建立。
您應該會看到此訊息。 填寫下列欄位：
- 標題：
Fiber Max Interest Form - 名稱：應該根據欄位 標題 自動填入。
- Github URL：提供連結至您網站的Github存放庫路徑
按一下建立。
按一下 建立 後，通用編輯器應該會自動開啟，您應該會看到類似這樣的內容。 按一下圖示以開啟內容樹狀結構。
在 內容樹狀結構 中，選取物件最適化表單。
然後，按一下 + 圖示以新增元素，並選取文字輸入。
在 內容樹狀結構 中，選取欄位文字輸入。
移至 基本 檢視。 您應該會看到此訊息。
填寫下列欄位：
- 名稱：
first-name - 標題：
First Name
接著，移至驗證。
翻轉切換器以使其成為必填欄位。 填寫下列欄位：
- 錯誤訊息：
Enter your first name - 模式：
[A-Za-z][A-Za-z ]+ - 模式錯誤訊息：
Letters only!
在 內容樹狀結構 中，選取欄位最適化表單。 按一下 + 圖示，然後選取文字輸入。
在 內容樹狀結構 中，選取新建立的欄位文字輸入。 移至屬性。
移至 基本 檢視。 您應該會看到此訊息。
填寫下列欄位：
- 名稱：
last-name - 標題：
Last Name
接著，移至驗證。
翻轉切換器以使其成為必填欄位。 填寫下列欄位：
- 錯誤訊息：
Enter your last name - 模式：
[A-Za-z][A-Za-z ]+ - 模式錯誤訊息：
Letters only!
在 內容樹狀結構 中，選取欄位最適化表單。 按一下 + 圖示，然後選取文字輸入。
在 內容樹狀結構 中，選取新建立的欄位文字輸入。 移至屬性。
移至 基本 檢視。 您應該會看到此訊息。
填寫下列欄位：
- 名稱：
email - 標題：
Email
接著，移至驗證。
翻轉切換器以使其成為必填欄位。 填寫下列欄位：
- 錯誤訊息：
Enter your email address - 模式：
^[^@]+@[^@]+\.[^@]+$ - 模式錯誤訊息：
Please verify your email address!
在 內容樹狀結構 中，選取欄位最適化表單。 按一下 + 圖示，然後選取文字輸入。
在 內容樹狀結構 中，選取新建立的欄位文字輸入。
移至 基本 檢視。 您應該會看到此訊息。
填寫下列欄位：
- 名稱：
city - 標題：
city
接著，移至驗證。
翻轉切換器以使其成為必填欄位。 填寫下列欄位：
- 錯誤訊息：
Enter your city - 模式：
[A-Za-z][A-Za-z ]+ - 模式錯誤訊息：
Letters only!
按一下發佈。
再按一下發佈。
按一下以開啟您的表單。
您之後可以填寫表單，但尚未能提交。
發佈表單後，您的Edge Delivery Services網域現在也可使用它，如下所示：
https://main--techinsidersXX-citisignal-aem-accs--woutervangeluwe.aem.page/forms/fiber-max-interest-form
1.3.1.3提交表單
若要提交表單，需要2件事：
- 提交按鈕
- 提交動作
此外，在本練習中，您應使用Google試算表來記錄此表單的提交內容。
Google試算表
移至https://drive.google.com並建立新的空白試算表。
為檔案命名citisignal-fiber-max-interest。
在第1行中，在儲存格A-B-C-D中輸入下列欄位名稱：
- 名字
- 姓氏
- 電子郵件
- 城市
然後，按一下共用。
使用 編輯器 層級存取許可權與 forms@adobe.com 共用檔案。
然後，按一下複製連結。
按一下傳送。
您必須在下一個步驟中使用複製的連結。
提交按鈕
若要設定 提交 按鈕，請移至內容樹狀結構，選取最適化表單，按一下 + 圖示，然後選取提交。
您應該會看到此訊息。
提交動作
提交動作是Universal Editor擴充功能的一部分。
按一下 編輯表單屬性 圖示。
選取提交至試算表。 貼上您先前建立之Google工作表的URL。
按一下「儲存並關閉」。
按一下發佈。
再按一下發佈。
然後您可以重新整理網站、填寫表單並按一下提交。
您的提交應該會成功。
若您接著檢視Google工作表，您應該也會看到成功的提交。
您現在已成功完成此練習。
後續步驟
返回Adobe Experience Manager Forms與Edge Delivery Services