現在表示中:

概要

Adobe Experience Manager では、AEM サイトページにアダプティブフォームやアダプティブドキュメントをシームレスに埋め込むことができます。お客様は、サイトのページから移動することなくフォームを文脈内で対話操作、記入、および送信できます。フォームを送信する際に表示される確認用のメッセージや AEM ページを構築することもできます。アダプティブドキュメントはパーソナル化されるため、レスポンシブステートメントやレスポンシブ通信ではユーザーとの対話や分析もサポートされます。アダプティブフォームやドキュメントは、以下のアイテムを使用することで追加できます。

  • AEM Form コンポーネント
    AEM Forms では、サイトページに追加できるコンポーネントを提供します。AEM Form コンポーネントを使用することで、アダプティブフォームやドキュメントを埋め込むことが可能になります。
  • アセットブラウザ
    作成したフォームやドキュメントは、すべて「アセット」の下に表示されます。フォームやドキュメントは、アセットとしてページ上にドラッグ&ドロップすることができます。

ここでは、機能の詳細と、その使用方法について説明します。 

前提条件

AEM Form コンポーネントを使用して AEM サイトページにアダプティブフォームやドキュメントを埋め込むには、サイトページの段落システムから機能が有効なことを確認します。AEM Form コンポーネントを設定すると、コンポーネントブラウザから AEM フォームを利用できるようになります。

サイドバー内のコンポーネントブラウザの下で AEM Form コンポーネントを有効にするには、「デザインモードでコンポーネントを設定する」を参照してください。

AEM Form コンポーネントを使用してアダプティブフォームやドキュメントを埋め込む

AEM Form コンポーネントを使用してアダプティブフォームやドキュメントを埋め込むには:

  1. アダプティブフォームやドキュメントを埋め込む AEM サイトページを、編集モードで開きます。

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

    注意:

    1 つのページ上の複数の AEM Form コンポーネントはサポートしていません。

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

    1. アダプティブフォーム」が選択されている場合の、「AEM Form コンテナ」ダイアログ

    2. アダプティブドキュメント」が選択されている場合の、「AEM Form コンテナ」ダイアログ

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

    アダプティブフォームの場合:

    AEM Form のパス

    埋め込むアダプティブフォームを閲覧して選択します。

    送信後アクション

    フォームの送信時にトリガするアクションを指定します。お礼のメッセージを表示するため、「ありがとうございます」ページを設けることができます。

    送信時にページを更新する

    アダプティブフォームが埋め込まれたページ上で、更新後に「ありがとうございます」ページが表示されるようにします。この機能が無効な場合は、AEM Form コンテナ内のアダプティブフォームの代わりに「ありがとうございます」ページが(ページの更新を待たずに)表示されます。このオプションは、「ありがとうございます」ページの表示が有効な場合にのみ選択できます。

    「ありがとうございます」ページ

    フォームの送信時に表示するページを参照して選択します。このオプションは、「ありがとうございます」ページの表示が有効な場合にのみ選択できます。

    「ありがとうございます」メッセージ

    フォーム送信時に表示するメッセージをリッチテキストエディターで書き込みます。このオプションは、「ありがとうございます」メッセージの表示が有効な場合にのみ選択できます。

    アダプティブフォームのテーマ

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

    アダプティブドキュメントの場合:

    アダプティブドキュメントのパス

    ページに埋め込むアダプティブドキュメントを閲覧して選択します。

  5.  をタップして設定を保存します。これで、アダプティブフォームまたはドキュメントがページに埋め込まれました。

アセットブラウザを使用してアダプティブフォームやドキュメントを埋め込む

アダプティブフォームとドキュメントは、AEM サイトではアセットとして使用できます。アセットブラウザを使用してアダプティブフォームやドキュメントをサイトに埋め込むには:

  1. AEM サイトページを編集モードで開きます。

  2. 左側のパネルにて、「アセット」の下にあるドロップダウンリストから「アダプティブフォーム」を選択します。

    または、「アダプティブドキュメント」を選択できます。

    アダプティブドキュメントを選択する
  3. サイトに埋め込むアダプティブフォームやドキュメントをドラッグ&ドロップします。 

埋め込まれたアダプティブフォームやドキュメントは、AEM Form コンポーネントを追加したコンポーネントの幅に応じて自動的に表示幅を調整します。

埋め込まれたアダプティブフォームを発行する

ここでは、AEM サイトページに埋め込まれたフォームを発行する際における、次のようなシナリオを考えてみます。

  • 初めて AEM サイトページを発行する場合で、かつフォームが埋め込まれている場合は、サイトページに加え、埋め込みフォームやドキュメントも発行します。
  • 発行済みサイトページに埋め込まれたフォームのみを変更した場合は、元のフォームを発行します。変更内容は、発行されたサイトページに反映されます。発行されたサイトページにはフォームへの参照情報が含まれているため、ページを再発行する必要はありません。
  • サイトページに加え、埋め込まれたフォームやドキュメントを変更した場合は、サイトページとフォームを発行します。

埋め込まれたアダプティブフォームを変更する

AEM サイトページには、AEM Form コンテナ内のアダプティブフォームへの参照情報が保存されます。したがって、元のフォームで構成されている構成や特性(テーマ、スタイル、送信アクションなど)は、埋め込まれた形で保持されます。

埋め込まれたフォームの構成やプロパティを変更するには、次のいずれかの操作を行います。

  • Forms Manager のユーザーインターフェイスで元のフォームを開き、それを変更します。 
  • 編集モードで開いたサイトページ内からアダプティブフォームをタップし、続けて「フォームの編集」をタップします。元のフォームは、修正可能な編集モードで開きます。

注意:

元のフォームに加えた変更は、埋め込まれたフォームに自動的に反映されます。ただし、発行済みページに変更内容を反映するために、フォームまたはサイトページを再発行する必要はあります。

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

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

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

注意:

組み込みアダプティブフォームの発行、修正、およびベストプラクティスは、埋め込まれたアダプティブフォームに適用されます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー