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

02-create-adaptive-form-main-image

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

關於教學課程

最適化表單是新一代動態且回應迅速的表單。 您可以使用適用性表單來提供個人化體驗。 您也可以將適用性表單與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. 點選​建立​並選取​最適化表單。 畫面上會顯示選取範本的選項。 點選​空白​範本以加以選取，然後點選​下一步。

  3. 出現「新增屬性」選項。 Title​和​Name​欄位是必填欄位：

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

  4. 點選​建立。 隨即建立最適化表單，並出現一個對話方塊以開啟表單以進行編輯。 點選​開啟​以在新索引標籤中開啟新建立的表單。 表單隨即開啟供編輯。 它也會顯示邊欄，以根據需求自訂新建立的表單。

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

    新建立 — adaptive-form

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

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

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

  3. 點選「影像」。 工具列隨即出現。 點選cmpr。 屬性瀏覽器隨即在螢幕左側開啟。 ​​瀏覽及上傳標誌影像。點選aem_6_3_forms_save。 影像會出現在標題上。

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

取得檔案

  1. 將​頁尾​元件從treeexpandall拖曳至最適化表單。 此階段的表單如下所示：

    具有頁首和頁尾的適用性表單

步驟3:添加元件以捕獲和顯示資訊

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

  1. 將數值方塊元件拖曳至最適化表單。 將其置於頁尾元件之前。 開啟元件的屬性，將元件的​標題​變更為​Customer ID，將​元素名稱​變更為​customer_ID，啟用​必要欄位​選項，啟用​使用HTML5數字輸入類型​選項，然後點選aem_6_3_forms_save。
  2. 拖曳三個文字方塊元件至最適化表單。 將這些內容放在頁尾元件中。 為這些文本框設定以下屬性。:
屬性 文本框1
 文本框2
 文本框3
標題 名稱
 送貨地址 狀態
元素名稱 customer_Name
 customer_Shipping_Address customer_state
必填欄位 已啟用 已啟用 已啟用
允許多行
 停用 已啟用 停用

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

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

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

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

  3. 將​檔案附件​元件拖曳到頁尾元件之前。 開啟元件的屬性，設定下表中列出的值，然後點選aem_6_3_forms_save。

屬性 值
標題 政府批准的地址證明
元素名稱 customer_Address_Proof
必填欄位 已啟用

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

    adaptive-form-with-all-the-components

步驟4:設定最適化表單的提交動作

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

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

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

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

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

  3. 前往「提交 > 提交動作」。 選擇​發送電子郵件。 指定下列值，然後點選aem_6_3_forms_save。

    屬性 值
    從 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. 使用ruler查看窗體在各種設備上的外觀。
  3. 填寫表單的欄位，然後點選​Submit。 表單會提交，系統會將您重新導向至預設的​感謝​頁面。 您也可以指定自訂的感謝頁面。 如需詳細資訊，請參閱設定重新導向頁面。

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

本頁內容