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

アダプティブフォームの新規作成または AEM Sites ページへのアダプティブフォームの追加には、最新の拡張可能なデータキャプチャコアコンポーネントを使用することをお勧めします。 これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。 この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。

適用先 applies-to

このドキュメントは、AEM 6.5 LTS Forms​に適用されます。

AEM as a Cloud Serviceのドキュメントについては、Cloud Service上のAEM Formsを参照してください。

概要 overview

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

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

AEM Sites ページでは、アダプティブフォームやインタラクティブなコミュニケーションは、以下のアイテムを使用することで追加できます。

  • AEM Forms コンテナコンポーネント
    AEM Formsには、サイトページに追加できるコンポーネントが用意されています。 AEM Forms コンテナコンポーネントを使用することで、アダプティブフォームやインタラクティブなコミュニケーションを埋め込むことが可能になります。

  • アセットブラウザー
    作成したすべてのフォームとインタラクティブ通信は、Assetsで利用できます。 フォームは、アセットとしてページ上にドラッグ&ドロップすることができます。

前提条件 prerequisites

編集可能なテンプレートを使用した AEM Sites ページにアダプティブフォームやインタラクティブなコミュニケーションを埋め込むには、AEM Form コンポーネントが関連するテンプレートで許可されたコンポーネントとして設定されていることを確認します。 詳しくは、ページテンプレートの作成​のポリシーおよびプロパティ(レイアウトコンテナ)の節を参照してください。

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

アダプティブフォームやインタラクティブなコミュニケーションの埋め込み af-component

AEM Forms コンテナコンポーネントを使用してアダプティブフォームやインタラクティブなコミュニケーションを埋め込むには、次の手順を実行します。

  1. アダプティブフォームやインタラクティブなコミュニケーションを埋め込む AEM Sites ページを、編集モードで開きます。

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

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

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

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

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

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

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

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

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

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

  5. 設定を保存します。 これで、アダプティブフォームまたはインタラクティブなコミュニケーションがページに埋め込まれました。

埋め込まれたアダプティブフォームおよびインタラクティブなコミュニケーションを発行する 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 コンテナ内のアダプティブフォームおよびインタラクティブなコミュニケーションへの参照情報が保持されます。 したがって、元のアダプティブフォームおよびインタラクティブなコミュニケーションで設定されているすべての設定や特性(テーマ、スタイル、送信アクションなど)は、埋め込まれたアダプティブフォームとインタラクティブなコミュニケーションに保持されます。

埋め込まれたアダプティブフォームおよびインタラクティブなコミュニケーションの設定やプロパティを変更するには、以下のいずれかの操作を行います。

  • アダプティブフォームまたはインタラクティブなコミュニケーションの元のフォームをそれぞれエディターで開き、修正します。
  • 編集モードで開いたサイトページ内からアダプティブフォームまたはインタラクティブなコミュニケーションを選択し、「新しいウィンドウで編集」を選択します。 元のフォームは、修正可能な編集モードで開きます。
NOTE
元のアダプティブフォームまたはインタラクティブなコミュニケーションに加えた変更は、埋め込まれたフォームに自動的に反映されます。 ただし、公開済みページに変更内容を反映するには、アダプティブフォーム、インタラクティブなコミュニケーションまたはサイトページを再公開する必要があります。

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

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

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