教學課程：建立最適化表單

本教程是建立第一個自適應表單系列中的一個步驟。 建議依序依序依序排列，以瞭解、執行和展示完整的教學課程使用案例。

關於教學課程

最適化表單是新一代的動態回應表單。 您可以使用最適化表單來提供個人化體驗。 您也可以將最適化表單與Adobe Analytics整合，以取得使用統計資料，而Adobe Campaign整合，以管理宣傳活動。 有關最適化表單功能的詳細資訊，請參閱製作最適化表單簡介。

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

• 建立可讓客戶新增送貨地址的最適化表單

• 顯示並接受客戶資訊的最適化表單的版面欄位

• 建立提交動作以傳送包含表單內容的電子郵件

• 預覽並送出最適化表單

在文章結尾處，您會有類似下列的表格：

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

步驟1:建立最適化表單

1. 登入作AEM者例項並導覽至​Adobe Experience Manager > Forms > Forms與檔案。 預設URL為http://localhost:4502/aem/forms.html/content/dam/formsanddocuments。

2. 點選「建立」並選取「最適化表單」。 ​​此時會出現選擇範本的選項。 點選​Blank​範本以選取範本，然後點選​Next。

3. 將顯示​添加屬性​的選項。 Title​和​Name​欄位是必填欄位：

   • 標題：在 「標 Add new or update shipping address 題」欄位中指定。標題欄位會指定表單的顯示名稱。 標題可協助您識別AEM Forms使用者介面中的表單。
   • 名稱：在 「名 shipping-address-add-update-form 稱」欄位中指定。「名稱」欄位指定表單的名稱。 在儲存庫中建立具有指定名稱的節點。 當您開始輸入標題時，系統會自動產生名稱欄位的值。 您可以變更建議的值。 名稱欄位只能包含英數字元、連字型大小和底線。 所有無效輸入都會以連字型大小取代。

4. 點選​Create。 會建立最適化表單，並出現對話方塊以開啟表單以供編輯。 點選「開啟」，在新標籤中開啟新建立的表格。 表格隨即開啟以供編輯。 它還顯示邊欄，以根據需求自訂新建立的表格。

   有關最適化表單製作介面和可用元件的資訊，請參閱製作最適化表單簡介。

   

步驟2:新增頁首和頁尾

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

1. 點選 > 。 元件瀏覽器隨即開啟。 將​Header​元件從元件瀏覽器拖曳至最適化表單。

2. 點選​Logo。 工具列隨即出現。 點選工具列上的，輸入​We.Retail，然後點選。

3. 點選「影像」。 工具列隨即出現。 點選。 屬性瀏覽器會在畫面左側開啟。 瀏 覽及上傳標誌影像。點選。 影像會出現在頁首上。

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

   取得檔案

4. 將​Footer​元件從拖曳至最適化表單。 在此階段，表單如下所示：

   

步驟3:新增元件以擷取和顯示資訊

元件是自適應形式的構建塊。 AEM Forms提供許多元件，以自適應形式擷取和顯示資訊。 您可以將元件從拖動到表單中。 要瞭解可用的元件和相應的功能，請參閱製作最適化表單的簡介。

1. 將「數值方塊」元件拖曳至最適化表單。 將它置於頁尾元件之前。 開啟元件的屬性，將元件的​Title​變更為​Customer ID，將​元素名稱​變更為​customer_ID，啟用​必要欄位​選項，啟用​使用HTML5數字輸入類型​選項，然後點選。
2. 將三個文本框元件拖動到最適化表單。 將這些項目置於頁尾元件之前。 為這些文本框設定以下屬性。:

1. 將​數值方塊​元件拖曳至頁尾元件之前。 開啟元件的屬性，設定下表所列的值，點選。

   屬性	值
   標題	郵遞區號
   元素名稱	customer_ZIPCode
   數字數量上限	6
   必填欄位	已啟用
   顯示模式類型	無模式

2. 將​Email​元件拖曳至頁尾元件之前。 開啟元件的屬性，設定下表中所列的值，然後點選。

   屬性	值
   標題	電子郵件
   元素名稱	customer_Email
   必填欄位	已啟用

3. 將​檔案附件​元件拖動到腳注元件之前。 開啟元件的屬性，設定下表中所列的值，然後點選。

1. 將​提交按鈕​元件拖動到自適應表單。 將它置於頁尾元件之前。 開啟元件的屬性，將「元素名稱」變更為​address_addition_update_submit，點選。 表單的版面配置已完成，表單外觀如下：

   

步驟4:為最適化表單配置提交操作

當使用者點選最適化表單上的「提交」按鈕時，會觸發提交動作。 您可以使用提交操作將表單資料保存到本地儲存庫、將表單資料發送到REST端點、以電子郵件形式發送表單資料等。 最適化表單提供一些現成可用的提交動作。 如需詳細資訊，請參閱設定提交動作。

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

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

   /content/help/en/experience-manager/6-4/sites-administering/notification.html

2. 在「內容」瀏覽器中點選「表單容器」，然後點選「」。 屬性瀏覽器會在左側開啟。

3. 前往​Submission > Submit Action。 選擇​發送電子郵件。 指定下列值，然後點選。

   屬性	值
   從	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:預覽並提交最適化表單

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

最適化表單也提供選項，可讓您針對各種裝置模擬表單的使用體驗。 例如，iPhone、iPad和Desktop。 您可搭配使用​預覽​和​模擬器選項，以預覽不同螢幕大小裝置的表格。

1. 點選表單編輯器右側的​預覽​選項。 表單會在預覽模式中開啟。 如果您使用了教學課程中提及的名稱，則預覽表單的URL為http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
2. 使用檢視表格在各種裝置上的外觀。
3. 填寫表單欄位，然後點選​Submit。 表單已送出，您會重新導向至預設的​感謝您​頁面。 您也可以指定自訂的感謝頁面。 如需詳細資訊，請參閱「設定重新導向頁面」。

添加地址的最適化表單已就緒。 如果您使用了教學課程中提及的名稱，並在運行AEM Forms伺服器的電腦上訪問表格，則表格位於http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html。