Show Menu
THEMEN×

Adaptive Formulare gestalten

Erfahren Sie, wie Sie ein benutzerdefiniertes Design erstellen, einzelne Komponenten formatieren und Webfonts in einem Design verwenden
Diese Schulung ist ein Schritt in der Serie Erstellen Sie Ihr erstes adaptives Formular . Es wird empfohlen, der Serie in chronologischer Reihenfolge zu folgen, um den vollständigen Anwendungsfall zu verstehen, auszuführen und zu demonstrieren.

Über die Schulung

Sie können Themen verwenden, um einem adaptiven Formular eine eindeutige Darstellung und einen einzigartigen Stil zu geben. Sie können Standarddesigns anwenden, die mit dem adaptiven Formulareditor bereitgestellt werden, oder eigene Designs erstellen. AEM Forms bietet einen Design-Editor zum Erstellen benutzerdefinierter Designs . Ein einzelnes Design kann das gleiche Aussehen auf Mobilgeräten, Tablets oder Desktops bieten. Vorkenntnisse von CSS oder LESS sind nicht erforderlich, um den Designeditor zu verwenden, aber sie sind erwünscht.
Am Ende der Schulung lernen Sie Folgendes:
  • Wenden Sie ein Standarddesign auf ein adaptives Formular an
  • Erstellen Sie mithilfe des Designeditors ein Design für das adaptive Formular
  • Entwerfen Sie einzelne Komponenten
  • Bonusabschnitt: Verwenden Sie Webfonts in einem benutzerdefinierten Design
Nach dem Abschließen des Lernprogramms sieht das Formular wie folgt aus:

Bevor Sie beginnen

Laden Sie die unten abgebildeten kopfzeilenartigen und Logo-Bilder auf Ihrem lokalen Computer herunter. Die Kopfzeile des adaptiven Formulars shipping-address-add-update-form verwendet die kopfzeilenartigen und Logo-Bilder. Das kopfzeilenartige Bild erscheint auf der rechten Seite der Kopfzeile.

Schritt 1: Wenden Sie ein Design auf Ihr adaptives Formular an

Der Adaptive Forms Editor bietet mehrere Standarddesigns. Wenn Sie beabsichtigen, keinen benutzerdefinierten Stil für Ihr adaptives Formular zu verwenden, können Sie Ihre adaptiven Formulare auch mit einem Standarddesign veröffentlichen. Designs sind unabhängig von adaptiven Formularen. Sie können dasselbe Design auf mehrere adaptive Formulare anwenden. So wenden Sie ein Design auf ein adaptives Formular an:
  1. Öffnen Sie Ihr adaptives Formular zum Bearbeiten.
  2. Öffnen Sie die Eigenschaften von Adaptive Form - Container . Navigieren Sie im Eigenschaften-Browser zu Standard > Adaptives Formulardesign . Das Feld Adaptives Formulardesign listet alle vordefinierten und benutzerdefinierten Designs auf. Standardmäßig wird das Canvas-Design angewendet.
  3. Wählen Sie ein Design aus dem Feld Adaptives Formulardesign . Zum Beispiel: Umfragedesign . Tippen Sie auf , um das ausgewählte Design anzuwenden.
Abbildung: Adaptives Formular mit dem Standarddesign
Abbildung: Adaptives Formular mit dem Thema "Umfrage"

Schritt 2: Aktualisieren Sie Ihr adaptives Formular

Das oben angezeigte Design erfordert Änderungen am Platzhaltertext und Logo des vorhandenen adaptiven Formulars. Führen Sie die folgenden Schritte aus, um die erforderlichen Änderungen vorzunehmen:
  1. Ändern Sie das vorhandene Logo und den Text der Kopfzeile. Entfernen des Logos:
    1. Öffnen Sie das Formular im Formulareditor.
    2. Tap logo image in the header component and tap properties. Tippen Sie in der Bildeigenschaft auf X, um das vorhandene Logobild zu entfernen.
    3. Tap upload, select the logo.png, and tap to save the changes. The image was downloaded in the Before you start section.
    4. Tippen Sie auf Kopfzeilentext We.Retail und dann auf , edit . Ändern Sie den Kopfzeilentext in we retail . Wenden Sie fett formatierte Formatierungen nur we in an we retail .
  2. Entfernen Sie Titel und fügen Sie Platzhaltertext hinzu:
    1. Tap the Customer ID field and tap properties.
    2. Kopieren Sie den Inhalt des Felds Titel in das Feld Platzhaltertext .
    3. Löschen Sie den Inhalt des Felds Titel und tippen Sie auf .
    4. Wiederholen Sie die vorherigen drei Schritte für alle Textfelder, das numerische Feld und das E-Mail-Feld im Formular.

Schritt 3: Erstellen Sie ein benutzerdefiniertes Design für Ihr adaptives Formular

Sie können den Design-Editor verwenden, um benutzerdefinierte Designs zu erstellen. Der Design-Editoreditor ist ein leistungsstarker WYSIWYG-Editor. Es ist eine visuelle Methode, um CSS auf verschiedene Komponenten eines adaptiven Formulars anzuwenden. Es bietet bessere Steuerelemente, um Komponenten und Bereiche eines adaptiven Formulars zu gestalten.
Ein Design ist eine separate Entität wie adaptive Formulare. Es enthält Stile (CSS) für die Komponenten und Bereiche eines adaptiven Formulars. Die Stile umfassen Eigenschaften wie Hintergrundfarben, Statusfarben, Transparenz, Ausrichtung und Größe. Wenn Sie ein Design anwenden, wird der angegebene Stil auf die entsprechenden Komponenten eines adaptiven Formulars angewendet.
In diesem Lernprogramm werden Kopf- und Fußzeilen, Text- und numerische Komponenten, Anhangskomponenten und Schaltflächen formatiert. Beginnen wir mit dem Erstellen eines Designs:

Designs erstellen

  1. Log in to the AEM author instance and navigate to Adobe Experience Manager > Forms > Themes . Die Standard-URL lautet http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes .
  2. Tippen Sie auf  Erstellen und wählen Sie Design . Die Seite „Design erstellen“ mit den Feldern zum Erstellen eines Designs wird angezeigt. Die Felder „Titel“ und „Name“ sind obligatorisch.
    • Titel: Geben Sie einen Titel des Designs an. Zum Beispiel: Globales Design. Der Titel hilft Ihnen, das Design in der Liste der Designs zu identifizieren.
    • Name: Geben Sie den Namen des Designs an. Zum Beispiel: Globales-Design. Im Repository wird ein Knoten mit dem angegebenen Namen erstellt. Wenn Sie mit der Eingabe des Titels beginnen, wird automatisch ein Wert für das Feld „Name“ vorgeschlagen. Sie können den vorgeschlagenen Wert gegebenenfalls ändern. Im Feld „Name“ dürfen nur alphanumerische Zeichen, Bindestriche und Unterstriche eingegeben werden. Ungültige Eingaben werden durch Bindestriche ersetzt.
  3. Tippen Sie auf Erstellen . Ein Design wird erstellt und es wird ein Dialogfeld zum Öffnen des Formulars zur Bearbeitung angezeigt. Tap Open to open the newly created theme in a new tab. Design wird im Design-Editor geöffnet. Zum Formatieren verwendet der Design-Editor ein Standardformular, das mit AEM Forms geliefert wird.
    For information about using theme editor UI, see About the theme editor .
  4. Tap Theme Options > Configure . In the Preview Form field, select the shipping-address-add-update-form adaptive form, tap , tap Save . Jetzt ist der Design-Editor konfiguriert, um Ihr eigenes adaptives Formular anstelle des adaptiven Standardformulars zu benutzen. Tippen Sie auf Abbrechen , um zum Design-Editor zurückzukehren.
    Abbildung: Design-Editor mit dem adaptiven Formular shipping-address-add-update-form
    Abbildung: Adaptives Formular mit dem Standardformular

Formatieren Sie die Datenerfassungskomponente und wenden Sie einen Hintergrund auf das adaptive Formular an.

Sie können mehrere Komponenten in einem adaptiven Formular verwenden, um Daten zu erfassen. Zum Beispiel Textfeld und Zahlenfeld. Sie können für alle Datenerfassungskomponenten denselben Stil oder für jede Komponente einen separaten Stil bereitstellen. In diesem Lernprogramm wird ein identischer Stil auf numerische Felder (Kunden-ID, Postleitzahl) und Textfelder (Kunden-ID, Name, Lieferadresse, Status, E-Mail) angewendet. So gestalten Sie die Datenerfassungskomponenten:
  1. Tippen Sie auf das Feld „Kunden-ID“ und tippen Sie auf die Option Feld-Widget Legen Sie die folgenden Eigenschaften fest und tippen Sie auf .
Akkordeon Eigenschaft Wert
Rahmen Rahmenfarbe A7A9AC
Rahmen Rahmenradius
  • Oben: 7px
  • Rechts: 7px
  • Unten: 7px
  • Links: 7px
Text Schriftfamilie Arial
Text Schriftfarbe 939598
Text Schriftgrad 18px
Abmessungen und Position Breite 60%
Abmessungen und Position Marge
  • Links: 10rem
  1. Tippen Sie auf den leeren Bereich über dem Feld Kunden-ID und tippen Sie auf Responsive Bereichscontainer . Legen Sie den Hintergrund > Hintergrundfarbe auf F1F2F2 fest. Tippen Sie auf .

Gestalten Sie die Schaltflächen

You can use a custom theme to apply an identical style to all the buttons of the adaptive form and inline styling to apply a style to a specific button. So gestalten Sie die Schaltflächen:
  1. Tippen Sie auf Senden und dann auf Option . Legen Sie die folgenden Eigenschaften fest und tippen Sie auf .
Akkordeon Eigenschaft Wert
Hintergrund Hintergrundfarbe F6921E
Rahmen Rahmenfarbe F6921E
Rahmen Rahmenradius
  • Oben: 7px
  • Rechts: 7px
  • Unten: 7px
  • Links: 7px
Text Schriftfamilie Arial
Text Schriftfarbe FFFFFF
Text Schriftgrad 18px
  1. Wenden Sie das benutzerdefinierte Design , Globales Design, auf Ihr adaptives Formular an. Wenn der Stil nicht im adaptiven Formular übernommen wird, löschen Sie den Browser-Cache und versuchen Sie es erneut.

Schritt 4: Gestalten Sie einzelne Komponenten

Einige Stile gelten nur für eine bestimmte Komponente. Solche Komponenten werden im adaptiven Formulareditor gestaltet.
  1. Wählen Sie in der oberen Leiste die Option Stil .
  2. Tap the Attach button and tap the icon. Set the following properties in the Dimensions and Position accordion:
    Eigenschaft
    Wert
    Gleitkomma
    Links
    Breite
    10%
  3. Tap the Government approved address proof option and tap the icon. Legen Sie die folgenden Eigenschaften fest:
Akkordeon Eigenschaft Wert
Abmessungen und Position Gleitkomma Links
Abmessungen und Position Breite 73%
Abmessungen und Position Erweiterte Umrandung
  • Links: 10px
Abmessungen und Position Höhe 40px
Abmessungen und Position Marge
  • Rechts: 2rem
  • Links: 10rem
Hintergrund Hintergrundfarbe FFFFFF
Rahmen Rahmenbreite 1px
Rahmen Rahmenstil Durchgezogen
Rahmen Rahmenfarbe A7A9AC
Rahmen Rahmenradius 7px
Text Schriftfamilie Arial
Text Schriftfarbe BCBEC0
Text Schriftgrad 18px
Text Zeilenhöhe 2
  1. Tap the Submit button and tap the icon. Legen Sie die folgenden Eigenschaften fest:
Akkordeon Eigenschaft Wert
Abmessungen und Position Gleitkomma Rechts
Abmessungen und Position Marge
  • Oben: 5rem
  • Rechts: 14rem
  • Unten: 20px
  • Links: 20px
Hintergrund Hintergrundfarbe F6921E
Rahmen Rahmenfarbe F6921E

Schritt 5: Bonusabschnitt: Verwenden von Webschriftarten in einem benutzerdefinierten Design

Sie können verschiedene Schriftarten verwenden, um ein adaptives Formular zu entwerfen. Alle Geräte, auf denen das adaptive Formular angezeigt wird, verfügen möglicherweise nicht über die zum Entwerfen des adaptiven Formulars verwendeten Schriftarten. Sie können einen Webschriftartdienst verwenden, um die erforderlichen Schriftarten an das Zielgruppe-Gerät zu senden.
Adobe Typekit ist ein Webschriftartdienst. Sie können den Dienst mit adaptiven Formularen konfigurieren und verwenden. So verwenden Sie Adobe Typekit in einem adaptiven Formular:
Typekit heißt jetzt Adobe Fonts und ist in Creative Cloud und anderen Abonnements enthalten. Weitere Informationen
  1. Create an Adobe Typekit account, create a kit, add font Myriad Pro to the kit, publish the kit, and obtain the Kit ID. Es ist erforderlich, Adobe Typekit-Schriftarten (Webfonts) in einem adaptiven Formular zu verwenden.
  2. In the AEM Forms server, navigate to Adobe Experience Manager > Tools > Deployment > Cloud Services . On the Cloud Services page, navigate to Third Party Services > Typekit , and click Configure Now under Typekit. Wenn eine Konfiguration bereits zur Verfügung steht, klicken Sie auf die Schaltfläche +, um eine neue Instanz zu erstellen.
    On the Create Configuration dialog, specify a Title for the configuration, and click Create . Daraufhin werden Sie zur Seite „Konfiguration“ geleitet. In the Edit Component dialog that appears, provide your Kit ID and click OK .
  3. Konfigurieren Sie Ihr Design für die Verwendung der TypeKit-Konfiguration. On the author instance, open Global Theme in the theme editor. In the theme editor, navigate to Theme Options > Configure. In Typekit Configuration field, select the kit, and click Save .
    The fonts added to the Typekit are available for selection in the Text accordion of all the components.