チュートリアル:アダプティブフォームを発行

これは、「最初のアダプティブフォームを作成する」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。

アダプティブフォームの準備が整ったら、フォームを発行してエンドユーザーが利用できるようにすることができます。 エンドユーザーは、発行されたフォームを任意のデバイスやインターネットブラウザーで開くことができます。 アダプティブフォームが発行されると、フォームと関連するコンテンツがAEM作成者インスタンスからAEM発行インスタンスにコピーされます。 フォームは、発行インスタンスを通じてエンドユーザーが使用できるようになります。

アダプティブフォームを発行するには、次の方法があります。

事前準備

  • AEM Forms発行インスタンスを設定します。発行インスタンスは、発行モードで Forms 実行されるAEMの公開インスタンスです。実稼働環境では、発行インスタンスは組織のファイアウォールの外にあります。
  • レプリケーションと逆複製の設定:複製は、作成者インスタンスのコンテンツを発行インスタンスにコピーし、発行インスタンスのユーザー入力(フォーム入力など)を作成者インスタンスに返します。

アダプティブフォームをAEMページとして発行

アダプティブフォームがAEMページとして発行される場合、Webページ全体には発行済みのフォームのみが含まれます。 アダプティブフォームのURLを使用して、別のWebページからリンクすることができます。 shipping-address-add-update-form​アダプティブフォームをAEMページとして発行するには:

  1. AEM Forms作成者インスタンスにログインし、AEM Forms UIでshipping-address-add-update-formアダプティブフォームを探します。
    https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. アダプティブフォームshipping-address-add-update-formを選択し、「発行」をタップします。 アダプティブフォームに関連するアセットを含むダイアログが表示されます。 「発行」をタップします。アダプティブフォームが発行され、成功ダイアログが表示されます。
  3. 発行インスタンスでフォームを開きます。 このフォームは、エンドユーザーが入力および送信できるようにします。
    https://localhost:4503/content/forms/af/shipping-address-add-update-form.html

アダプティブフォームをAEM Sitesページに埋め込む

AEM Formsを使用すると、フォーム開発者はアダプティブフォームをAEM Sitesページにシームレスに埋め込むことができます。 埋め込まれたアダプティブフォームではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームを記入および送信できます。Webページ上の他の要素のコンテキストに留まり、同時にフォームを操作するのに役立ちます。

AEM Formsは、アダプティブフォームをAEM Sitesページに埋め込むためのコンポーネントAEM Formsコンテナを提供します。 デフォルトでは、コンポーネントはAEM Sitesコンテナに表示されません。 次の手順を実行して、AEM Formsコンテナコンポーネントを有効にし、アダプティブフォームをAEM Sitesページに埋め込みます。

  1. Web.Retailサイトで、編集するページを作成して開きます。 例:https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html。 アダプティブフォームはSitesページに埋め込まれます。

    アダプティブフォームは、既存のWeb.Retail Site’sページに埋め込むこともできます。 例えば、米国についてのページhttps://localhost:4502/editor.html/content/we-retail/us/en/about-us.htmlです。 ページを作成する時間を節約できます。 次の手順では、新しく作成されたページを使用します。

    We.RetailサイトはAEMに付属して出荷されます。 We.Retailサイトがインストールされていない場合は、We.Retail Reference Implementationによるサイトのインストールを参照してください。

  2. プロパティページ情報をタップし、新しく作成したWeb.Retailサイトページで「テンプレートを編集」オプションを選択します。 ページのテンプレートがブラウザーの新しいタブに開きます。

  3. レイアウトコンテナ​ボックス内をタップし、feedmanagementをタップします。 「許可されているコンポーネント」タブで、一般​アコーディオンを展開し、AEMフォーム​オプションを選択して、save_iconをタップします。 AEM Formsコンテナコンポーネントがページに対して有効になっています。

  4. 手順1で開いたAEM Sitesページを含むブラウザタブを開きます。 「コンポーネントをここにドラッグ」ボックスをタップし、+をタップします。新しいコンポー ネントを 挿入」ボックスで、「 AEMフォーム」をタップします。AEM Formsコンテナ​コンポーネントがページに追加されます。

  5. AEM Formsコンテナ​コンポーネントをタップし、configure-iconをタップします。 AEM Formsコンテナのプロパティを持つダイアログボックスが表示されます。 「アセットパス」フィールドで、「shipping-address-add-update-form」アダプティブフォームを参照して選択します。 save_iconをタップします。 アダプティブフォームが ページに埋め込まれました。

  6. アダプティブフォームとSitesページの両方を発行します。 次の点について考慮してください。

    • AEM Sitesページを初めて発行し、埋め込みフォームが含まれている場合は、Sitesページと埋め込みフォームを発行します。

    • 発行済みサイトページに埋め込まれたフォームのみを変更した場合は、元のフォームを発行し、変更内容が発行済みサイトページに反映されます。 発行されたサイトページにはフォームへの参照情報が含まれているため、ページを再発行する必要はありません。

    • Sitesページと埋め込みフォームを変更した場合は、Sitesページとフォームを再発行します。

      aemサイトに埋め込む
      配送先住所と請求先住所の変更フォームがAEM Sitesページに追加されました。

アダプティブフォームを外部Webページに埋め込む

アダプティブフォームは、外部WebページにJavaScriptの数行を挿入することで、外部Webページ(AEMの外部でホストされているAEM以外のWebページ)に埋め込むことができます。 JavaScriptコードは、アダプティブフォームと関連リソースのHTTP要求をAEM Formsサーバーに送信し、アダプティブフォームをWebページに追加します。 詳細な手順については、「アダプティブフォームを外部Webページに埋め込む」を参照してください。

このページ

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