AEM Sites ページへのアダプティブフォームまたはインタラクティブ通信の埋め込み

概要

AEM Forms を使用すると、フォーム開発者は AEM Sites ページまたは AEM の外側にホストされた Web ページにアダプティブフォームおよびインタラクティブ通信をシームレスに埋め込むことができます。埋め込まれたアダプティブフォームとインタラクティブ通信は完全に機能し、ユーザーはページを離れることなくフォームに入力して送信できます。 これにより、ユーザーは Web ページ上の他の要素のコンテキストにとどまり、同時にフォームやインタラクティブ通信を操作することができます。

外部 web ページへのアダプティブフォームの埋め込みについて詳しくは、外部 web ページへのアダプティブフォームの埋め込みを参照してください。

AEM Sites ページでは、アダプティブフォームやインタラクティブ通信は、以下のアイテムを使用することで追加できます。

• AEM Form コンテナコンポーネント
  AEM Forms では、サイトページに追加できるコンポーネントを提供します。AEM Forms コンテナコンポーネントを使用することで、アダプティブフォームやインタラクティブ通信を埋め込むことが可能になります。

• アセットブラウザー
  作成したフォームやインタラクティブ通信は、すべて「アセット」の下に表示されます。フォームは、アセットとしてページ上にドラッグ＆ドロップすることができます。

前提条件

編集可能なテンプレートを使用した AEM Sites ページにアダプティブフォームやインタラクティブ通信を埋め込むには、AEM Form コンポーネントが関連するテンプレートで許可されたコンポーネントとして設定されていることを確認します。詳しくは、「ページテンプレートの作成」の「ポリシーとプロパティ（レイアウトコンテナ）」を参照してください。

サイトページがスタティックテンプレートを使用している場合は、それをサイトページの段落システムから設定する必要があります。詳しくは、デザインモードでのコンポーネントの設定を参照してください。

アダプティブフォームやインタラクティブ通信の埋め込み

AEM Formsコンテナコンポーネントを使用してアダプティブフォームまたはインタラクティブ通信を埋め込むには：

1. アダプティブフォームまたはインタラクティブ通信を埋め込むAEMサイトページを編集モードで開きます。

2. コンポーネントブラウザーパネルから、そのページ上に AEM Forms コンテナコンポーネントをドラッグ＆ドロップします。

   または、Assets ブラウザーでアダプティブフォームやインタラクティブ通信を検索し、サイトページにドラッグ&ドロップすることもできます。 これにより、AEM Forms コンテナにフォームが埋め込まれます。

   メモ

   1 つのページ上の複数の AEM Forms コンテナコンポーネントはサポートされていません。

3. サイトページに埋め込まれた AEM Forms コンテナコンポーネントをタップし、アクションバーの をタップします。AEM Forms コンテナを編集​ダイアログが開きます。

4. AEM Forms コンテナを編集ダイアログで、次の設定を行います。

   • アセットのタイプ：​埋め込むアセットのタイプを選択します。オプションはアダプティブフォームとインタラクティブ通信です。

   • アセットパス：埋め込むアダプティブフォームまたはインタラクティブ通信を参照して選択します。また、アセットブラウザーからドロップすると、自動的に入力されます。

   • （アダプティブフォームのみ）送信後処理：フォームの送信時にトリガーするアクションを選択します。お礼のメッセージを表示するため、「ありがとうございます」ページを設けることができます。

     • 「ありがとうございます」メッセージ：フォーム送信時に表示するメッセージをリッチテキストエディターで書き込みます。このオプションは、「ありがとうございます」メッセージの表示が有効な場合にのみ選択できます。
     • 「ありがとうございます」ページ： フォームの送信時に表示するページを参照して選択します。このオプションは、「ありがとうございます」ページの表示が有効な場合にのみ選択できます。
     • 送信時にページを更新：アダプティブフォームが埋め込まれたページを更新して「ありがとうございます」ページを表示します。この機能が無効な場合は、AEM Forms コンテナ内のアダプティブフォームの代わりに「ありがとうございます」ページが（ページの更新を待たずに）表示されます。このオプションは、「ありがとうございます」ページの表示が有効な場合にのみ選択できます。

   • テーマ：アダプティブフォームまたはインタラクティブ通信のコンポーネントのスタイルを定義するテーマを選択します。スタイル設定には、フォントスタイル、背景色、サイズ、配置など、外観のプロパティが含まれます。

   • 高さ:コンテナの高さを指定します。 コンテナのサイズを自動的に変更する場合は、空白のままにします。

   • CSS クライアントライブラリ:CSS クライアントライブラリへのパスを指定します。

5. 設定を保存します。これで、アダプティブフォームまたはインタラクティブ通信がページに埋め込まれました。

埋め込まれたアダプティブフォームおよびインタラクティブ通信を発行する

AEMサイトページで埋め込みアセット（アダプティブフォームまたはインタラクティブ通信）を公開する際の以下のシナリオを考えてみましょう。

• AEMサイトページを初めて公開する場合で、アダプティブフォームやインタラクティブ通信が埋め込まれている場合は、サイトページと埋め込みアセットを公開します。
• 発行済みサイトページに埋め込まれたアダプティブフォームまたはインタラクティブ通信のみを変更した場合は、元のアセットを発行します。変更内容は、発行されたサイトページに反映されます。公開されたサイトページにはアセットへの参照情報が含まれているため、ページを再公開する必要はありません。
• サイトページと、埋め込まれたアダプティブフォームまたはインタラクティブ通信を変更した場合は、サイトページと埋め込まれたアセットを再公開します。

埋め込まれたアダプティブフォームおよびインタラクティブ通信を変更する

AEMのサイトページには、AEM Formsコンテナ内のアダプティブフォームとインタラクティブ通信への参照が保持されます。 したがって、元のアダプティブフォームとインタラクティブ通信で設定されたテーマ、スタイル、送信アクションなどの設定とプロパティは、埋め込まれたアダプティブフォームとインタラクティブ通信でも保持されます。

埋め込まれたアダプティブフォームとインタラクティブ通信の設定やプロパティを変更するには、次のいずれかの操作を行います。

• 元のフォームをアダプティブフォームまたはインタラクティブ通信の各エディターで開き、変更します。
• 編集モードで開いたサイトページ内からアダプティブフォームまたはインタラクティブ通信をタップし、続けて「新しいウィンドウで編集」をタップします。元のフォームは、修正可能な編集モードで開きます。

注意点とベストプラクティス

AEMサイトページにアダプティブフォームを埋め込む際は、次の点に注意してください。

• 元のフォームのヘッダーとフッターは、埋め込まれたフォームには含まれません。
• ユーザードラフトと埋め込みフォームの送信はサポートされ、フォームポータルの「ドラフト」タブと「送信済みのForms 」タブに表示されます。
• 元のフォームに設定された送信アクションは、埋め込まれたフォームでも保持されます。
• 元のフォームに設定されたエクスペリエンスのターゲット設定と A/B テストは、埋め込まれたフォームでは機能しません。 ただし、サイトページでエクスペリエンスのターゲット設定を使用して、ユーザープロファイルに基づいて異なるフォームを表示することができます。
• 元のフォームに Adobe Analytics が設定されている場合、埋め込まれたフォームの分析データは Adobe Analytics でキャプチャされます。ただし、フォームの分析レポートでは使用できません。

Business.Adobe.com リソース

Ecommerce Integrations Customer Communications Embedded Charts Mobile Forms Document Generation Content Management System