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

登入AEM作者執行個體並導覽至​ Adobe Experience Manager > Forms > Forms和檔案。 預設URL為http://localhost:4502/aem/forms.html/content/dam/formsanddocuments。

選取​ 建立 ​並選取​ 最適化表單。 隨即顯示選取範本的選項。 選取​ Blank ​範本以選取它，並選取​ 下一步。

出現​ 新增屬性 ​的選項。 Title ​和​ Name ​欄位是必要的：

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

選擇 建立。系統隨即建立最適化表單，並顯示對話方塊以開啟表單進行編輯。 選取​ 開啟 ​以在新索引標籤中開啟新建立的表單。 隨即開啟表單進行編輯。 也會顯示側邊欄，以便您根據需求自訂新建立的表單。

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

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

選取​ 標誌。 工具列隨即顯示。 在工具列上選取 ，輸入​ We.Retail，然後選取 。

選取影像。 工具列隨即顯示。 選取 。 屬性瀏覽器會在畫面左側開啟。 瀏覽 ​並上傳標誌影像。 選取 。 影像會顯示在頁首上。

如果您沒有圖志，可以選取[取得檔案]來下載本文中使用的圖志。

將​ 頁尾 ​元件從 拖曳至最適化表單。 在此階段，表單看起來像這樣：

將​ 數值方塊元件 ​拖曳至最適化表單。 將其放在頁尾元件之前。 開啟元件的屬性，將元件的​ Title ​變更為​ Customer ID，將​ Element Name ​變更為​ customer_ID，啟用​ Required Field ​選項，啟用​ 使用HTML5數字輸入型別 ​選項，並選取 。

將三個Text Box元件拖曳至最適化表單。 將這些專案放在頁尾元件之前。 為這些文字方塊設定下列屬性。：

將​ 數值方塊 ​元件拖曳到頁尾元件之前。 開啟元件的屬性，設定下表列出的值，選取 。

將​ 電子郵件 ​元件拖曳到頁尾元件之前。 開啟元件的屬性，設定下表所列值，然後選取 。

將​ File Attachment ​元件拖曳到頁尾元件之前。 開啟元件的屬性，設定下表所列值，然後選取 。

將​ 提交按鈕 ​元件拖曳至最適化表單。 將其放在頁尾元件之前。 開啟元件的屬性，將元素名稱變更為address_addition_update_submit，選取 。 表單版面配置完整，表單如下所示：

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

在內容瀏覽器中選取​ 表單容器，然後選取 。 屬性瀏覽器會在左側開啟。

移至​ 提交 > 提交動作。 選取​ 傳送電子郵件。 指定下列值並選取 。

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