本教學課程是 建立第一個最適化表單 數列。 建議您依照時間順序觀看本系列,以瞭解、執行和示範完整的教學課程使用案例。
調適型表單是新一代的表單,可動態且回應。 您可以使用調適型表單來提供個人化體驗。 您也可以整合最適化表單與 Adobe Analytics 使用狀況統計資料和 Adobe Campaign 用於行銷活動管理。 如需最適化表單功能的詳細資訊,請參閱 製作調適型表單簡介.
遵循適當的程式後,可更輕鬆建立及管理表單。 在本文章中,您將瞭解如何:
登入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
在 名稱 欄位。 「名稱」欄位指定表單的名稱。 在存放庫中會建立具有指定名稱的節點。 當您開始輸入標題時,會自動產生名稱欄位的值。 您可以變更建議值。 名稱欄位只能包含英數字元、連字型大小和底線。 所有無效輸入都會以連字型大小取代。點選 建立. 系統隨即會建立最適化表單,並顯示對話方塊以開啟表單進行編輯。 點選 開啟 以在新標籤中開啟新建立的表單。 表單隨即開啟以進行編輯。 它也會顯示側邊欄,以根據需求自訂新建立的表單。
如需最適化表單製作介面和可用元件的相關資訊,請參閱 製作調適型表單簡介.
AEM Forms 提供許多元件,可在最適化表單上顯示資訊。 頁首和頁尾元件有助於提供一致的外觀和感覺。 頁首通常包含企業的標誌、表單標題和摘要。 頁尾通常包含版權資訊和其他頁面的連結。
點選 >
. 元件瀏覽器隨即開啟。 拖曳 頁首 元件從元件瀏覽器變更為最適化表單。
點選 標誌. 工具列隨即顯示。 點選 在工具列上,輸入 We.Retail,然後點選
.
點選「影像」。 工具列隨即顯示。 點選 . 屬性瀏覽器會在畫面左側開啟。 瀏覽 並上傳標誌影像。 點選
. 影像會顯示在頁首上。
如果您沒有商標,可以點選「取得檔案」下載本文中使用的商標。
拖曳 頁尾 元件來源 至最適化表單。 在此階段,表單看起來像這樣:
元件是適用性表單的建置組塊。 AEM Forms 提供許多元件,可擷取和顯示最適化表單中的資訊。 您可以從下列位置拖曳元件: 至表單。 若要瞭解可用元件和對應功能,請參閱 製作調適型表單簡介.
拖曳 數值方塊元件 至最適化表單。 放在頁尾元件之前。 開啟元件的屬性,變更 標題 的元件至 Customer ID
,變更 元素名稱 至 customer_ID
,啟用 必要欄位 選項,啟用 使用HTML5數字輸入型別 選項,然後點選 .
將三個文字方塊元件拖曳至最適化表單。 將這些專案放在頁尾元件之前。 為這些文字方塊設定下列屬性。:
屬性 | 文字方塊1 |
文字方塊2 |
文字方塊3 |
標題 | 名稱 |
送貨地址 | 狀態 |
元素名稱 | customer_name |
customer_Shipping_Address | customer_state |
必要欄位 | 已啟用 | 已啟用 | 已啟用 |
允許多行 |
停用 | 已啟用 | 停用 |
拖曳 數值方塊 頁尾元件之前的元件。 開啟元件的屬性,設定下表所列值,點選 .
屬性 | 值 |
---|---|
標題 | 郵遞區號 |
元素名稱 | customer_ZIPCode |
數字數量上限 | 6 |
必要欄位 | 已啟用 |
顯示圖樣型別 | 無模式 |
拖曳 電子郵件 頁尾元件之前的元件。 開啟元件的屬性、設定下表所列值,然後點選 .
屬性 | 值 |
---|---|
標題 | 電子郵件 |
元素名稱 | customer_Email |
必要欄位 | 已啟用 |
拖曳 檔案附件 頁尾元件之前的元件。 開啟元件的屬性、設定下表所列值,然後點選 .
屬性 | 值 |
標題 | 政府核准的地址證明 |
元素名稱 | customer_Address_Proof |
必要欄位 | 已啟用 |
拖曳 提交按鈕 最適化表單的元件。 放在頁尾元件之前。 開啟元件的屬性,將元素名稱變更為 address_addition_update_submit
,點選 . 表單版面配置完整,表單如下所示:
當使用者點選最適化表單上的提交按鈕時,會觸發提交動作。 您可以使用提交動作將表單資料儲存至本機存放庫、將表單資料傳送至REST端點、以電子郵件傳送表單資料等。 調適型表單提供一些其他立即可用的提交動作。 如需詳細資訊,請參閱 設定提交動作.
使用下列步驟,您可以設定表單的電子郵件提交動作和示範提交動作:
設定電子郵件伺服器。 如需詳細資訊,請參閱 設定電子郵件通知.
點選 表單容器 在內容瀏覽器中點選 . 屬性瀏覽器會在左側開啟。
前往 提交 > 提交動作. 選取 傳送電子郵件. 指定下列值並點選 .
屬性 | 值 |
---|---|
從 | 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.
您可以使用 預覽選項 評估表單的外觀和行為。 您可以在預覽模式中提交表單,也可以檢查表單上套用的驗證。 例如,如果必填欄位留空時顯示錯誤。
調適型表單也提供可模擬各種裝置表單體驗的選項。 例如,iPhone、iPad和案頭。 您可以使用兩者 預覽 和 模擬器 這些選項會相互結合,以預覽不同熒幕大小之裝置的表單。
新增地址的最適化表單已就緒。 如果您已使用教學課程中提到的名稱,並在執行AEM Forms伺服器的電腦上存取表單,則表單可在 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.