教學課程：建立最適化表單 do-not-publish-tutorial-create-an-adaptive-form

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
Adaptive Forms

建立對象：

User

CAUTION

AEM 6.4已結束延伸支援，本檔案不再更新。如需詳細資訊，請參閱技術支援期. 尋找支援的版本此處.

02-create-adaptive-form-main-image

本教學課程是建立第一個最適化表單系列。建議您依序依序依序執行系列，以了解、執行和示範完整的教學課程使用案例。

關於教學課程 about-the-tutorial

最適化表單是新一代動態且回應迅速的表單。您可以使用適用性表單來提供個人化體驗。您也可以將適用性表單與Adobe Analytics整合，以取得使用統計資料，並將Adobe Campaign整合以進行促銷活動管理。如需適用性表單功能的詳細資訊，請參閱製作最適化表單簡介.

遵循適當的程式時，建立和管理表單會更輕鬆。在本文中，您將學習如何：

文章結尾會提供類似下列的表單：

[ ![](do-not-localize/form-preview-mobile.gif)](assets/form-preview-mobile.gif)

步驟1:建立最適化表單 step-create-the-adaptive-form

登入AEM製作例項並導覽至 Adobe Experience Manager > Forms > Forms與檔案. 預設URL為 http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.
點選建立選取 適用性表單. 畫面上會顯示選取範本的選項。點選空白選取範本並點選 下一個.
選項 新增屬性 框。此標題和名稱欄位是必填欄位：
- 標題： 指定 Add new or update shipping address 在標題欄位中。標題欄位指定表單的顯示名稱。標題可協助您識別AEM Forms使用者介面中的表單。
- 名稱： 指定 shipping-address-add-update-form 在「名稱」欄位中。「名稱」欄位指定表單的名稱。在儲存庫中建立具有指定名稱的節點。當您開始輸入標題時，會自動產生名稱欄位的值。您可以變更建議的值。名稱欄位只能包含英數字元、連字型大小和底線。所有無效輸入都會以連字型大小取代。
點選建立. 隨即建立最適化表單，並出現一個對話方塊以開啟表單以進行編輯。點選開啟在新頁簽中開啟新建立的窗體。表單隨即開啟供編輯。它也會顯示邊欄，以根據需求自訂新建立的表單。

如需適用性表單製作介面和可用元件的相關資訊，請參閱製作最適化表單簡介.

步驟2:新增頁首與頁尾 step-add-header-and-footer

AEM Forms提供許多元件，可顯示最適化表單的資訊。頁首與頁尾元件有助於提供一致的表單外觀。標題通常包括公司的標誌、表單標題和摘要。頁尾通常包含版權資訊和其他頁面的連結。

點選 > . 元件瀏覽器隨即開啟。拖曳標題元件（從元件瀏覽器）到最適化表單。
點選標誌. 工具列隨即出現。點選在工具列上，輸入 We.Retail，然後點選 .
點選「影像」。工具列隨即出現。點選 . 屬性瀏覽器隨即在螢幕左側開啟。瀏覽上傳標誌影像。點選 . 影像會出現在標題上。

如果您沒有標誌，可以點選「取得檔案」以下載本文中使用的標誌。

取得檔案

拖曳頁尾元件至最適化表單。此階段的表單如下所示：

步驟3:新增元件以擷取和顯示資訊 step-add-components-to-capture-and-display-information

元件是最適化表單的建置組塊。 AEM Forms提供許多元件，可擷取和顯示最適化表單中的資訊。您可以從填入表單。若要了解可用元件和對應的功能，請參閱製作最適化表單簡介.

將數值方塊元件拖曳至最適化表單。將其置於頁尾元件之前。開啟元件的屬性，更改標題的 Customer ID，變更 元素名稱 to customer_ID，啟用 必填欄位 選項，啟用 使用HTML5數字輸入類型 選項，然後點選 .
拖曳三個文字方塊元件至最適化表單。將這些內容放在頁尾元件中。為這些文本框設定以下屬性。:

屬性

文本框1

文本框2

文本框3

標題

名稱

送貨地址

狀態

元素名稱

customer_name

customer_Shipping_Address

customer_state

必填欄位

已啟用

允許多行

停用

已啟用

停用

拖曳 數值方塊 元件。開啟元件的屬性，設定下表中列出的值，點選 .

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
屬性	值
標題	郵遞區號
元素名稱	customer_ZIPCode
數字數量上限	6
必填欄位	已啟用
顯示圖樣類型	無模式

拖曳 電子郵件 元件。開啟元件的屬性，設定下表中列出的值，然後點選 .

table 0-row-2 1-row-2 2-row-2 3-row-2
屬性	值
標題	電子郵件
元素名稱	customer_Email
必填欄位	已啟用

拖曳 檔案附件 元件。開啟元件的屬性，設定下表中列出的值，然後點選 .

屬性

值

標題

政府批准的地址證明

元素名稱

customer_Address_Proof

必填欄位

已啟用

拖曳 提交按鈕 元件至最適化表單。將其置於頁尾元件之前。開啟元件的屬性，將「元素名稱」變更為 address_addition_update_submit，點選 . 表單的版面已完成，表單看起來如下所示：

步驟4:設定最適化表單的提交動作 step-configure-submit-action-for-the-adaptive-form

使用者點選適用性表單上的「提交」按鈕時，會觸發提交動作。您可以使用提交動作將表單資料儲存至本機存放庫、將表單資料傳送至REST端點、以電子郵件形式傳送表單資料等。適用性表單提供更多現成可用的提交動作。如需詳細資訊，請參閱設定提交動作.

使用下列步驟，您可以設定表單的電子郵件提交動作和示範提交動作：

設定電子郵件伺服器。如需詳細資訊，請參閱設定電子郵件通知.

/content/help/en/experience-manager/6-4/sites-administering/notification.html
點選 表單容器 在「內容」瀏覽器中，然後點選 . 屬性瀏覽器會在左側開啟。

前往提交 > 提交動作. 選擇 傳送電子郵件. 指定下列值並點選 .

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
屬性	值
從	`donotreply@weretail.com`
至	`${customer_Email}`
主旨	確認：您已在We.Retail網站上新增送貨地址。
電子郵件範本	你好 `${customer_Name}`，則會新增下列地址作為您的帳戶的運送地址： `${customer_Name}`, `${customer_Shipping_Address}`, `${customer_State}`, `${customer_ZIPCode}` 此致，We.Retail
包含附件	已啟用

你的表格準備好了。現在，您可以預覽表單並測試功能。如果您已使用本教學課程所提及的名稱，並存取執行AEM Forms伺服器之電腦上的表單，則表單可在 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

步驟5:預覽並提交最適化表單 step-preview-and-submit-the-adaptive-form

您可以使用 預覽選項 來評估表單的外觀和行為。您可以以預覽模式提交表單，也可以檢查表單上套用的驗證。例如，如果必填欄位留空時顯示錯誤。

適用性表單也提供可針對各種裝置模擬表單體驗的選項。例如iPhone、iPad和案頭。您可以同時使用預覽和 模擬器 選項，可針對不同螢幕大小的裝置預覽表單。

點選預覽選項。表單會在預覽模式中開啟。如果您已使用教學課程提及的名稱，則表單的預覽URL為 http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
使用檢視表單在各種裝置上的外觀。
填寫表單的欄位並點選提交. 表單會提交，系統會將您重新導向至預設值謝謝頁面。您也可以指定自訂的感謝頁面。如需詳細資訊，請參閱設定重新導向頁面.

新增地址的最適化表單已就緒。如果您已使用本教學課程所提及的名稱，並存取執行AEM Forms伺服器之電腦上的表單，則表單可在 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

recommendation-more-help

a6ebf046-2b8b-4543-bd46-42a0d77792da