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

02-create-adaptive-form-main-image

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

關於教學課程

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

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

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

步驟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 位中 ​指定。標題欄位會指定表單的顯示名稱。 標題可協助您識別Forms使AEM用者介面中的表單。
    • 名稱:在 「名 shipping-address-add-update-form 稱」欄 ​位中指定。「名稱」欄位指定表單的名稱。 在儲存庫中建立具有指定名稱的節點。 當您開始輸入標題時,系統會自動產生名稱欄位的值。 您可以變更建議的值。 名稱欄位只能包含英數字元、連字型大小和底線。 所有無效輸入都會以連字型大小取代。
  4. 點選​Create。 會建立最適化表單,並出現對話方塊以開啟表單以供編輯。 點選「開啟」,在新標籤中開啟新建立的表格。 表格隨即開啟以供編輯。 它還顯示邊欄,以根據需求自訂新建立的表格。

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

    新建——自適應形式

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

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

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

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

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

    取得檔案

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

    adaptive-form-with-headers-and-foots

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

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

  1. 將​數值框元件​拖動到自適應表單。 將它置於頁尾元件之前。 開啟元件的屬性,將元件的​Title​變更為​Customer ID,將​元素名稱​變更為​customer_ID,啟用​必要欄位​選項,啟用​使用HTML5數字輸入類型​選項,然後點選aem_6_3_forms_save

  2. 將三個文本框元件拖動到最適化表單。 將這些項目置於頁尾元件之前。 為這些文本框設定以下屬性。:

    屬性 文字方塊1
    文字方塊2
    文字方塊3
    標題 名稱
    送貨地址 狀態
    元素名稱 customer_Name
    customer_Shipping_Address customer_state
    必填欄位 已啟用 已啟用 已啟用
    允許多行
    停用 已啟用 停用
  3. 將​數值方塊​元件拖曳至頁尾元件之前。 開啟元件的屬性,設定下表所列的值,點選aem_6_3_forms_save

    屬性
    標題 郵遞區號
    元素名稱 customer_ZIPCode
    數字數量上限 6
    必填欄位 已啟用
    顯示模式類型 無模式
  4. 將​Email​元件拖曳至頁尾元件之前。 開啟元件的屬性,設定下表中所列的值,然後點選aem_6_3_forms_save

    屬性
    標題 電子郵件
    元素名稱 customer_Email
    必填欄位 已啟用
  5. 將​檔案附件​元件拖動到腳注元件之前。 開啟元件的屬性,設定下表中所列的值,然後點選aem_6_3_forms_save

    屬性
    標題 政府批准的地址證明
    元素名稱 customer_Address_Proof
    必填欄位 已啟用
  6. 將​提交按鈕​元件拖動到自適應表單。 將它置於頁尾元件之前。 開啟元件的屬性,將「元素名稱」變更為address_addition_update_submit,點選 aem_6_3_forms_save。 表單的版面配置已完成,表單外觀如下:

    adaptive-form-with-all-the-components

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

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

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

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

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

  3. 前往​Submission > Submit Action。 選擇​發送電子郵件。 指定下列值,然後點選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
    包含附件 已啟用

    您的表格已備妥。 現在,您可以預覽表單並測試功能。 如果您使用了提及教程的名稱,並訪問運行AEMForms伺服器的電腦上的表單,則表單可在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獲得。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now