フォームコンテナ

最終更新日： 2023-11-23
  • 作成対象：
  • Developer
    Admin
    User

フォームを使用して価値のある情報を提供すると、web サイトの訪問者のエンゲージメントとユーザー満足度を高めることができます。Adobe Experience Manager（AEM）Sites のアダプティブフォームコンテナを使用すると、web サイトの所有者は、ページに簡単にフォームを追加できます。これにより、訪問者がフィードバックの提供や問い合わせなどのアクションを合理化することで、web サイトの訪問者と web サイトの所有者または組織とのコミュニケーションが容易になります。

使用方法

フォームを web サイトに追加したほうが良い理由はいくつかあります。

  • データ収集：フォームを使用して、市場調査やユーザー行動分析など、様々な目的で web サイトの訪問者からデータを収集できます。

  • リードジェネレーション：フォームを使用して、見込み客から名前やメールアドレスなどの情報を収集し、販売やマーケティング活動のリードを生成できます。

  • e コマース：フォームをオンラインショッピングに使用すると、顧客は web サイトを通じて注文や支払いを行えるようになります。

  • 問い合わせ：問い合わせフォームを使用すると、web サイトの訪問者は web サイトの所有者や組織に簡単に連絡できます。

  • 調査および投票：フォームは、調査や調査を通じて web サイトの訪問者からフィードバックや意見を収集するのに使用できます。

  • イベント登録：フォームをイベント登録に使用すると、web サイトの訪問者はイベントや web セミナーに登録できます。

  • 購読：フォームを web サイトの購読に使用すると、訪問者がニュースレターやその他の標準のコミュニケーションに新規登録できます。

  • ユーザー認証：フォームをユーザー認証に使用すると、web サイトの訪問者がアカウントを作成し、ログインして制限されたコンテンツや機能にアクセスできるようになります。

  • コンバージョン率の向上：適切に設計されたフォームがあると、製品の購入やサービスへの新規登録など、ユーザーが簡単に目的のアクションを完了できるようにすることで、コンバージョン率を高めることができます。

バージョンと互換性

アダプティブフォームのアコーディオンコアコンポーネントは、Cloud Service のコアコンポーネント 2.0.4 および AEM 6.5.16.0 Forms 以降のコアコンポーネント 1.1.12 の一部として 2023年2月にリリースされました。次の表に、サポートされているすべてのバージョン、AEM の互換性、対応するドキュメントへのリンクを示します。

コンポーネントのバージョン AEM as a Cloud Service AEM 6.5.16.0 Forms 以降
v1
リリース 2.0.4 以降と互換性あり
リリース 1.1.12 以降、2.0.0 未満と互換性があります。

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンドキュメントをご覧ください。

技術的詳細

アダプティブフォームコンテナのコアコンポーネントの最新情報については、GitHubのテクニカルドキュメントをご覧ください。コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けのドキュメントをご覧ください。

設定ダイアログ

設定ダイアログを使用すると、フォームコンテナのエクスペリエンスを訪問者に合わせて簡単にカスタマイズできます。 また、フォームコンテナオプションを簡単に定義でき、シームレスなユーザーエクスペリエンスを実現できます。

「基本」タブ

「基本」タブ

  • 事前入力サービス - このオプションを使用すると、ユーザーはアダプティブフォームのレンダリング時にデータを取得するための事前入力サービスを選択できます。詳しくは、事前入力サービスの作成および設定方法を参照してください

  • クライアントライブラリカテゴリ - ユーザーはアダプティブフォームごとにカスタム JavaScript ライブラリを設定できます。 jquery および underscore.js サードパーティライブラリに依存する再利用可能な関数のみを、ライブラリに保持することをお勧めします。

「データモデル」タブ

「送信」タブ

フォームデータモデルを使用してフォームをデータソースに接続し、ユーザーのアクションに基づいてデータを送受信することができます。また、フォームを JSON スキーマに接続して、送信されたデータを事前定義済みの形式で受信することもできます。要件に基づいて、次のようにフォームを JSON スキーマまたはフォームデータモデルに接続します。

  • JSON スキーマの作成と環境へのアップロード
  • フォームデータモデルを作成

「送信」タブ

「送信」タブ

ユーザーは、アダプティブフォームの送信に対して様々なアクションを設定できます。

  • リダイレクト URL／パス - このオプションを使用すると、ユーザーはアダプティブフォームの送信後にユーザーがリダイレクトされる各フォームのページを設定できます。詳しくは、リダイレクトページの設定方法を参照してください。

「メッセージを表示」タブ

  • メッセージを表示 - このオプションを使用すると、ユーザーはアダプティブフォームが正常に送信されたときに表示されるメッセージを追加できます。定義済みのテキストはダイアログボックスに含まれ、ユーザーが変更できます。「メッセージを表示」ダイアログでは、追加したテキストを書式設定できるリッチテキスト形式のツールがサポートされています。

  • 送信アクション - 送信アクションは、ユーザーがアダプティブフォームの「送信」ボタンをクリックしたときにトリガーされます。ユーザーは、すぐに使用できるよう用意されているドロップダウンリストから「送信アクション」を選択することができます。詳しくは、「送信」タブでの送信アクションの設定を参照してください。

デザインダイアログ

デザインダイアログは、フォームコンテナコンポーネントの CSS スタイルを定義および管理するために使用されます。

「許可されたコンポーネント」タブ

デザインダイアログの「許可されるコンポーネント」タブ

The 許可されたコンポーネント 「 」タブを使用すると、テンプレートエディターで、アダプティブFormsエディター内のコンポーネントのパネルに、項目として追加できるコンポーネントを設定できます。

「デフォルトコンポーネント」タブ

デザインダイアログの「デフォルトコンポーネント」タブ

The デフォルトのコンポーネント 「 」タブを使用すると、テンプレートエディターで、デフォルトで表示されるコンポーネントを、アダプティブFormsエディター内のフォームコンテナコンポーネント内の項目として指定できます。

「レスポンシブ設定」タブ

デザインダイアログの「レスポンシブ設定」タブ

The レスポンシブ設定 「 」タブを使用すると、テンプレートエディターで、アダプティブFormsエディター内のフォームコンテナコンポーネント内のグリッド内の列数を指定できます。

「スタイル」タブ

アダプティブフォームのファイル添付コアコンポーネントは、AEM のスタイルシステムをサポートしています。

デザインダイアログ

  • デフォルトの CSS クラス：アダプティブフォームのチェックボックスグループコアコンポーネントのデフォルト CSS クラスを指定できます。

  • 許可されたスタイル：スタイルを表す名前と CSS クラスを指定してスタイルを定義します。 例えば、「bold text」という名前のスタイルを作成し、CSS クラス「font-weight: bold」を指定できます。アダプティブフォームエディターでアダプティブフォームにこれらのスタイルを使用または適用できます。スタイルを適用するには、アダプティブフォームエディターでスタイルを適用するコンポーネントを選択し、「プロパティ」ダイアログに移動して「スタイル」ドロップダウンリストから希望のスタイルを選択します。スタイルを更新または変更する必要がある場合は、デザインダイアログに戻り、「スタイル」タブでスタイルを更新して変更を保存します。

「カスタムプロパティ」タブ

カスタムプロパティダイアログ

カスタムプロパティを使用すると、カスタム属性（キーと値のペア）を、フォームテンプレートを使用してアダプティブフォームのコアコンポーネントに関連付けることができます。 カスタムプロパティは、コンポーネントのヘッドレスレンディションの「プロパティ」セクションに反映されます。 これにより、カスタム属性の値に基づいて適応する動的なフォーム動作を作成できます。 例えば、開発者は、モバイル、デスクトップ、Web プラットフォーム用のヘッドレスFormsコンポーネントの様々なレンディションをデザインし、様々なデバイスでのユーザーエクスペリエンスを大幅に強化できます。

  • グループ名：カスタムプロパティグループを識別する名前を指定できます。 複数のカスタムプロパティグループを追加、削除、または並べ替えることができます。 カスタムプロパティグループを追加すると、次のオプションが表示されます。

    • キーと値のペア: 追加 ボタンをクリックします。

    • 削除：カスタムプロパティ名とカスタムプロパティ値を削除するには、をタップまたはクリックします。

    • 並べ替え：タップまたはクリックしてドラッグすると、カスタムプロパティ名とカスタムプロパティ値の順序を並べ替えることができます。

関連トピック

前のページ
Next page

このページ