AEM Sites ページへのアダプティブフォームまたはインタラクティブ通信の埋め込み embed-an-adaptive-form-or-interactive-communication-in-aem-sites-page

CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

概要 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コンテナコンポーネントを使用してアダプティブフォームまたはインタラクティブ通信を埋め込むには:

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

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

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

    note note
    NOTE
    1 つのページ上の複数の AEM Forms コンテナコンポーネントはサポートされていません。
  3. サイトページに埋め込まれた AEM Forms コンテナコンポーネントをタップし、アクションバーの settings_icon をタップします。AEM Forms コンテナを編集 ​ダイアログが開きます。

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

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

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

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

      • 「ありがとうございます」メッセージ:フォーム送信時に表示するメッセージをリッチテキストエディターで書き込みます。このオプションは、「ありがとうございます」メッセージの表示が有効な場合にのみ選択できます。
      • 「ありがとうございます」ページ: フォームの送信時に表示するページを参照して選択します。このオプションは、「ありがとうございます」ページの表示が有効な場合にのみ選択できます。
      • 送信時にページを更新:アダプティブフォームが埋め込まれたページを更新して「ありがとうございます」ページを表示します。この機能が無効な場合は、AEM Forms コンテナ内のアダプティブフォームの代わりに「ありがとうございます」ページが(ページの更新を待たずに)表示されます。このオプションは、「ありがとうございます」ページの表示が有効な場合にのみ選択できます。
    • テーマ:アダプティブフォームまたはインタラクティブ通信のコンポーネントのスタイルを定義するテーマを選択します。スタイル設定には、フォントスタイル、背景色、サイズ、配置など、外観のプロパティが含まれます。

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

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

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

埋め込まれたアダプティブフォームおよびインタラクティブ通信を発行する publishing-embedded-adaptive-form-and-interactive-communication

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

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

埋め込まれたアダプティブフォームおよびインタラクティブ通信を変更する modifying-embedded-adaptive-form-and-interactive-communication

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

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

  • 元のフォームをアダプティブフォームまたはインタラクティブ通信の各エディターで開き、変更します。
  • 編集モードで開いたサイトページ内からアダプティブフォームまたはインタラクティブ通信をタップし、続けて「新しいウィンドウで編集」をタップします。元のフォームは、修正可能な編集モードで開きます。
NOTE
元のアダプティブフォームまたはインタラクティブ通信で行った変更は、埋め込まれたフォームに自動的に反映されます。 ただし、アダプティブフォーム、インタラクティブ通信、またはサイトページを再公開して、公開されたページに変更を反映します。

注意点とベストプラクティス considerations-and-best-practices

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

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