ドキュメントAEM 6.5 LTSユーザーガイド

チュートリアル：アダプティブフォームの作成 do-not-publish-tutorial-create-an-adaptive-form

最終更新日： 2026年6月12日
  • 適用対象：
  • Experience Manager 6.5 LTS

作成対象：

  • Admin
  • User
  • Developer

02-create-adaptive-form-main-image

これは、最初のアダプティブフォームを作成するシリーズを構成するチュートリアルです。 チュートリアルの使用例全体を理解、実行、デモするために、シリーズを時系列に沿って実施することをお勧めします。

チュートリアルについて about-the-tutorial

アダプティブフォームは、動的でレスポンシブな次世代型のフォームです。 アダプティブフォームを使用して、エクスペリエンスをカスタマイズすることができます。 また、アダプティブフォームを Adobe Analytics に統合して使用状況の統計を分析したり、Adobe Campaign に統合してキャンペーン管理を行うこともできます。 アダプティブフォームの機能について詳しくは、「アダプティブフォーム作成の概要」を参照してください。

正しい手順を踏めば、フォームの作成と管理を簡単に行うことができます。 このチュートリアルでは、以下の操作を行う方法について説明します。

このチュートリアルの最後に、以下のようなフォームにアクセスするためのリンクがあります。
モバイルでのフォームプレビュー

手順 1：アダプティブフォームを作成する step-create-the-adaptive-form

  1. AEM オーサーインスタンスにログインし、Adobe Experience Manager／フォーム／フォームとドキュメント​に移動します。 デフォルト URLはhttp://localhost:4502/aem/forms.html/content/dam/formsanddocumentsです。

  2. 「作成」を選択して、「アダプティブフォーム」を選択します。 テンプレートを選択するためのオプションが表示されます。 空白​テンプレートを選択して、「次へ」を選択します。

  3. 「プロパティを追加」オプションが表示されます。 「タイトル」フィールドと「名前」フィールドは入力必須です。

    • タイトル： Add new or update shipping address を「タイトル」フィールドに指定します。 「タイトル」フィールドに入力した値が、フォームの表示名になります。 タイトルを指定すると、AEM Forms ユーザーインターフェイス内のフォームを特定しやすくなります。
    • 名前：shipping-address-add-update-form を「名前」フィールドに指定します。 「名前」フィールドでは、フォームの名前を指定します。 指定された名前のノードがリポジトリーに作成されます。 タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。 候補として入力された値は変更可能です。 「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用できます。 無効な入力は、すべてハイフンに置き換えられます。

  4. 「作成」を選択します。 アダプティブフォームが作成され、フォームを編集用に開くためのダイアログが表示されます。 「開く」を選択し、新しく作成されたフォームを新しいタブで開きます。 フォームが編集用に開きます。 新しく作成されたフォームを必要に応じてカスタマイズするためのサイドバーも表示されます。

    アダプティブフォームのオーサリングインターフェイスと使用可能なコンポーネントについて詳しくは、アダプティブフォームのオーサリングの概要を参照してください。

    新しく作成されたアダプティブフォーム。

AEM Forms には、アダプティブフォーム上で情報を表示するための様々なコンポーネントが用意されています。 ヘッダーコンポーネントおよびフッターコンポーネントを使用すると、フォームのルックアンドフィールを統一できます。 ヘッダーには通常、会社のロゴ、フォームのタイトル、概要が含まれます。 フッターには通常、著作権に関する情報と他のページへのリンクを指定します。

  1. toggle-side-panel ／ treeexpandall を選択します。 コンポーネントブラウザーが表示されます。 コンポーネントブラウザーから​ ヘッダー ​コンポーネントをアダプティブフォームにドラッグ＆ドロップします。

  2. ロゴ​を選択します。 ツールバーが表示されます。 ツールバーの aem63edit で We.Retail を選択し、 aem63formssave を選択します。

  3. 画像を選択します。 ツールバーが表示されます。 cmppr を選択します。 画面の左側にプロパティブラウザーが表示されます。 「参照」をタップして、ロゴ画像をアップロードします。 aem63formssave を選択します。 画像がヘッダーに表示されます。

    ファイルがない場合は、「ファイルを入手」を選択して、この記事で使用されているロゴをダウンロードできます。

    ファイルを入手

  4. treeexpandall から​ フッター ​コンポーネントをアダプティブフォームにドラッグします。 この時点で、フォームは以下のように表示されます。

    adaptive-form-with-headers-and-footers

手順 3：情報を取得して表示するためのコンポーネントを追加する step-add-components-to-capture-and-display-information

コンポーネントは、アダプティブフォームを構成するための構築ブロックです。 AEM Forms には、情報を取得しアダプティブフォームで表示するための様々なコンポーネントが用意されています。 treeexpandall からフォームにコンポーネントをドラッグすることができます。 使用可能なコンポーネントと対応する機能については、アダプティブフォームのオーサリングの概要を参照してください。

  1. 数値ボックスコンポーネント​をアダプティブフォームにドラッグします。 フッターコンポーネントの前にドロップします。 コンポーネントのプロパティを表示し、コンポーネントの​ タイトル ​を Customer ID、要素名​を customer_ID にそれぞれ変更し、「必須フィールド」オプションと「HTML5 の数値入力タイプを使用」オプションを有効にして「 aem63formssave 」を選択します。

  2. 3 つのテキストボックスコンポーネントをアダプティブフォームにドラッグします。 これらをフッターコンポーネントの前に配置します。 これらのテキストボックスに次のプロパティを設定します。

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 html-authored no-header
    プロパティ テキストボックス 1 テキストボックス 2 テキストボックス 3
    タイトル 名前 発送先住所 状態
    要素名 customer_Name customer_Shipping_Address customer_State
    必須フィールド 有効になっています Enabled 有効になっています
    複数行を許可 無効 Enabled 無効

  3. 数値ボックス​コンポーネントをフッターコンポーネントの前にドラッグします。 コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「 aem63formssave 」を選択します。

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    プロパティ 値
    タイトル 郵便番号
    要素名 customer_ZIPCode
    最大桁数 6
    必須フィールド Enabled
    表示パターンのタイプ パターンなし

  4. メール​コンポーネントをフッターコンポーネントの前にドラッグします。 コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「 aem63formssave 」を選択します。

    table 0-row-2 1-row-2 2-row-2 3-row-2
    プロパティ 値
    タイトル メール
    要素名 customer_Email
    必須フィールド Enabled

  5. 添付ファイル​コンポーネントをフッターコンポーネントの前にドラッグします。 コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「 aem63formssave 」を選択します。

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    プロパティ 値
    タイトル 政府が承認した住所の証明
    要素名 customer_Address_Proof
    必須フィールド Enabled

  6. 送信ボタン​コンポーネントをアダプティブフォームにドラッグします。 フッターコンポーネントの前にドロップします。 コンポーネントのプロパティを開き、「要素名」を address_addition_update_submit に変更して「 aem63formssave 」を選択します。 これでフォームのレイアウトが設定され、フォームが以下のように表示されます。

    adaptive-form-with-all-the-components

手順 4：アダプティブフォームの送信アクションを設定 step-configure-submit-action-for-the-adaptive-form

送信アクションは、ユーザーがアダプティブフォームで「送信」ボタンをタップする際にトリガーされます。 送信アクションを使用して、フォームデータをローカルリポジトリに保存したり、フォームデータを REST エンドポイントに送信したり、フォームデータをメールとして送信したりできます。 アダプティブフォームには、これ以外にも標準提供の送信アクションがいくつか用意されています。 詳しくは、送信アクションの設定を参照してください。

以下の手順により、フォームのメール送信アクションとデモ送信アクションを設定することができます。

  1. メールサーバーを設定します。 詳しくは、「メール通知の設定」を参照してください。

  2. コンテンツブラウザーで「フォームコンテナ」を選択してから「 cmppr 」を選択します。 画面左側にプロパティブラウザーが表示されます。

  3. 送信／送信アクション​に移動します。 「メールを送信」を選択します。 次の値を指定し、「 aem63formssave 」を選択します。

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    プロパティ 値
    送信元 donotreply@weretail.com
    To ${customer_Email}
    件名 確認応答：We.Retail の web サイトに発送先住所を追加しました。
    メールテンプレート こんにちは。${customer_Name}様のアカウントに次のアドレスが発送先住所として追加されました：
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode}
    今後ともよろしくお願いいたします。We.Retail
    添付ファイルを含める Enabled

    これでフォームが作成されました。 これで、フォームをプレビューして機能をテストすることができます。 チュートリアルで言及されている名前を使用し、AEM Forms サーバーを実行しているコンピューター上でフォームにアクセスした場合、フォームはhttp://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.htmlで利用できます。

手順 5：アダプティブフォームのプレビューを表示して、アダプティブフォームを送信する step-preview-and-submit-the-adaptive-form

プレビューオプション​を使用して、フォームの外観と動作を確認することができます。 プレビューモードでフォームを送信したり、フォームに適用されている検証機能を確認したりできます。 例えば、必須フィールドを空のままにした際にエラーが表示される場合などです。

アダプティブフォームには、様々なデバイス向けにフォームのエクスペリエンスをエミュレートするオプションも用意されています。 例えば、iPhone、iPad、デスクトップパソコンなどのデバイスについて、エミュレーションを行うことができます。 「プレビュー」と「エミュレーター ルーラー 」の両オプションをそれぞれ組み合わせることにより、画面サイズの異なるデバイスのフォームをプレビュー表示することができます。

  1. フォームエディター右側の「プレビュー」オプションを選択します。 フォームがプレビューモードで表示されます。 チュートリアルに記載されている名前を使用した場合、フォームのプレビューURLはhttp://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabledです
  2. 「 ルーラー 」を使用して、各種のデバイスでフォームがどのように表示されるかを確認します。
  3. フォームのフィールドに入力して「送信」を選択します。 フォームが送信され、デフォルトで「ありがとうございます」ページにリダイレクトされます。 また、カスタムの「Thank You」ページを指定することもできます。 詳しくは、「リダイレクトページの設定」を参照してください。

これで、住所を追加するためのアダプティブフォームの準備が完了しました。 チュートリアルに記載されている名前を使用し、AEM Forms Serverを実行しているマシン上でフォームにアクセスした場合、フォームはhttp://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.htmlで利用できます。

recommendation-more-help
experience-manager-65-lts-help-main-toc