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

概要

AEM Forms を使用すると、フォーム開発者は AEM Sites ページまたは AEM の外側にホストされた Web ページにアダプティブフォームおよびインタラクティブ通信をシームレスに埋め込むことができます。埋め込まれたアダプティブフォームおよびインタラクティブ通信ではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームの記入および送信を行えます。これにより、ユーザーは Web ページのその他のエレメントとのコンテキストを保ったまま、同時にフォームまたはインタラクティブ通信の操作を行うことができます。

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

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

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

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

前提条件

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

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

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

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

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

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

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

    メモ

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

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

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

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

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

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

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

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

    • 高さ：コンテナの高さを指定します。自動でコンテナのサイズを調整するには、空白のままにします。

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

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

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

ここでは、AEM サイトページに埋め込まれたアセット（アダプティブフォームまたはインタラクティブ通信）を発行する際における、次のようなシナリオを考えてみます。

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

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

AEM サイトページには、AEM Forms コンテナ内のアダプティブフォームおよびインタラクティブ通信への参照情報が保存されます。したがって、元のアダプティブフォームおよびインタラクティブ通信で構成されているすべての構成や特性（テーマ、スタイル、送信アクションなど）は、埋め込まれた形で保持されます。

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

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

元のアダプティブフォームまたはインタラクティブ通信に加えた変更は、埋め込まれたフォームに自動的に反映されます。ただし、発行済みページに変更内容を反映するには、アダプティブフォーム、インタラクティブ通信またはサイトページを再発行する必要があります。

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

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

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

このページ