AEM Sitesシングルページアプリケーションにアダプティブフォームまたはインタラクティブ通信を埋め込む

概要

AEM Formsを使用すると、フォーム開発者はアダプティブフォームとインタラクティブ通信をAEM Sitesシングルページアプリケーション(SPA)にシームレスに埋め込むことができます。 埋め込まれたアダプティブフォームとインタラクティブ通信は完全に機能し、ユーザーはページを離れることなくフォームに入力して送信できます。 これにより、ユーザーはWebページ上の他の要素のコンテキストを維持し、アダプティブフォームやインタラクティブ通信と同時にやり取りすることができます。

AEM Sitesシングルページアプリケーションでは、AEM Forms SPAコンテナコンポーネント を使用して、アダプティブフォームまたはインタラクティブ通信を追加できます。 AEM Sites SPA用のAEM Formsコンポーネントで、サイトページに追加できます。

SPA AEM Sites以外でのアダプティブフォームの埋め込みについて詳しくは、「 AEM Sitesページにアダプティブフォームまたはインタラクティブ通信を埋め込む」を参照してください。🔗

前提条件

AEM Forms SPAコンテナコンポーネントを使用して、AEMサイトSPAにアダプティブフォームまたはインタラクティブ通信を埋め込むには、以下がインストールされていることを確認します。

AEM Forms SPA Containerコンポーネントのインストール

次の手順を実行して、AEM Forms SPAコンテナコンポーネントをインストールします。

  1. SPA 用のAEM Formsコンポーネントのクローンを作成するか、ダウンロードします。

  2. SPA用のAEM Formsコンポーネントをインストールします。 コンポーネントのインストール手順は、 README.mdファイルに記載されています。

    このコンポーネントには、SPAコンテナコンポーネントをReactベースのSPAプロジェクトと統合するために使用できる、サンプルのReactコンポーネントが含まれています。

  3. ReactベースのSPAプロジェクトのクローンまたはダウンロードを行います。

  4. README.mdファイルの手順を使用して、SPAコンテナコンポーネントをReactベースのSPAプロジェクトに統合します。

    AEM Forms SPA Containerコンポーネントをインストールし、そのコンポーネントをReactベースのSPAプロジェクトに統合した後、AEM Sitesページにアダプティブフォームとインタラクティブ通信を埋め込むことができます。

アダプティブフォームまたはインタラクティブ通信を埋め込む

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

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

  2. 次のいずれかのオプションを使用して、SPA用AEM Form​コンポーネントをページに挿入します。

    • Sitesページのレイアウトコンテナをタップし、+​をタップして、SPA用AEMフォーム​コンポーネントを選択します。

    • コンポーネントブラウザーパネルから、AEM Form for SPA​コンポーネントをページにドラッグ&ドロップします。

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

    メモ

    1つのページでの複数のAEM Forms SPA Containerコンポーネントのレンダリングはサポートされていません。 1つのページに複数のAEM Forms SPAコンテナを設定できますが、一度にレンダリングされるコンポーネントは1つだけです。 不一致を避けるために、1つのページに1つのコンポーネントのみが表示されるようにします。

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

  4. AEM Formsコンテナを編集​ダイアログで、次の情報を指定します。

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

    • アセットパス:埋め込むアダプティブフォームまたはインタラクティブ通信を参照して選択します。アダプティブフォームまたはインタラクティブ通信がアセットブラウザーを使用して挿入されると、このフィールドに値が自動入力されます。

    • チャネル （インタラクティブ通信のみ）:埋め込むインタラクティブチャネルのタイプを選択します。オプションは​Webチャネル​と​印刷チャネル​です。

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

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

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

AEM Sitesページで埋め込みアセット（アダプティブフォームまたはインタラクティブ通信）を発行する場合、以下のシナリオを考えてみます。

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

埋め込まれたアダプティブフォームとインタラクティブ通信の変更

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

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

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

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

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

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

このページ