アダプティブフォームのスタイル設定 do-not-publish-style-your-adaptive-form

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

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／Forms／テーマ ​に移動します。デフォルトの URL は http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes です。

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

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

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

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

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

図： shipping-address-add-update-form アダプティブフォームを使用したテーマエディター

図： デフォルトのフォームを使用したアダプティブフォーム

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

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

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

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

画像とグラデーション／+ 追加 ​にポインターを合わせ、 「画像」をタップします。以下のプロパティを設定し、「 」をタップします。

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

「顧客 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 > ツール > 導入 > Cloud Services. Cloud Servicesページで、に移動します。 サードパーティのサービス > Typekit ​をクリックし、 設定 Typekit の下に表示されます。 設定が既に使用可能な場合は、「+」ボタンをクリックして新しいインスタンスを作成します。

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

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

Typekit に追加されたフォントは、 テキスト アコーディオンを使用します。