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