AEM Sites ページへのアダプティブフォームの埋め込み

概要

AEM Formsを使用すると、フォーム開発者はAEM SitesページやAEMの外部でホストされている Web ページにアダプティブFormsをシームレスに埋め込むことができます。 埋め込まれたアダプティブフォームではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームに記入およびフォームを送信できます。これにより、ユーザーは web ページのその他の要素との整合性を保つことができ、同時にフォームとの相互作用も保つことができます。

AEM Sites ページでは、以下を使用してアダプティブフォームを追加できます。

  • アダプティブForms — 埋め込みコンポーネント
    アダプティブForms — 埋め込みコンポーネントを使用すると、AEM Sites作成者は既存のアダプティブフォームをAEM Sitesページに含めることができ、アダプティブフォームの再利用性が向上します。 既存のアダプティブFormsは、スタンドアロンで使用することも、サイトページに埋め込むこともできます。 この統合により、作成済みのアダプティブFormsを再利用する便利な方法が提供されます。

  • アセットブラウザー
    すべてのフォームは「アセット」の下に表示されます。フォームは、アセットとしてページ上にドラッグ&ドロップすることができます。

前提条件

編集可能なテンプレートを使用した AEM Sites ページにアダプティブフォームを埋め込むには、AEM Form コンポーネントが、関連するテンプレートで許可されたコンポーネントとして設定されていることを確認します。

場合 アダプティブForms — 埋め込みコンポーネントコンポーネントブラウザーパネル AEM sites ページの次の手順を実行します(ビデオを参照)。

Sites ページで静的テンプレートを使用している場合は、それをサイトページの段落システムで設定する必要があります。

アダプティブフォームの埋め込み

を使用してアダプティブフォームを埋め込むには アダプティブForms — 埋め込み コンポーネント:

  1. アダプティブフォームの埋め込み先の AEM Sites ページを、編集モードで開きます。

  2. コンポーネントブラウザーパネルから、 アダプティブForms — 埋め込み コンポーネントをページ上に配置します。 または、アセットブラウザーでアダプティブフォームを検索して、AEM Sites ページにドラッグ&ドロップします。新しいアダプティブフォームを追加したり、既存のアダプティブフォームを埋め込んだりすることができます。

    メモ

    1 つのページ上の複数のアダプティブForms — 埋め込みコンポーネントはサポートされていません。

  3. 新しいフォームを作成して埋め込むには、コンポーネントツールバーで​フォームを作成​アイコンをタップします。フォームを作成するウィンドウが開きます。

  4. サイトページの埋め込みアダプティブForms — 埋め込みコンポーネントをタップし、 settings_icon をクリックします。 この アダプティブFormsを編集 — 埋め込み ダイアログが開きます。

  5. アダプティブForms — 埋め込みを編集ダイアログで、以下を指定します。

    アセットのタイプ:​埋め込むアセットのタイプを選択します。

    • アセットパス: 埋め込むアダプティブフォームを参照して選択します。また、アセットブラウザーからドロップすると、自動的に入力されます。
    • 送信後処理:フォーム送信時にトリガーするアクションを選択します。お礼のメッセージを表示するため、「ありがとうございます」ページを設けることができます。
      • 表示

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

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

        • ありがとうページにリダイレクト:このオプションを有効にすると、アダプティブフォームが埋め込まれたページはありがとうページに置き換わります。 それ以外の場合は、「ありがとうございます」ページが アダプティブForms — 埋め込み コンポーネントを更新せずに、基になるサイトを更新します。 このオプションは、ありがとうページの表示が有効な場合にのみ選択できます。
    • ページ言語を使用:アダプティブフォームのロケールではなく、AEM Sites ページのロケールを使用します。
    • フォームにフォーカスを設定:アダプティブ フォームの最初のフィールドにフォーカスを設定する場合に選択します。
    • テーマ: アダプティブフォームのコンポーネントのスタイルを定義するテーマを選択します。スタイル設定には、フォントスタイル、背景色、サイズ、配置など、外観のプロパティが含まれます。
    • フォームはフレームの幅全体をカバーします:オンにすると、iframe はフォームのレンダリングに使用されません。
    • 高さ:コンテナの高さを指定します。 コンテナのサイズを自動的に変更する場合は、空白のままにします。
    • CSS クライアントライブラリ:CSS クライアントライブラリへのパスを指定します。
  6. 設定を保存します。これで、アダプティブフォームがページに埋め込まれました。

AEMサイトでは、アダプティブフォームの埋め込みコンポーネントを使用して、その場でアダプティブフォームを作成することもできます。 次の手順に従って、 アダプティブForms — 埋め込みコンポーネント AEMサイトページ:

  1. アダプティブフォームの埋め込み先の AEM Sites ページを、編集モードで開きます。

  2. コンポーネントブラウザーパネルから、アダプティブForms — 埋め込みコンポーネントをページにドラッグ&ドロップします。

  3. 次をクリック: プラス アイコンが表示され、フォーム作成ウィザードにリダイレクトされます。

    アダプティブForms — 埋め込みコンポーネント

  4. これで、 AEM Forms Container Component.

埋め込まれたアダプティブフォームの公開

ここでは、AEM Sites ページに埋め込まれたアダプティブフォームを公開するための、次のようなシナリオを考えてみます。

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

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

AEM sites ページでは、アダプティブフォームへの参照がアダプティブForms — 埋め込みに保持されます。 したがって、元のアダプティブフォームで指定された設定やプロパティ(テーマ、スタイル、送信アクションなど)は、埋め込まれたアダプティブフォームで保持されます。

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

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

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

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

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

  • 元のフォームのヘッダーとフッターは、埋め込まれたフォームには含まれません。
  • 埋め込みフォームのユーザードラフトと送信はサポートされ、Forms Portal の「ドラフト」タブと「送信済みのForms 」タブに表示されます。
  • 元のフォームに設定された送信アクションは、埋め込まれたフォームでも保持されます。
  • 元のフォームに Adobe Analytics が設定されている場合、埋め込まれたフォームの分析データは Adobe Analytics でキャプチャされます。ただし、フォームの分析レポートでは使用できません。

このページ