Show Menu
主題×

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

本教學課程是「建立您的第 一個最適化表單 」系列的步驟。 建議依序依序依序排列,以瞭解、執行和展示完整的教學課程使用案例。

關於教學課程

最適化表單是新一代的動態回應表單。 您可以使用最適化表單來提供個人化體驗。 您也可以將最適化表單與Adobe Analytics整合,以取得使用統計資料,並將Adobe Campaign整合以進行宣傳活動管理。 如需最適化表單功能的詳細資訊,請參 閱製作最適化表單簡介
當遵循適當的程式時,建立和管理表格會更輕鬆。 在本文中,您將學習如何:
在文章結尾處,您會有類似下列的表格: form-preview-mobile.gif

步驟1:建立最適化表單

  1. 登入AEM作者例項並導覽至 Adobe Experience Manager > Forms > Forms & Documents 。 預設URL為 http://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. 點選「 建立 」並選 取「最適化表單 」。 此時會出現選擇範本的選項。 點選「 Blank 」範本以選取範本,然後點選「 Next」
  3. 出現「Add Properties(添 加屬性 )」選項。 「標 」和「 名稱 」欄位是必填欄位:
    • 標題:在「 Add new or update shipping address 標題」欄位中指定。 標題欄位會指定表單的顯示名稱。 標題可協助您識別AEM Forms使用者介面中的表單。
    • 名稱:在「名 shipping-address-add-update-form 稱」欄位中指定。 「名稱」欄位指定表單的名稱。 在儲存庫中建立具有指定名稱的節點。 當您開始輸入標題時,系統會自動產生名稱欄位的值。 您可以變更建議的值。 名稱欄位只能包含英數字元、連字型大小和底線。 所有無效輸入都會以連字型大小取代。
  4. 點選「 建立 」。 會建立最適化表單,並出現對話方塊以開啟表單以供編輯。 點選 「開啟 」,在新標籤中開啟新建立的表格。 表格隨即開啟以供編輯。 它還顯示邊欄,以根據需求自訂新建立的表格。
    有關最適化表單製作介面和可用元件的資訊,請參 閱製作最適化表單簡介

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

元件是自適應形式的構建塊。 AEM Forms提供許多元件,可擷取並顯示最適化表單中的資訊。 您可以將元件從樹狀擴 到表單。 若要瞭解可用的元件和相應的功能,請參 閱製作最適化表單簡介
  1. 將「數值方塊」元件拖曳至最適化表單。 將它置於頁尾元件之前。 開啟元件的屬性,將元件的 Title 更改為 Customer ID ,將 Element Name 更改為,啟用Required Field選項,使 customer_ID The Required Properments Use H HTML5 Input Type Option,並且TapAem_6 Forms_saveChorms3。
  2. 將三個文本框元件拖動到最適化表單。 將這些項目置於頁尾元件之前。 為這些文本框設定以下屬性。:
屬性 Text Box 1 Text Box 2 文字方塊3
標題 名稱 送貨地址 狀態
元素名稱 customer_name customer_Shipping_Address customer_state
必填欄位 已啟用 已啟用 已啟用
允許多行 停用 已啟用 停用
  1. 將數值 框元件拖曳到腳注元件之前。 開啟元件的屬性,設定下表「點選
    屬性
    標題
    郵遞區號
    元素名稱
    customer_ZIPCode
    數字數量上限
    6
    必填欄位
    已啟用
    顯示模式類型
    無模式
  2. 拖曳 Email 元件至頁尾元件之前。 開啟元件的屬性、設定下表中所列的值,然後點選
    屬性
    標題
    電子郵件
    元素名稱
    customer_Email
    必填欄位
    已啟用
  3. 在腳注組 件之前拖動「檔案附件 」元件。 開啟元件的屬性、設定下表中所列的值,然後點選
屬性
標題 政府批准的地址證明
元素名稱 customer_Address_Proof
必填欄位 已啟用
  1. 將「提 交按鈕 」元件拖曳至最適化表單。 將它置於頁尾元件之前。 開啟元件的屬性,將「元素名稱」變 更為address_addition_update_submit ,點 。 表單的版面配置已完成,表單外觀如下:

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

當使用者點選最適化表單上的「提交」按鈕時,會觸發提交動作。 您可以使用提交操作將表單資料保存到本地儲存庫、將表單資料發送到REST端點、以電子郵件形式發送表單資料等。 最適化表單提供一些現成可用的提交動作。 如需詳細資訊,請參 閱設定提交動作
使用下列步驟,您可以設定表單的電子郵件提交動作和示範提交動作:
  1. 配置電子郵件伺服器。 如需詳細資訊,請參 閱設定電子郵件通知
  2. 在「內 容」瀏覽器中點選 「表單容器」,然後點 。 屬性瀏覽器會在左側開啟。
  3. 前往「提 >提 交動作」 。 選擇「 傳送電子郵件 」。 指定下列值並點
    屬性
    ${customer_Email}
    主旨
    確認:您已在We.Retail網站上新增送貨地址。
    電子郵件範本
    ${customer_Name} 好,以下地址會新增為您帳戶的運送地址:
    ${customer_Name} , ${customer_Shipping_Address} , ${customer_State} 問候 ${customer_ZIPCode}
    ,我們零售
    包含附件
    已啟用
    您的表格已備妥。 現在,您可以預覽表單並測試功能。 如果您使用了教學課程中提及的名稱,並在執行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. 填寫表單欄位並點選「送 出」 。 表單已送出,您會重新導向至預設的「感 謝您 」頁面。 您也可以指定自訂的感謝頁面。 如需詳細資訊,請參 閱設定重新導向頁面
添加地址的最適化表單已就緒。 如果您使用了教學課程中提及的名稱,並在執行AEM Forms伺服器的機器上存取表格,則表格可在http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html 取得