本教程是建立第一個自適應表單系列中的一個步驟。 建議依序依序依序排列,以瞭解、執行和展示完整的教學課程使用案例。
最適化表單是新一代的動態回應表單。 您可以使用最適化表單來提供個人化體驗。 您也可以將最適化表單與Adobe Analytics整合,以取得使用統計資料,而Adobe Campaign整合,以管理宣傳活動。 有關最適化表單功能的詳細資訊,請參閱製作最適化表單簡介。
當遵循適當的程式時,建立和管理表格會更輕鬆。 在本文中,您將學習如何:
在文章結尾處,您會有類似下列的表格:
[ ](assets/form-preview-mobile.gif)
登入作AEM者例項並導覽至Adobe Experience Manager > Forms > Forms與檔案。 預設URL為http://localhost:4502/aem/forms.html/content/dam/formsanddocuments。
點選「建立」並選取「最適化表單」。 此時會出現選擇範本的選項。 點選Blank範本以選取範本,然後點選Next。
將顯示添加屬性的選項。 Title和Name欄位是必填欄位:
Add new or update shipping address
題」欄位中指定。標題欄位會指定表單的顯示名稱。 標題可協助您識別AEM Forms使用者介面中的表單。shipping-address-add-update-form
稱」欄位中指定。「名稱」欄位指定表單的名稱。 在儲存庫中建立具有指定名稱的節點。 當您開始輸入標題時,系統會自動產生名稱欄位的值。 您可以變更建議的值。 名稱欄位只能包含英數字元、連字型大小和底線。 所有無效輸入都會以連字型大小取代。點選Create。 會建立最適化表單,並出現對話方塊以開啟表單以供編輯。 點選「開啟」,在新標籤中開啟新建立的表格。 表格隨即開啟以供編輯。 它還顯示邊欄,以根據需求自訂新建立的表格。
有關最適化表單製作介面和可用元件的資訊,請參閱製作最適化表單簡介。
AEM Forms提供許多元件,以顯示自適應表單的資訊。 頁首和頁尾元件有助於為表單提供一致的外觀和感覺。 標題通常包含公司的標誌、表單標題和摘要。 頁尾通常包含版權資訊和其他頁面的連結。
點選 >
。 元件瀏覽器隨即開啟。 將Header元件從元件瀏覽器拖曳至最適化表單。
點選Logo。 工具列隨即出現。 點選工具列上的,輸入We.Retail,然後點選
。
點選「影像」。 工具列隨即出現。 點選。 屬性瀏覽器會在畫面左側開啟。 瀏 覽及上傳標誌影像。點選
。 影像會出現在頁首上。
如果您沒有標誌,可以點選「取得檔案」下載本文中使用的標誌。
將Footer元件從拖曳至最適化表單。 在此階段,表單如下所示:
元件是自適應形式的構建塊。 AEM Forms提供許多元件,以自適應形式擷取和顯示資訊。 您可以將元件從拖動到表單中。 要瞭解可用的元件和相應的功能,請參閱製作最適化表單的簡介。
Customer ID
,將元素名稱變更為customer_ID
,啟用必要欄位選項,啟用使用HTML5數字輸入類型選項,然後點選屬性 | 文字方塊1 |
文字方塊2 |
文字方塊3 |
標題 | 名稱 |
送貨地址 | 狀態 |
元素名稱 | customer_Name |
customer_Shipping_Address | customer_state |
必填欄位 | 已啟用 | 已啟用 | 已啟用 |
允許多行 |
停用 | 已啟用 | 停用 |
將數值方塊元件拖曳至頁尾元件之前。 開啟元件的屬性,設定下表所列的值,點選。
屬性 | 值 |
---|---|
標題 | 郵遞區號 |
元素名稱 | customer_ZIPCode |
數字數量上限 | 6 |
必填欄位 | 已啟用 |
顯示模式類型 | 無模式 |
將Email元件拖曳至頁尾元件之前。 開啟元件的屬性,設定下表中所列的值,然後點選。
屬性 | 值 |
---|---|
標題 | 電子郵件 |
元素名稱 | customer_Email |
必填欄位 | 已啟用 |
將檔案附件元件拖動到腳注元件之前。 開啟元件的屬性,設定下表中所列的值,然後點選。
屬性 | 值 |
標題 | 政府批准的地址證明 |
元素名稱 | customer_Address_Proof |
必填欄位 | 已啟用 |
將提交按鈕元件拖動到自適應表單。 將它置於頁尾元件之前。 開啟元件的屬性,將「元素名稱」變更為address_addition_update_submit,點選。 表單的版面配置已完成,表單外觀如下:
當使用者點選最適化表單上的「提交」按鈕時,會觸發提交動作。 您可以使用提交操作將表單資料保存到本地儲存庫、將表單資料發送到REST端點、以電子郵件形式發送表單資料等。 最適化表單提供一些現成可用的提交動作。 如需詳細資訊,請參閱設定提交動作。
使用下列步驟,您可以設定表單的電子郵件提交動作和示範提交動作:
配置電子郵件伺服器。 如需詳細資訊,請參閱設定電子郵件通知。
/content/help/en/experience-manager/6-4/sites-administering/notification.html
在「內容」瀏覽器中點選「表單容器」,然後點選「」。 屬性瀏覽器會在左側開啟。
前往Submission > Submit Action。 選擇發送電子郵件。 指定下列值,然後點選。
屬性 | 值 |
---|---|
從 | 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和Desktop。 您可搭配使用預覽和模擬器選項,以預覽不同螢幕大小裝置的表格。
添加地址的最適化表單已就緒。 如果您使用了教學課程中提及的名稱,並在運行AEM Forms伺服器的電腦上訪問表格,則表格位於http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html。