チュートリアル:アダプティブフォームの作成

02-create-adaptive-form-main-image

これは、「最初のアダプティブフォームを作成する」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。

このチュートリアルについて

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

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

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

[ ![](do-not-localize/form-preview-mobile.gif)](assets/form-preview-mobile.gif)

手順 1:アダプティブフォームを作成する

  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をタップします。 コンポーネントブラウザーが表示されます。Header​コンポーネントをコンポーネントブラウザーからアダプティブフォームにドラッグします。

  2. ロゴ」をタップします。ツールバーが表示されます。ツールバーのaem_6_3_editをタップし、「We.Retail」と入力して、aem_6_3_forms_saveをタップします。

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

    上記の「Get file」をタップすると、このチュートリアルで使用するロゴをダウンロードすることができます。

    ファイルを入手

  4. フッター​コンポーネントをtreeexpandallからアダプティブフォームにドラッグします。 この段階では、フォームは次のようになります。

    adaptive-form-with-headers-and-footers

手順 3:情報を取得して表示するためのコンポーネントを追加する

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

  1. 数値ボックスコンポーネントをアダプティブフォームにドラッグし、フッターコンポーネントの前にドロップします。コンポーネントのプロパティを開き、コンポーネントの​タイトル​を​Customer ID​に変更し、要素名​を​customer_ID​に変更し、必須フィールド​オプションを有効にして、HTML5番号入力タイプを使用​をタップします10/>aem_6_3_forms_save🔗
  2. 3 つのテキストボックスコンポーネントをアダプティブフォームにドラッグし、フッターコンポーネントの前にドロップします。これらのテキストボックスについて、以下のプロパティを設定します。:
Property テキストボックス 1
テキストボックス 2
テキストボックス 3
タイトル 名前
発送先住所 都道府県
要素名 customer_Name
customer_Shipping_Address customer_State
必須フィールド Enabled 有効 有効
複数行を許可
無効 有効 無効
  1. 数値ボックス​コンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、次の表に示す値を設定します。aem_6_3_forms_saveをタップします。

    プロパティ
    title(タイトル) 郵便番号
    要素名 customer_ZIPCode
    最大桁数 6
    必須フィールド 有効
    表示パターンタイプ パターンなし
  2. 電子メール​コンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、次の表に示す値を設定し、aem_6_3_forms_saveをタップします。

    プロパティ
    title(タイトル) 電子メール
    要素名 customer_Email
    必須フィールド 有効
  3. 添付ファイル​コンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、次の表に示す値を設定し、aem_6_3_forms_saveをタップします。

プロパティ
title(タイトル) Government approved address proof
要素名 customer_Address_Proof
必須フィールド 有効
  1. 送信ボタン​コンポーネントをアダプティブフォームにドラッグし、フッターコンポーネントの前にドロップします。コンポーネントのプロパティを開き、「要素名」を​address_addition_update_submit​に変更し、aem_6_3_forms_saveをタップします。 これでフォームのレイアウトが設定され、フォームが以下のように表示されます。

    adaptive-form-with-all-the-components

手順 4:アダプティブフォームの送信アクションを設定する

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

次の手順を使用して、フォームの電子メール送信アクションとデモの送信アクションを設定できます。

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

    /content/help/en/experience-manager/6-4/sites-administering/notification.html

  2. コンテンツブラウザーで「フォームコンテナ」をタップし、cmpprをタップします。 プロパティブラウザが左側に開きます。

  3. 送信送信アクション​に移動します。「電子メールを送信」を選択します。次の値を指定し、aem_6_3_forms_saveをタップします。

    プロパティ
    送信元 donotreply@weretail.com
    To ${customer_Email}
    件名 Acknowledgement: You have added shipping address on We.Retail website.
    電子メールテンプレート ${customer_Name}様、次の住所がお客様のアカウントの配送先住所として追加されます。
    ${customer_Name}${customer_Shipping_Address}${customer_State}${customer_ZIPCode}
    よろしくお願いします。Web.Retail
    添付ファイルを含める 有効

    これでフォームが作成されました。フォームのプレビューを表示して機能をテストすることができます。このチュートリアルに記載されている値を指定し、AEM Forms サーバーで稼働するマシン上に作成されたフォームにアクセスする場合は、対応するフォームが http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html に用意されています。

手順 5:アダプティブフォームのプレビューを表示して、アダプティブフォームを送信する

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

アダプティブフォームには、各種のデバイスでフォームの操作性をエミュレートするためのオプションも用意されています。例えば、iPhone、iPad、デスクトップパソコンなどのデバイスについて、エミュレーションを行うことができます。プレビュー​と​エミュレータ ルーラーの両方のオプションを組み合わせて使用し、画面サイズの異なるデバイス用のフォームをプレビューできます。

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

これで、住所を追加するためのアダプティブフォームの準備が完了しました。このチュートリアルに記載されている値を指定し、AEM Forms サーバーで稼働するマシン上に作成されたフォームにアクセスする場合は、対応するフォームが http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html に用意されています。

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now