AEM Sites ページへのアダプティブフォームまたはインタラクティブ通信の埋め込み embed-an-adaptive-form-or-interactive-communication-in-aem-sites-page
アダプティブフォームの新規作成または AEM Sites ページへのアダプティブフォームの追加には、最新の拡張可能なデータキャプチャコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。
概要 overview
AEM Forms を使用すると、フォーム開発者は AEM Sites ページまたは AEM の外側にホストされた Web ページにアダプティブフォームおよびインタラクティブ通信をシームレスに埋め込むことができます。組み込まれたアダプティブフォームおよびインタラクティブ通信ではすべての機能を使用できるため、ユーザーは、ページから移動せずにフォームの記入や送信ができます。これにより、ユーザーは web ページのその他の要素とのコンテキストを保ったまま、同時にフォームやインタラクティブ通信の操作を行うことができます。
外部 web ページへのアダプティブフォームの埋め込みについて詳しくは、外部 web ページへのアダプティブフォームの埋め込みを参照してください。
AEM Sites ページでは、アダプティブフォームやインタラクティブ通信は、以下のアイテムを使用することで追加できます。
-
AEM Form コンテナコンポーネント
AEM Forms では、サイトページに追加できるコンポーネントを提供します。AEM Forms コンテナコンポーネントを使用することで、アダプティブフォームやインタラクティブ通信を埋め込むことが可能になります。 -
アセットブラウザー
作成したフォームやインタラクティブ通信は、すべて「アセット」の下に表示されます。フォームは、アセットとしてページ上にドラッグ＆ドロップすることができます。
前提条件 prerequisites
編集可能なテンプレートを使用した AEM Sites ページにアダプティブフォームやインタラクティブ通信を埋め込むには、AEM Form コンポーネントが関連するテンプレートで許可されたコンポーネントとして設定されていることを確認します。詳しくは、ページテンプレートの作成 のポリシーおよびプロパティ（レイアウトコンテナ）の節を参照してください。
Sites ページが静的テンプレートを使用している場合は、それを Sites ページの段落システムから設定する必要があります。詳しくは、デザインモードでのコンポーネントの設定を参照してください。
アダプティブフォームやインタラクティブ通信の埋め込み af-component
AEM Forms コンテナコンポーネントを使用してアダプティブフォームやインタラクティブ通信を組み込むには、次の手順を実行します。
-
アダプティブフォームやインタラクティブ通信を組み込む AEM Sites ページを、編集モードで開きます。
-
コンポーネントブラウザーパネルから、そのページ上に AEM Forms コンテナコンポーネントをドラッグ＆ドロップします。
または、アセットブラウザーでアダプティブフォームまたはインタラクティブ通信を検索して、Sites ページにドラッグ＆ドロップします。これにより、AEM Forms コンテナにフォームが埋め込まれます。
note note NOTE 1 つのページ上の複数の AEM Forms コンテナコンポーネントはサポートされていません。 -
Sites ページに埋め込まれた AEM Forms コンテナコンポーネントを選択し、アクションバーの
-
AEM Forms コンテナを編集ダイアログで、次の設定を行います。
-
アセットのタイプ： 埋め込むアセットのタイプを選択します。オプションはアダプティブフォームとインタラクティブ通信です。
-
アセットパス：埋め込むアダプティブフォームまたはインタラクティブ通信を参照して選択します。また、アセットブラウザーからドロップすると、自動的に入力されます。
-
（アダプティブフォームのみ）送信後処理：フォームの送信時にトリガーするアクションを選択します。お礼のメッセージを表示するため、「ありがとうございます」ページを設けることができます。
- 「ありがとうございます」メッセージ：フォーム送信時に表示するメッセージをリッチテキストエディターで書き込みます。このオプションは、「ありがとうございます」メッセージの表示が有効な場合にのみ選択できます。
- 「ありがとうございます」ページ： フォームの送信時に表示するページを参照して選択します。このオプションは、「ありがとうございます」ページの表示が有効な場合にのみ選択できます。
- 送信時にページを更新：有効にすると、アダプティブフォームが埋め込まれたページを更新して「ありがとうございます」ページが表示されます。この機能が無効な場合は、AEM Forms コンテナ内のアダプティブフォームの代わりに「ありがとうございます」ページが（ページの更新を待たずに）表示されます。このオプションは、「ありがとうございます」ページの表示が有効な場合にのみ選択できます。
-
テーマ：アダプティブフォームまたはインタラクティブ通信のコンポーネントのスタイルを定義するテーマを選択します。スタイル設定には、フォントスタイル、背景色、サイズ、配置など、外観のプロパティが含まれます。
-
高さ：コンテナの高さを指定します。コンテナのサイズを自動的に変更するには、空白のままにします。
-
CSS クライアントライブラリ：CSS クライアントライブラリへのパスを指定します。
-
-
設定を保存します。これで、アダプティブフォームまたはインタラクティブ通信がページに埋め込まれました。
埋め込まれたアダプティブフォームおよびインタラクティブ通信を発行する publishing-embedded-adaptive-form-and-interactive-communication
ここでは、AEM Sites ページに埋め込まれたアセット（アダプティブフォームまたはインタラクティブ通信）を公開するための次のシナリオを考えてみましょう。
- 初めて AEM Sites ページを公開する際に、アダプティブフォームやインタラクティブ通信が埋め込まれている場合は、Sites ページに加え、埋め込みアセットも公開します。
- 発行済みサイトページに埋め込まれたアダプティブフォームまたはインタラクティブ通信のみを変更した場合は、元のアセットを発行します。変更内容は、発行されたサイトページに反映されます。公開されたサイトページにはアセットへの参照情報が含まれているため、ページを再公開する必要はありません。
- Sites ページに加え、埋め込みのアダプティブフォームやインタラクティブ通信を変更した場合は、Sites ページと埋め込みアセットを再公開します。
埋め込まれたアダプティブフォームおよびインタラクティブ通信を変更する modifying-embedded-adaptive-form-and-interactive-communication
AEM Sites ページには、AEM Forms コンテナ内のアダプティブフォームおよびインタラクティブ通信への参照情報が保持されます。したがって、元のアダプティブフォームおよびインタラクティブ通信で設定されているすべての設定や特性（テーマ、スタイル、送信アクションなど）は、埋め込まれたアダプティブフォームとインタラクティブ通信に保持されます。
埋め込まれたアダプティブフォームおよびインタラクティブ通信の設定やプロパティを変更するには、以下のいずれかの操作を行います。
- アダプティブフォームまたはインタラクティブ通信の元のフォームをそれぞれエディターで開き、修正します。
- 編集モードで開いた Site ページ内からアダプティブフォームまたはインタラクティブ通信を選択し、「新しいウィンドウで編集」を選択します。元のフォームは、修正可能な編集モードで開きます。
注意点とベストプラクティス considerations-and-best-practices
AEM Sites ページにアダプティブフォームを埋め込む際は、以下の点に留意してください。
- 元のフォームにあったヘッダーとフッターは、埋め込まれたフォームには含まれません。
- ユーザードラフトと埋め込みフォームの送信はサポートされており、フォームポータル上の「下書き」タブや「送信済みフォーム」タブに表示されます。
- 元のフォームに設定された送信アクションは、埋め込まれたフォームにも保持されます。
- 元のフォームに構築されたのエクスペリエンスのターゲティングと A/B テストは、埋め込まれたフォームでは動作しません。ただし、Sites ページ上でエクスペリエンスのターゲット設定を使用すると、ユーザープロファイルに基づいて様々なフォームを表示できます。
- 元のフォームに Adobe Analytics が設定されている場合、埋め込まれたフォームの分析データは Adobe Analytics でキャプチャされます。ただし、フォームの分析レポートでは使用できません。