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 provide a theme editor to create custom themes. 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 . In the image property, tap X to remove the existing logo image.
    3. Tippen Sie auf Hochladen , wählen Sie die Datei logo.png und tippen Sie auf , um die Änderungen zu speichern. 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. Delete the content of the Title field and tap .
    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 . The Create Theme page with the fields required to create a theme appears. Die Felder Titel und Name sind obligatorisch.
    • Title: Specify a title of the theme. 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. For styling, the theme editor uses an out-of-the-box adaptive form shipped with AEM Forms.
    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. Tap the Customer ID field and tap the Field Widget option. Set the following properties and tap .
    Accordion 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
  2. Tap on the empty area above the Customer ID field and tap Responsive Panel Container . Legen Sie den Hintergrund > Hintergrundfarbe auf F1F2F2 fest. Tap .

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 . Set the following properties and tap .
    Accordion Eigenschaft</b 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
  2. 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:
    Accordion 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
  4. Tap the Submit button and tap the icon. Legen Sie die folgenden Eigenschaften fest:
    Accordion 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 Webschriftarten-Dienst. Sie können den Dienst mit adaptiven Formularen konfigurieren und verwenden. To use Adobe Typekit in an adaptive form:
Typekit is now called Adobe Fonts and is included with Creative Cloud and other subscriptions. 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. It is required to use Adobe Typekit fonts (Web fonts) in an adaptive form.
  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. Configure your theme to use the TypeKit configuration. 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.