アダプティブフォームのスタイル設定

アダプティブフォームを編集用に開きます。

http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html  

アダプティブフォームコンテナのプロパティを開きます。プロパティブラウザーで、基本／アダプティブフォームのテーマに移動します。すべての初期設定済みテーマとカスタムテーマが、「アダプティブフォームのテーマ」フィールドに表示されます。デフォルトではキャンバステーマが適用されます。

「アダプティブフォームのテーマ」フィールドでテーマを選択します（調査テーマなど）。 をタップして、選択したテーマを適用します。

ヘッダーの既存のロゴとテキストを変更します。ロゴを削除するには、次の手順を実行します。

1. フォームエディターでフォームを開きます。
   http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
2. ヘッダーコンポーネントでロゴの画像をタップし、「プロパティ」 をタップします。画像のプロパティで X をタップし、既存のロゴの画像を削除します。
3. 「アップロード」をタップし、logo.png を選択します。次に、 をタップして変更内容を保存します。この画像は「事前準備」セクションでダウンロードした画像です。
   
4. ヘッダーテキスト We.Retail をタップし、「編集」 をタップします。ヘッダーテキストを we retail に変更します。we retail の we のみに太字書式設定を適用します。
   

タイトルを削除してプレースホルダーテキストを追加します。

1. 「顧客 ID」フィールドをタップし、「プロパティ」 をタップします。
   
2. 「タイトル」フィールドの内容を「プレースホルダーテキスト」フィールドにコピーします。
   
3. 「タイトル」フィールドの内容を削除し、 をタップします。
4. フォーム内のすべてのテキストボックス、数値ボックス、電子メールフィールドで、上記の 3 つの手順を繰り返します。

AEM オーサーインスタンスにログインし、Adobe Experience Manager／フォーム／テーマに移動します。デフォルトの URL は http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes です。    

「作成」をタップし、「テーマ」を選択します。テーマの作成が必要なフィールドが含まれた「テーマを作成」ページが表示されます。「タイトル」と「ドキュメント名」の各フィールドは入力が必須です。

• タイトル：テーマのタイトルを指定します。（グローバルテーマなど）。タイトルはテーマのリストから目的のテーマを見つけるのに役立ちます。
• 名前：テーマの名前を指定します。（グローバルテーマなど）。指定された名前のノードがリポジトリに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用することができます。無効な入力はすべてハイフンに置き換えられます。

「作成」をタップします。テーマが作成され、フォームを編集用に開くためのダイアログが表示されます。「開く」をタップし、新しく作成されたテーマを新しいタブで開きます。テーマがテーマエディターで開きます。スタイルを設定する際、テーマエディターは AEM Forms に付属している初期設定済みアダプティブフォームを使用します。

テーマエディター UI の使用について詳しくは、「テーマエディターについて」を参照してください。

テーマオプション ／設定をタップします。「フォームをプレビュー」フィールドで shipping-address-add-update-form アダプティブフォームを選択し、 をタップして、「保存」をタップします。テーマエディターで、デフォルトのアダプティブフォームではなく独自のアダプティブフォームを使用できるようになります。テーマエディターに戻るには、「キャンセル」をタップします。

セレクターパネルでヘッダー／テキストオプションに移動します。セレクターパネルはテーマエディターの左側にあります。パネルが表示されない場合は、「サイドパネルを切り替え
」をタップします。

「テキスト」アコーディオンで以下のプロパティを設定し、 をタップします。  

ヘッダーウィジェットをタップし、「ヘッダー」をタップします。ヘッダーウィジェットのスタイルを設定するオプションが左側に表示されます。「寸法と位置」アコーディオンを展開し、「高さ」を 120 px に設定して、 をタップします。

ヘッダーウィジェットの「背景」アコーディオンを展開し、「背景色」を F6921E に設定します。

画像とグラデーション／+ 追加にカーソルを置き、  「画像」をタップします。次のプロパティを設定し、 をタップします。

テーマエディターで、ヘッダーのロゴをタップし、「ヘッダーロゴ」をタップします。「寸法と位置」アコーディオンを展開し、次のプロパティを設定して、 をタップします。

フッターウィジェットをタップし、「フッター」をタップします。「背景」アコーディオンを展開し、「背景色」を F6921E に設定して、 をタップします。

「顧客 ID」フィールドをタップし、「フィールドウィジェット」オプションをタップします。次のプロパティを設定し、 をタップします。

「顧客 ID」フィールドの上部で空白領域をタップし、「レスポンシブパネルコンテナ」をタップします。背景／背景色を F1F2F2 に設定します。 をタップします。

「送信」ボタンをタップし、「ボタン」オプションをタップします。次のプロパティを設定し、 をタップします。

アダプティブフォームにカスタムテーマを適用するか、グローバルテーマを適用します。スタイルがアダプティブフォームに反映されない場合は、ブラウザーのキャッシュを削除した後、もう一度実行してください。

アダプティブフォームを編集用に開きます。
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

上部バーで「スタイル」オプションを選択します。

「添付」ボタンをタップし、  アイコンをタップします。「寸法と位置」アコーディオンで次のプロパティを設定します。

「Government approved address proof」オプションをタップし、  アイコンをタップします。次のプロパティを設定します。

「送信」ボタンをタップし、   アイコンをタップします。次のプロパティを設定します。

Adobe Typekit アカウントを作成し、キットを作成します。次に、Myriad Pro フォントをキットに追加してキットを発行し、キット ID を取得します。アダプティブフォームでは Adobe Typekit フォント（Web フォント）を使用する必要があります。  

AEM Forms サーバーで、Adobe Experience Manager／ツール ／デプロイメント／クラウドサービスに移動します。クラウドサービスページで、サードパーティーのサービス／Typekit に移動し、「今すぐ設定」をクリックします。既に設定を行っている場合は「+」ボタンをクリックし、新しいインスタンスを作成します。

設定を作成ダイアログで、新しい設定の「タイトル」を指定し、「作成」をクリックします。設定ページにリダイレクトされます、コンポーネントを編集ダイアログが表示されたら、「キット ID」を入力し、「OK」をクリックします。

TypeKit 設定を使用するようにテーマを設定します。オーサーインスタンスで、テーマエディターを使用してグローバルテーマを開きます。テーマエディターで、テーマオプション  ／設定に移動します。  「Typekit 設定」フィールドでキットを選択し、「保存」をクリックします。

Typekit に追加したフォントは、すべてのコンポーネントの「テキスト」アコーディオンで選択できます。