教學課程:發佈最適化表單

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

最適化表單準備就緒後,您就可以發佈表單,讓使用者也能使用。 使用者可在任何裝置和網際網路瀏覽器上開啟已發佈的表格。 發佈最適化表單時,表單和相關內容會從作者例項複製AEM至發佈AEM例項。 表單可透過發佈例項提供給使用者使用。

您有下列方法可發佈最適化表單:

開始之前

  • 設定AEM Forms發佈例項:發佈例項是以發佈模式執行的AEM公開對應例項。 Forms 在生產環境中,發佈實例不在組織的防火牆外。
  • 設定複製和反向複製:複製會將內容從作者實例複製到發佈實例,並將用戶輸入(例如,表單輸入)從發佈實例返回作者實例。

將最適化表單發佈AEM為頁面

當最適化表單發佈為頁AEM面時,整個網頁只包含已發佈表單。 您可以使用最適化表單的URL,從其他網頁連結表單。 要將​shipping-address-add-update-form​最適化表單發佈為AEM頁面:

  1. 登入AEMForms作者例項,並在Forms UI中找到shipping-address-add-update-form自適AEM應表單。
    https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. 選擇shipping-address-add-update-form最適化表單,然後點選​Publish。 將顯示包含與最適化表單相關的資產的對話框。 點選​Publish。 最適化表單會發佈,並出現成功對話方塊。
  3. 在發佈例項上開啟表格。 此表格可供一般使用者填寫及提交。
    https://localhost:4503/content/forms/af/shipping-address-add-update-form.html

將最適化表單內嵌在AEM Sites頁面

AEMForms可讓表單開發人員在AEMSites頁面中順暢地內嵌最適化表單。 內嵌的最適化表單功能完整,使用者可填寫並提交表單,而不需離開頁面。 它可協助使用者在網頁上保留其他元素的內容,並同時與表單互動。

AEM Forms提供元件AEMForms容器,將最適化表格嵌入AEMSites頁面。 依預設,元件在Sites容器AEM中不可見。 執行以下步驟以啟AEM用Forms容器元件並將最適化表單嵌入AEMSites頁面:

  1. 在We.Retail網站中建立並開啟頁面以進行編輯。 例如,https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html。 最適化表單已內嵌至Sites頁面。

    您也可以將最適化表單內嵌在現有的We.Retail Site’s頁面中。 例如,ABOUT US頁https://localhost:4502/editor.html/content/we-retail/us/en/about-us.html。 它可為您節省建立頁面的時間。 以下步驟使用新建的頁面。

    We.Retail網站隨附AEM。 如果您未安裝We.Retail網站,請參閱We.Retail Reference Implementation安裝網站。

  2. 點選properties頁面資訊,並在新建立的We.Retail網站頁面中選取「編輯範本」(Edit Template)選項。​頁面的範本會在瀏覽器的新標籤中開啟。

  3. 在​版面容器​方塊內點選並點選feedmanagement。 在​允許的元件​標籤中,展開​一般 accordion,選擇​AEM Form​選項,然後點選save_icon。 頁面AEM的Forms容器元件已啟用。

  4. 開啟包含在步AEM驟1中開啟之Sites頁面的瀏覽器標籤。 點選「拖曳元件至此處」方塊並點選「+」。 在「插入 新元件」 方塊中,點 選「表AEM單」。將​AEM Forms容器​元件添加到頁面中。

  5. 點選​AEM Forms容器​元件並點選configure-icon。 此時將出現一個屬性為AEMForms容器的對話框。 在​資產路徑​欄位中,瀏覽並選取shipping-address-add-update-form最適化表單。 點選save_icon。 最適化表單內嵌在頁面中。

  6. 同時發佈最適化表單和Sites頁面。 以下是需要考慮的幾點:

    • 如果您首次AEM發佈Sites頁面並且該頁面包含內嵌表單,請發佈Sites頁面和內嵌表單。

    • 如果您只修改發佈網站頁面中的內嵌表單,請發佈原始表單,而變更會反映在發佈的網站頁面中。 發佈的網站頁面包含表單的參考,不需要重新發佈頁面。

    • 如果您修改Sites頁面和內嵌表單,請重新發佈Sites頁面和表單。

      embed-in-aem-sites
      已在Sites頁面中添加AEM「發運和開單地址更改」表單。

將最適化表單內嵌於外部網頁

您可以在外部網頁中插入幾行JavaScript,將適AEM應性表單AEM內嵌至外部網頁(非外部網頁)。 JavaScript程式碼會傳送HTTP要求至AEMForms伺服器,以取得最適化表單和相關資源,並將最適化表單新增至網頁。 如需詳細步驟,請參閱將最適化表單內嵌至外部網頁

本頁內容

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