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