チュートリアル：アダプティブフォームの作成
これは、最初のアダプティブフォームを作成するシリーズを構成するチュートリアルです。チュートリアルの使用例全体を理解、実行、デモするために、シリーズを時系列に沿って実施することをお勧めします。
チュートリアルについて
アダプティブフォームは、動的でレスポンシブな次世代型のフォームです。アダプティブフォームを使用して、エクスペリエンスをカスタマイズすることができます。また、アダプティブフォームを Adobe Analytics に統合して使用状況の統計を分析したり、Adobe Campaign に統合してキャンペーン管理を行うこともできます。アダプティブフォームの機能について詳しくは、「アダプティブフォーム作成の概要」を参照してください。
正しい手順を踏めば、フォームの作成と管理を簡単に行うことができます。このチュートリアルでは、以下の操作を行う方法について説明します。
このチュートリアルの最後に、以下のようなフォームにアクセスするためのリンクがあります。
手順 1：アダプティブフォームを作成する
-
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を「名前」フィールドに指定します。「名前」フィールドでは、フォームの名前を指定します。指定された名前のノードがリポジトリーに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用できます。無効な入力は、すべてハイフンに置き換えられます。
- タイトル：
-
「作成」を選択します。アダプティブフォームが作成され、フォームを編集用に開くためのダイアログが表示されます。「開く」を選択し、新しく作成されたフォームを新しいタブで開きます。フォームが編集用に開きます。新しく作成されたフォームを必要に応じてカスタマイズするためのサイドバーも表示されます。
アダプティブフォームのオーサリングインターフェイスと使用可能なコンポーネントについて詳しくは、アダプティブフォームのオーサリングの概要を参照してください。
手順 2：ヘッダーとフッターを追加する
AEM Forms には、アダプティブフォーム上で情報を表示するための様々なコンポーネントが用意されています。ヘッダーコンポーネントおよびフッターコンポーネントを使用すると、フォームのルックアンドフィールを統一できます。ヘッダーには通常、会社のロゴ、フォームのタイトル、概要が含まれます。フッターには通常、著作権に関する情報と他のページへのリンクを指定します。
-
-
ロゴ を選択します。ツールバーが表示されます。ツールバーの
-
画像を選択します。ツールバーが表示されます。
ファイルがない場合は、「ファイルを入手」を選択して、この記事で使用されているロゴをダウンロードできます。
-
手順 3：情報を取得して表示するためのコンポーネントを追加する
コンポーネントは、アダプティブフォームを構成するための構築ブロックです。AEM Forms には、情報を取得しアダプティブフォームで表示するための様々なコンポーネントが用意されています。
-
数値ボックスコンポーネント をアダプティブフォームにドラッグします。フッターコンポーネントの前にドロップします。コンポーネントのプロパティを表示し、コンポーネントの タイトル を
Customer ID、要素名 をcustomer_IDにそれぞれ変更し、「必須フィールド」オプションと「HTML5 の数値入力タイプを使用」オプションを有効にして「 -
3 つのテキストボックスコンポーネントをアダプティブフォームにドラッグします。これらをフッターコンポーネントの前に配置します。これらのテキストボックスに対して、次のプロパティを設定します。：
-
数値ボックス コンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「
プロパティ 値 タイトル 郵便番号 要素名 customer_ZIPCode 最大桁数 6 必須フィールド Enabled 表示パターンのタイプ パターンなし -
メール コンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「
プロパティ 値 タイトル メール 要素名 customer_Email 必須フィールド Enabled -
添付ファイル コンポーネントをフッターコンポーネントの前にドラッグします。コンポーネントのプロパティを開き、以下のテーブルに示す値を設定して「
-
送信ボタン コンポーネントをアダプティブフォームにドラッグします。フッターコンポーネントの前にドロップします。コンポーネントのプロパティを開き、「要素名」を
address_addition_update_submitに変更して「
