これは、「最初のアダプティブフォームを作成する」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。
アダプティブフォームは、動的でレスポンシブな次世代型のフォームです。アダプティブフォームを使用して、エクスペリエンスをカスタマイズすることができます。また、アダプティブフォームを Adobe Analytics に統合して使用状況の統計を分析したり、Adobe Campaign に統合してキャンペーン管理を行うこともできます。アダプティブフォームの機能について詳しくは、「アダプティブフォーム作成の概要」を参照してください。
正しい手順を踏めば、フォームの作成と管理を簡単に行うことができます。このチュートリアルでは、以下の操作を行う方法について説明します。
このチュートリアルの最後に、以下のようなフォームにアクセスするためのリンクがあります。
AEM オーサーインスタンスにログインし、Adobe Experience Manager/フォーム/フォームとドキュメントに移動します。デフォルトの URL は、http://localhost:4502/aem/forms.html/content/dam/formsanddocuments です。
「作成」をタップして、「アダプティブフォーム」を選択します。テンプレートを選択するためのオプションが表示されます。空白テンプレートをタップして選択し、「次へ」をタップします。
「プロパティを追加」オプションが表示されます。「タイトル」フィールドと「名前」フィールドは入力必須です。
Add new or update shipping address
を「タイトル」フィールドに指定します。「タイトル」フィールドに入力した値が、フォームの表示名になります。タイトルを指定すると、AEM Forms ユーザーインターフェイス内のフォームを特定しやすくなります。shipping-address-add-update-form
を「名前」フィールドに指定します。「名前」フィールドに入力した値が、フォームの名前になります。指定された名前のノードがリポジトリーに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用できます。無効な入力は、すべてハイフンに置き換えられます。「作成」をタップします。アダプティブフォームが作成され、フォームを編集用に開くためのダイアログが表示されます。「開く」をタップし、新しく作成されたフォームを新しいタブで開きます。フォームが編集モードで表示されます。新しく作成されたフォームを必要に応じてカスタマイズするためのサイドバーも表示されます。
アダプティブフォームのオーサリングインターフェースと使用可能なコンポーネントについて詳しくは、「アダプティブフォームの作成について」を参照してください。
AEM Forms には、アダプティブフォーム上で情報を表示するための様々なコンポーネントが用意されています。ヘッダーコンポーネントとフッターコンポーネントを使用すると、フォームの全体的な外観を統一することができます。ヘッダーには通常、会社のロゴ、フォームのタイトル、フォームの概要を指定します。フッターには通常、著作権に関する情報と他のページへのリンクを指定します。
/
をタップします。コンポーネントブラウザーが表示されます。コンポーネントブラウザーからヘッダーコンポーネントをアダプティブフォームにドラッグ&ドロップします。
「ロゴ」をタップします。ツールバーが表示されます。ツールバーの で We.Retail をタップし、
をタップします。
「画像」をタップします。ツールバーが表示されます。 をタップします。画面の左側にプロパティブラウザーが表示されます。「参照」をタップして、ロゴ画像をアップロードします。
をタップします。画像がヘッダーに表示されます。
上記の「Get file」をタップすると、このチュートリアルで使用するロゴをダウンロードすることができます。
からフッターコンポーネントをアダプティブフォームにドラッグします。この時点で、フォームは以下のように表示されます。
コンポーネントは、アダプティブフォームを構成するための構築ブロックです。AEM Forms には、情報を取得しアダプティブフォームで表示するための様々なコンポーネントが用意されています。 からフォームにコンポーネントをドラッグすることができます。使用可能なコンポーネントと対応する機能については、アダプティブフォームのオーサリングの概要を参照してください。
数値ボックスコンポーネントをアダプティブフォームにドラッグします。フッターコンポーネントの前にドロップします。コンポーネントのプロパティを表示し、コンポーネントのタイトルを Customer ID
、要素名を customer_ID
にそれぞれ変更し、「必須フィールド」オプションと「HTML5 の数値入力タイプを使用」オプションを有効にして「」をタップします。
3 つのテキストボックスコンポーネントをアダプティブフォームにドラッグし、フッターコンポーネントの前にドロップします。これらのテキストボックスについて、以下のプロパティを設定します。:
プロパティ | テキストボックス 1 |
テキストボックス 2 |
テキストボックス 3 |
タイトル | 名前 |
発送先住所 | 状態 |
要素名 | customer_Name |
customer_Shipping_Address | customer_State |
必須フィールド | Enabled | 有効 | 有効 |
複数行を許可 |
無効 | 有効 | 無効 |
数値ボックスコンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「」をタップします。
プロパティ | 値 |
---|---|
タイトル | 郵便番号 |
要素名 | customer_ZIPCode |
最大桁数 | 6 |
必須フィールド | 有効 |
表示パターンタイプ | パターンなし |
電子メールコンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「」をタップします。
プロパティ | 値 |
---|---|
タイトル | 電子メール |
要素名 | customer_Email |
必須フィールド | 有効 |
添付ファイルコンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「」をタップします。
プロパティ | 値 |
タイトル | Government approved address proof |
要素名 | customer_Address_Proof |
必須フィールド | 有効 |
送信ボタンコンポーネントをアダプティブフォームにドラッグし、フッターコンポーネントの前にドロップします。コンポーネントのプロパティを開き、「要素名」を address_addition_update_submit
に変更して「」をタップします。これでフォームのレイアウトが設定され、フォームが以下のように表示されます。
アダプティブフォームの「送信」ボタンをタップすると、送信アクションがトリガーされます。送信アクションを使用して、フォームデータをローカルリポジトリに保存したり、フォームデータを REST エンドポイントに送信したり、フォームデータを電子メールとして送信したりすることができます。アダプティブフォームには、そのほかにも、すぐに使用できる送信アクションがいくつか用意されています。詳しくは、「送信アクションの設定」を参照してください。
以下の手順により、フォームのメール送信アクションとデモ送信アクションを設定することができます。
電子メールサーバーを設定します。詳しくは、「電子メール通知の設定」を参照してください。
コンテンツブラウザーで「フォームコンテナ」をタップしてから「」をタップします。画面左側にプロパティブラウザーが表示されます。
送信/送信アクションに移動します。「電子メールを送信」を選択します。次の値を指定し、「」をタップします。
プロパティ | 値 |
---|---|
送信元 | 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} 今後ともよろしくお願いいたします。We.Retail |
添付ファイルを含める | 有効 |
これでフォームが作成されました。フォームのプレビューを表示して機能をテストすることができます。このチュートリアルに記載されている名前を指定し、AEM Forms サーバーで稼働するマシン上に作成されたフォームにアクセスする場合は、対応するフォームが http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html に用意されています。
プレビューオプションを使用して、フォームの外観と動作を確認することができます。プレビューモードでフォームを送信し、フォームに適用された検証機能を確認することもできます。例えば、必須フィールドに値が入力されていな場合は、エラーメッセージが表示されます。
アダプティブフォームには、各種のデバイスでフォームの操作性をエミュレートするためのオプションも用意されています。例えば、iPhone、iPad、デスクトップパソコンなどのデバイスについて、エミュレーションを行うことができます。「プレビュー」と「エミュレーター 」の両オプションをそれぞれ組み合わせることにより、画面サイズの異なるデバイスのフォームをプレビュー表示することができます。
これで、住所を追加するためのアダプティブフォームの準備が完了しました。このチュートリアルに記載されている名前を指定し、AEM Forms サーバーで稼働するマシン上に作成されたフォームにアクセスする場合は、対応するフォームが http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html に用意されています。