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:

Formular mit einem benutzerdefinierten Thema

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.

Datei laden

Datei laden

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.

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

  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 aem_6_3_forms_save, um das ausgewählte Design anzuwenden.

Adaptives Formular mit dem Standarddesign

Abbildung: Adaptives Formular mit dem Standarddesign

Adaptives Formular mit dem Umfragedesign

Abbildung: Adaptives Formular mit dem Design "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.

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

    2. Tippen Sie auf das Logobild in der Kopfzeilenkomponente und dann auf die Eigenschaften cmppr. Tippen Sie in der Bildeigenschaft auf X, um das vorhandene Logobild zu entfernen.

    3. Tippen Sie auf Hochladen, wählen Sie die Datei logo.png und tippen Sie auf aem_6_3_forms_save, um die Änderungen zu speichern. Das Bild wurde im Abschnitt Vor dem Beginn heruntergeladen.

    4. Tippen Sie auf den Kopfzeilentext We.Retail und dann auf aem_6_3_edit edit. Ändern Sie den Kopfzeilentext in we retail. Wenden Sie fett formatierte Formatierungen nur auf wein we retail an.

    we-retail-logo-text

  2. Entfernen Sie Titel und fügen Sie Platzhaltertext hinzu:

    1. Tippen Sie auf das Feld Kunden-ID und dann auf cmppr-Eigenschaften.
    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 aem_6_3_forms_save.
    4. Wiederholen Sie die vorherigen drei Schritte für alle Textfelder, das numerische Feld und das E-Mail-Feld im Formular.

    updated-adaptive-form

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. Melden Sie sich bei der AEM Autoreninstanz an und navigieren Sie zu Adobe Experience Manager > Forms > Themen. 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. Tippen Sie auf Öffnen, um das neu erstellte Design in einer neuen Registerkarte zu öffnen. Design wird im Design-Editor geöffnet. Zum Formatieren verwendet der Design-Editor ein Standardformular, das mit AEM Forms geliefert wird.

    Informationen zur Verwendung der Benutzeroberfläche des Design-Editors finden Sie unter Informationen zum Design-Editor.

  4. Tippen Sie auf Themenoptionen Themenoptionen > Konfigurieren. Wählen Sie im Feld Formular für Vorschauen das adaptive Formular shipping-address-add-update-form aus, tippen Sie auf aem_6_3_forms_save und dann auf Speichern. 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.

    custom-theme

    Abbildung: Design-Editor mit dem adaptiven Formular shipping-address-add-update-form

    create-a-theme

    Abbildung: Adaptives Formular mit dem Standardformular

Kopf- und Fußzeile bieten einem adaptiven Formular ein konsistentes und unverwechselbares Aussehen. Im Allgemeinen enthält die Kopfzeile das Logo und den Namen der Organisation. Die Fußzeile enthält Copyright-Informationen, die in allen Formularen einer Organisation identisch bleiben. So formatieren Sie Kopf- und Fußzeile des adaptiven Formulars „shipping-address-add-update-form adaptive form“:

  1. Navigieren Sie im Bereich „Auswahl“ zur Option Kopfzeile > Text. Der Bereich „Auswahl“ befindet sich auf der linken Seite des Design-Editors. Wenn das Bedienfeld nicht sichtbar ist, tippen Sie auf Seitenbedienfeld Seitenbedienfeld ein-/ausschalten.

  2. Legen Sie die folgenden Eigenschaften im Akkordeon Text fest und tippen Sie auf aem_6_3_forms_save.

    Eigenschaft Wert
    Schriftfamilie Arial
    Schriftfarbe FFFFFF
    Schriftgrad 54px

  3. Tippen Sie auf das Kopfzeilen-Widget und tippen Sie auf Kopfzeile. Die Optionen zum Formatieren des Kopfzeilen-Widgets werden auf der linken Seite angezeigt. Erweitern Sie das Akkordeon Dimensionen und Position, setzen Sie Höhe auf 120px und tippen Sie auf aem_6_3_forms_save.

  4. Erweitern Sie das Akkordeon „Hintergrund“-des Kopfzeilen-Widgets und stellen Sie die Hintergrundfarbe auf F6921E. ein.

    Bewegen Sie den Mauszeiger über Bild und Verlauf > + Hinzufügen, und tippen Sie auf Bild. Legen Sie die folgenden Eigenschaften fest und tippen Sie auf aem_6_3_forms_save.

    Eigenschaft Wert
    image Laden Sie header-style.png hoch. Das Bild wurde im Abschnitt Vor dem Beginn heruntergeladen.
    Position Rechts unten
    Anordnung Keine Wiederholung

  5. Tippen Sie im Design-Editor auf das Logo in der Kopfzeile und tippen Sie auf Kopfzeilen-Logo. Erweitern Sie das Akkordeon "Dimensionen und Position", legen Sie die folgenden Eigenschaften fest und tippen Sie auf aem_6_3_forms_save.

Marge Wert
Marge
  • Oben: 1.5rem
  • Unten: -35px
  • Links: 1rem

Tipp: Tippen Sie auf das Link-Symbol, um einen anderen Wert für jedes Feld zur Verfügung zu stellen.
Höhe 4.75rem
  1. Tippen Sie auf das Fußzeilen-Widget und tippen Sie auf Fußzeile. Erweitern Sie das Akkordeon Hintergrund, setzen Sie Hintergrundfarbe auf F6921E und tippen Sie auf aem_6_3_forms_save.

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 aem_6_3_forms_save.
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 aem_6_3_forms_save.

Gestalten Sie die Schaltflächen

Sie können ein benutzerdefiniertes Design verwenden, um einen identischen Stil auf alle Schaltflächen des adaptiven Formulars anzuwenden, und Inline-Stil, um einen Stil auf eine bestimmte Schaltfläche anzuwenden. 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 aem_6_3_forms_save.
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 18 px

  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.

    style-data-capture-components

Schritt 4: Gestalten Sie einzelne Komponenten

Einige Stile gelten nur für eine bestimmte Komponente. Solche Komponenten werden im adaptiven Formulareditor gestaltet.

  1. Öffnen Sie Ihr adaptives Formular zum Bearbeiten. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. Wählen Sie in der oberen Leiste die Option Stil.

    style-option

  3. Tippen Sie auf die Schaltfläche Attach und dann auf das Symbol aem_6_3_edit. Legen Sie die folgenden Eigenschaften im Akkordeon Dimensionen und Position fest:

    Eigenschaft Wert
    Gleitkomma Links
    Breite 10%

  4. Tippen Sie auf die Option Testversand der von der Regierung genehmigten Adresse und dann auf das Symbol aem_6_3_edit. 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 18 px
Text Zeilenhöhe 2
  1. Tippen Sie auf die Schaltfläche Senden und dann auf das Symbol aem_6_3_edit. 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

styled-adaptive-form-1

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:

HINWEIS

typekit-to-adobe- fontsTypekit heißt jetzt Adobe Fonts und ist in Creative Cloud und anderen Abonnements enthalten. Weitere Informationen

  1. Erstellen Sie ein Adobe Typekit-Konto, erstellen Sie ein Kit, fügen Sie dem Kit die Schriftart Myriad Pro hinzu, veröffentlichen Sie das Kit und rufen Sie die Kit-ID ab. Es ist erforderlich, Adobe Typekit-Schriftarten (Webfonts) in einem adaptiven Formular zu verwenden.

  2. Navigieren Sie auf dem AEM Forms-Server zu adobeexperiencemanager Adobe Experience Manager > Tools hammer > Bereitstellung > Cloud Services. Navigieren Sie auf der Seite "Cloud Services"zu Dienste von Drittanbietern > Typekit und klicken Sie unter Typekit auf Konfigurieren Jetzt. Wenn eine Konfiguration bereits zur Verfügung steht, klicken Sie auf die Schaltfläche +, um eine neue Instanz zu erstellen.

    Geben Sie im Dialogfeld "Konfiguration erstellen"einen Titel für die Konfiguration ein und klicken Sie auf Erstellen. Daraufhin werden Sie zur Seite „Konfiguration“ geleitet. Geben Sie im Dialogfeld Komponente bearbeiten Ihre Kit-ID ein und klicken Sie auf OK.

  3. Konfigurieren Sie Ihr Design für die Verwendung der TypeKit-Konfiguration. Öffnen Sie auf der Autoreninstanz Globales Thema im Design-Editor. Navigieren Sie im Design-Editor zu Themenoptionen theme-options > Konfigurieren. Wählen Sie im Feld Typekit-Konfiguration das Kit aus und klicken Sie auf Speichern.

    Die Schriftarten, die dem Typekit hinzugefügt werden, stehen im Akkordeon Text aller Komponenten zur Auswahl.

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now