AEM Forms を使用すると、フォーム開発者は AEM サイトページまたは AEM の外側にホストされた Web ページにアダプティブフォームおよびインタラクティブ通信をシームレスに埋め込むことができます。埋め込まれたアダプティブフォームおよびインタラクティブ通信ではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームの記入および送信を行えます。これにより、ユーザーは Web ページのその他のエレメントとのコンテキストを保ったまま、同時にフォームまたはインタラクティブ通信の操作を行うことができます。
アダプティブフォームを外部Webページに埋め込む方法について詳しくは、「アダプティブフォームを外部Webページに埋め込む」を参照してください。
AEM Sitesページでは、次を使用して、アダプティブフォームまたはインタラクティブな通信を追加できます。
AEM Form コンテナコンポーネント AEM Forms では、サイトページに追加できるコンポーネントを提供します。AEM Form コンテナコンポーネントを使用することで、アダプティブフォームやインタラクティブ通信を埋め込むことが可能になります。
アセットブラウザー 作成したフォームやインタラクティブ通信は、すべて「アセット」の下に表示されます。フォームは、アセットとしてページ上にドラッグ&ドロップすることができます。
編集可能なテンプレートを使用するAEMサイトページにアダプティブフォームやインタラクティブな通信を埋め込むには、AEM Formコンポーネントが関連付けられたテンプレートで許可コンポーネントとして設定されていることを確認します。 詳しくは、ページテンプレートの作成の「ポリシーとプロパティ(レイアウトコンテナ)」セクションを参照してください。
サイトページがスタティックテンプレートを使用している場合は、それをサイトページの段落システムから設定する必要があります。詳しくは、デザインモードでのコンポーネントの設定を参照してください。
AEM Forms コンテナコンポーネントを使用してアダプティブフォームやインタラクティブ通信を埋め込むには:
アダプティブフォームやインタラクティブ通信を埋め込む AEM サイトページを、編集モードで開きます。
コンポーネントブラウザーパネルからそのページ上に AEM Forms コンテナコンポーネントをドラッグアンドドロップします。
または、アセットブラウザーでアダプティブフォームまたはインタラクティブ通信を検索して、AEM サイトページにドラッグアンドドロップします。これにより、AEM Forms コンテナにフォームが埋め込まれます。
1 つのページ上の複数の AEM Form コンテナコンポーネントはサポートされていません。
サイトページに埋め込まれたAEM Formsコンテナコンポーネントをタップし、アクションバーのをタップします。 [AEM Formsコンテナの編集]ダイアログが開きます。
AEM Forms コンテナを編集ダイアログで、次の設定を行います。
アセットの種類:埋め込むアセットの種類を選択します。選択肢はアダプティブフォームとインタラクティブ通信です。
Asset Path:埋め込むアダプティブフォームまたはインタラクティブな通信を参照して選択します。また、アセットブラウザーからドロップすると、自動的に入力されます。
(アダプティブフォームのみ)投稿送信:フォーム送信時にトリガーするアクションを選択します。 お礼のメッセージを表示するため、「ありがとうございます」ページを設けることができます。
テーマ:アダプティブフォームまたはインタラクティブ通信のコンポーネントのスタイルを定義するテーマを選択します。スタイル設定には、フォントスタイル、背景色、サイズ、配置など、外観のプロパティが含まれます。
高さ:コンテナの高さを指定します。自動でコンテナのサイズを調整するには、空白のままにします。
CSS クライアントライブラリ:CSS クライアントライブラリへのパスを指定します。
設定を保存します。これで、アダプティブフォームまたはインタラクティブな通信がページに埋め込まれます。
ここでは、AEM サイトページに埋め込まれたアセット(アダプティブフォームまたはインタラクティブ通信)を発行する際における、次のようなシナリオを考えてみます。
AEM サイトページには、AEM Forms コンテナ内のアダプティブフォームおよびインタラクティブ通信への参照情報が保存されます。したがって、元のアダプティブフォームおよびインタラクティブ通信で構成されているすべての構成や特性(テーマ、スタイル、送信アクションなど)は、埋め込まれた形で保持されます。
埋め込まれたアダプティブフォームおよびインタラクティブ通信の構成やプロパティを変更するには、次のいずれかの操作を行います。
元のアダプティブフォームまたはインタラクティブ通信に加えた変更は、埋め込まれたフォームに自動的に反映されます。ただし、発行済みページに変更内容を反映するには、アダプティブフォーム、インタラクティブ通信またはサイトページを再発行する必要があります。
AEM サイトページにアダプティブフォームを埋め込む際は、以下の点に留意してください。