バージョン | 記事リンク |
---|---|
AEM 6.5 | ここをクリックしてください |
AEM as a Cloud Service | この記事 |
AEM Forms を使用すると、フォーム開発者は AEM サイトページまたは AEM の外側にホストされた web ページにアダプティブフォームをシームレスに埋め込むことができます。埋め込まれたアダプティブフォームではすべての機能を使用できるため、ユーザーは、ページから移動することなくフォームに記入およびフォームを送信できます。これにより、ユーザーは web ページのその他の要素との整合性を保つことができ、同時にフォームとの相互作用も保つことができます。これにより、訪問者は、ページを離れることなく、フォームに簡単に入力して送信できます。この統合により、顧客が作成済みのアダプティブフォームを再利用する便利な方法が提供されます。
AEM ページエディターを使用すると、複数のフォームをすばやく作成して AEM Sites ページに追加できます。AEM ページエディターを使用すると、コンテンツ作成者は、動的な動作、検証、データ統合、レコードのドキュメントの生成、ビジネスプロセスの自動化など、アダプティブフォームのコンポーネントを活用して、Sites ページ内にシームレスなデータキャプチャのエクスペリエンスを作成できます。また、バージョン管理、ターゲティング、翻訳、マルチサイトマネージャーなど、AEM Sites ページの様々な機能を使用できます。
AEM Forms にはアダプティブフォームコンテナおよびアダプティブフォーム(埋め込みコンポーネント)が用意されています。 以下を使用できます。 アダプティブForms — 埋め込み (v2) 既存のアダプティブフォームを追加するコンポーネント、またはアダプティブFormsエディターを使用してフォームを作成するコンポーネント アダプティブフォームコンテナ をクリックして、エクスペリエンスフラグメントページまたはAEM Sitesページ内に新しいフォームを作成します。
次のオプションを使用すると、この機能を最大限に活用できます。
承認済みのテンプレートを使用してアダプティブフォームを作成し、AEM Sitesページに埋め込む: 事前に承認されたテンプレートを使用すると、組織のブランディングガイドラインやデザイン標準に合わせたアダプティブFormsをすばやく作成して埋め込むことができます。
既存のフォームを AEM Sites ページに追加:作成済みのフォームを web サイトに簡単に統合し、訪問者が直接操作できるようにします。
アダプティブフォームをエクスペリエンスフラグメントに変換: AEM Sites ページに追加されたアダプティブフォームをエクスペリエンスフラグメントに変換して、複数の AEM Sites ページでフォームを再利用します。
カスタムアダプティブフォームを作成し、AEM Sites ページに追加:アダプティブフォームコンテナコンポーネントを使用すると、要件やデザインの環境設定に合わせてカスタマイズし、新規フォームをゼロから作成します。
カスタムアダプティブフォームを作成し、エクスペリエンスフラグメントに追加: AEM エクスペリエンスフラグメントにフォームを追加して、フォームのリーチを拡張し、複数のページやサイトでシームレスに再利用できます。
複数のフォームを AEM Sites ページまたはエクスペリエンスフラグメントに追加:複数のアダプティブフォームを作成し、AEM Sites ページに追加して、ユーザーの環境設定や要件に基づいて複数の選択肢をユーザーに提供します。AEM ページエディターを使用すると、複数のフォームをすばやく作成して AEM Sites ページに追加できます。以下を使用すると、 アダプティブフォームコンテナ コンポーネントを複数回追加して、AEM SitesページにアダプティブFormsを追加します。 以下を使用すると、 アダプティブForms — 埋め込み AEM Sitesページでコンポーネントを複数回作成する ( フォームはフレームの幅全体をカバーします 」オプションが選択されている。 例えば、 フォームはフレームの幅全体をカバーします 「 」オプションがオフの場合、AEM Sitesページでは、iframe なしで存在するアダプティブフォームが 1 つだけサポートされます。 を使用してアダプティブFormsをさらに追加するには アダプティブForms — 埋め込み コンポーネント、選択 フォームはフレームの幅全体をカバーします オプション。
アダプティブフォーム - 埋め込みコンポーネントを使用してフォームを作成または追加する場合、そのフォームは AEM Forms の翻訳フローを使用して翻訳およびローカライゼーションが実行されます。 この場合、単一のフォームが維持され、Sites ページのすべての言語コピーで参照されます。アダプティブフォーム - 埋め込みコンポーネントでは、バージョン管理、ターゲティング、翻訳、マルチサイトマネージャーなど、AEM Sites ページの様々な機能にアクセスできません。
アダプティブフォームコンテナを使用してフォームを作成または追加する場合、フォームは AEM Sites 翻訳フローを通じて翻訳およびローカライゼーションが実行されます。言語ごとに、Sites ページと対応するフォームの個別のコピー(言語コピー)が生成され、コンテンツ作成者が親ページのフォームのルールを変更する場合は、全言語のフォームのコピーで同じ変更を行う必要があります。アダプティブフォームコンテナでは、AEM Sites ページの様々な機能(バージョン管理、ターゲティング、翻訳、マルチサイトマネージャーなど)を使用できます。
新しいアダプティブフォームまたは既存のアダプティブフォームを埋め込む前に、 アダプティブForms — 埋め込み (v2),有効 アダプティブFormsコアコンポーネント とを追加します。 アダプティブFormsクライアントライブラリ をAEM Sitesページに追加します。
アダプティブフォームコアコンポーネントがお使いの AEM Forms as a Cloud Service 環境で有効になっていることを確認します。
フォームコンテナ設定ダイアログボックスで「フォームがページの幅全体に広がっている場合」オプションが選択されており、コアコンポーネントを使用したアダプティブフォームが使用されている場合は、対応する Sites ページに clientlibs を含める必要があります。
次を追加: Customheaderlibs および Customfooterlibs クライアントライブラリをAEM Sitesページに追加します。 ライブラリを追加するには、次の手順を実行します。
AEM Cloud Service Git リポジトリにアクセスしてクローンを作成します。
プランテキストエディターで AEM Cloud Service Git リポジトリフォルダーを開きます。例えば Microsoft Visual Code などです。
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.html
ファイルを開き、次のコードをファイルに追加します。
//Customheaderlibs.html
<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
<sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
</sly>
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.html
ファイルを開き、次のコードをファイルに追加します。
//customfooterlibs.html
<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
<sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
</sly>
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.html
ファイルを開き、次のコードをファイルに追加します。
//Customheaderlibs.html
<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
<sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
</sly>
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.html
ファイルを開き、次のコードをファイルに追加します。
//customfooterlibs.html
<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
<sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
</sly>
デプロイメントパイプラインを実行して、クライアントライブラリを AEM as a Cloud Service 環境にデプロイします。
テンプレートのポリシーでアダプティブフォーム - 埋め込み(v2)コンポーネントを有効にするには、次の手順を実行します。
以下を使用します。 アダプティブForms — 埋め込み (v2) フォーム作成ウィザードを使用して、AEM Sitesエディター内で直接アダプティブフォームを作成するためのコンポーネントです。 結果のフォームは外部エンティティとして保存され、他の Sites ページやスタンドアロンフォームで再利用できます。 要件やデザインの環境設定に合わせて、AEM Sites ページまたはエクスペリエンスフラグメント内で直接新しいフォームを最初から作成できます。単一用途のフォームの場合は、AEM Sites ページへの直接オーサリングをお勧めします。一方、エクスペリエンスフラグメントは、web サイトの複数のページで再利用する必要があるフォームに最適です。
新しいフォームを簡単に埋め込むには、 アダプティブForms — 埋め込み (v2). 例えば、新しい連絡先フォームをAEM SitesページやAEM Experience Fragment に組み込むとします。 AEM Sitesページまたはエクスペリエンスフラグメント内の連絡先フォームに対する更新や変更は、デプロイ先のすべてのページに自動的に適用されます。 これにより、Web サイトのフォームの管理が簡素化され、プロセス全体を合理化しながら、シームレスなユーザーエクスペリエンスを実現します。
使用 アダプティブForms — 埋め込み (v2)を使用すると、次のことができます。
新しいフォームをAEM Sitesページに埋め込む手順は次のとおりです。
AEM Sites ページを編集モードで開きます。
コンポーネントブラウザーパネルから、アダプティブフォーム - 埋め込み(v2)コンポーネントをページ上にドラッグ&ドロップします。
「プラス」アイコンをクリックすると、フォーム作成ウィザードにリダイレクトされます。
フォーム作成ウィザードから新しいアダプティブフォームを作成します。
アセットパスには、作成されたアダプティブフォームのパスが既に含まれています
設定を保存します。これで、アダプティブフォームがページに埋め込まれました。
次に、次の操作を行います。 送信アクションの設定 埋め込まれたアダプティブフォームの詳細プロパティを作成するには、フォーム作成ウィザードを使用します。
エクスペリエンスフラグメントに新しいフォームを埋め込む手順は、次のとおりです。
エクスペリエンスフラグメントを編集モードで開きます。
コンポーネントブラウザーパネルから、アダプティブフォーム - 埋め込み(v2)コンポーネントをページ上にドラッグ&ドロップします。
「プラス」アイコンをクリックすると、フォーム作成ウィザードにリダイレクトされます。
フォーム作成ウィザードから新しいアダプティブフォームを作成します。
アセットパスには、作成されたアダプティブフォームのパスが既に含まれています
設定を保存します。これで、アダプティブフォームがページに埋め込まれました。
次に、次の操作を行います。 送信アクションの設定 埋め込まれたアダプティブフォームの詳細プロパティを作成するには、フォーム作成ウィザードを使用します。
を使用 アダプティブForms — 埋め込み (v2) コンポーネントを使用すると、既存のアダプティブフォームをAEM Sites内のページに容易に統合できます。 この機能は、アダプティブFormsの適応性と再利用性を大幅に向上させ、作成済みのフォームを再利用する便利な方法を提供します。 例えば、AEM Sitesページに連絡先フォームを組み込むと、フォームを複数回再作成しなくても済むとします。
Sites ページでアダプティブフォームを作成するには、次の手順を実行します。
次に、次の操作を行います。 送信アクションの設定 埋め込まれたアダプティブフォームの詳細プロパティを作成するには、フォーム作成ウィザードを使用します。
また、フォームをAEM Experience Fragment に埋め込むことで、フォームのアクセシビリティを拡張することもできます。 エクスペリエンスフラグメント内にアダプティブフォームを作成するには、次の手順を実行します。
次に、次の操作を行います。 送信アクションの設定 埋め込まれたアダプティブフォームの詳細プロパティを作成するには、フォーム作成ウィザードを使用します。
Sites ページエディター内にある既存のアダプティブフォームをエクスペリエンスフラグメントに変換すると、複数のページやサイトでフォームを再利用できます。
AEM Sites ページ内のアダプティブフォームをエクスペリエンスフラグメントに変換するには、次の手順を実行します。
アダプティブフォームを含む AEM Sites ページ(アダプティブフォームコンテナコンポーネント内)を編集モードで開きます。
コンテンツツリーを開き、アダプティブフォームをホストするアダプティブフォームコンテナを選択します。1 つの AEM Sites ページで複数のアダプティブフォームをホストできます。したがって、適切なアダプティブフォームコンテナを慎重に選択してください。
メニューバーで、を選択します。「エクスペリエンスフラグメントバリエーションに変換」アイコン。
アダプティブフォームコンテナを新しいエクスペリエンスフラグメントに変換するか、既存のエクスペリエンスフラグメントに追加するためのダイアログボックスが表示されます。
エクスペリエンスフラグメントバリエーションに変換ダイアログボックスで、次のオプションの値を設定します。
アダプティブフォーム - 埋め込み(v2)コンポーネントの詳細設定をカスタマイズできます。アダプティブフォーム - 埋め込み()ダイアログでは、次の項目を指定できます。
アセットパス:埋め込むアダプティブフォームを閲覧して選択します。また、アセットブラウザーからドロップすると、自動的に入力されます。
送信後処理:フォーム送信時にトリガーするアクションを選択します。お礼のメッセージを表示するため、「ありがとうございます」ページを設けることができます。
ページ言語を使用:アダプティブフォームのロケールではなく、AEM Sites ページのロケールを使用します。このオプションは、アダプティブフォーム (Foundation) にのみ適用されます。
フォームにフォーカスを設定:アダプティブフォームの最初のフィールドにフォーカスを設定する場合に選択します。このオプションは、アダプティブフォーム (Foundation) にのみ適用されます。
テーマ: アダプティブフォームのコンポーネントのスタイルを定義するテーマを選択します。スタイル設定には、フォントスタイル、背景色、サイズ、配置など、外観のプロパティが含まれます。このオプションは、アダプティブフォーム (Foundation) にのみ適用されます。
以下を使用すると、 ページ言語を使用, フォームにフォーカスを設定 および テーマ のオプションは、アダプティブフォーム (Foundation) に対してのみ使用できます。
フォームはフレームの幅全体をカバーします:インラインフレーム (iframe) は、アダプティブフォームをAEM Sitesページに読み込むHTML要素です。
次の場合、 フォームはフレームの幅全体をカバーします チェックボックスがオンの場合、アダプティブフォームは配置されるコンテナの全幅を占有します。 この場合、iframe はフォームのレンダリングには使用されません。 アダプティブフォームのレイアウトとデザインは、コンテナの幅全体に適応し、レスポンシブで、様々な画面サイズに調整できます。 このオプションを使用すると、1 つのAEM Sitesページ内に複数のアダプティブFormsを埋め込むことができます。
複数のフォームをAEM Sitesページに埋め込むには、 フォームはフレームの幅全体をカバーします チェックボックス。
次の場合、 フォームはフレームの幅全体をカバーします チェックボックスがオフの場合、アダプティブフォームはコンテナの幅全体をカバーしません。 代わりに、iframe を使用してフォームをレンダリングします。このフォームは、特定の幅を超えて拡張することはできません。 この方法は、アダプティブフォームに明確な境界があり、コンテナ内でアダプティブフォームの隣にある他のAEMコンポーネントと共存する必要がある場合に役立ちます。 このオプションを選択しない場合、AEM Sitesページで iframe を使用せずに埋め込むアダプティブFormsは 1 つだけになります。
AEM Sitesページでは、iframe なしで存在するアダプティブフォームは 1 つだけサポートされています。 を使用してアダプティブFormsをさらに追加するには アダプティブForms — 埋め込み コンポーネント、選択 フォームはフレームの幅全体をカバーします オプション。
高さ:コンテナの高さを指定します。コンテナのサイズを自動的に変更するには、空白のままにします。
CSS クライアントライブラリ:CSS クライアントライブラリへのパスを指定します。
ここでは、AEM Sites ページに埋め込まれたアダプティブフォームを公開するための、次のようなシナリオを考えてみます。
埋め込まれたアダプティブフォームの設定やプロパティを変更するには、次のいずれかの操作を行います。
元のフォームに加えた変更は、埋め込まれたフォームに自動的に反映されます。ただし、公開済みページに変更内容を反映するために、アダプティブフォームまたはサイトページを再公開する必要があります。
AEM Sites ページにアダプティブフォームを埋め込む際は、以下の点に留意してください。