Schulung: Erstellen eines adaptiven Formulars

02-create-adaptive-form-main-image

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

Adaptive Formulare sind Formulare der neuen Generation, die dynamisch und responsiv sind. Sie können adaptive Formulare verwenden, um ein personalisiertes Benutzererlebnis zu schaffen. You can also integrate adaptive forms with Adobe Analytics for usage statistics and Adobe Campaign for campaign management. For more information about adaptive forms capabilities, see Introduction to authoring adaptive forms.

Es ist einfacher, Formulare zu erstellen und zu verwalten, wenn ein ordnungsgemäßer Prozess eingehalten wird. In diesem Artikel lernen Sie Folgendes:

Am Ende des Artikels haben Sie ein Formular, was so ähnlich wie Folgendes aussieht:

Schritt 1: Adaptives Formular erstellen

  1. Melden Sie sich bei Ihrer AEM-Autoreninstanz an und navigieren Sie zu Adobe Experience Manager > Formulare > Formulare und Dokumente. Die Standard-URL lautet http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

  2. Tippen Sie auf Erstellen und wählen Sie Adaptives Formular. Eine Option zum Auswählen einer Vorlage wird angezeigt. Tippen Sie auf die leere Vorlage, um sie auszuwählen, und dann auf Weiter.

  3. Eine Option Eigenschaften hinzufügen wird angezeigt. Die Felder Titel und Name sind obligatorisch.

    • Titel: Geben Sie Add new or update shipping address im Feld Titel an. Das Feld „Titel“: Gibt den Anzeigenamen des Formulars an. The title helps you identify the form in the AEM Forms user interface.
    • Name: Geben Sie shipping-address-add-update-form im Feld Name an. Das Feld „Name“ gibt den Namen des Formulars an. 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.
  4. Tippen Sie auf Erstellen. Ein adaptives Formular wird erstellt und es wird ein Dialogfeld zum Öffnen des Formulars zur Bearbeitung angezeigt. Tap Open to open the newly created form in a new tab. Das Formular wird zur Bearbeitung geöffnet. Es zeigt auch die Seitenleiste an, um das neu erstellte Formular entsprechend den Anforderungen anzupassen.

    Weitere Informationen zur Authoring-Benutzeroberfläche für adaptive Formulare und zu verfügbaren Komponenten finden Sie unter Einführung in das Authoring adaptiver Formulare.

    new-created-adaptive-form

AEM Forms provides many components to display information on an adaptive form. Kopfzeilen- und Fußzeilen-Komponenten sorgen für ein konsistentes Erscheinungsbild eines Formulars. Eine Kopfzeile enthält normalerweise das Logo eines Unternehmens, den Titel des Formulars und eine Zusammenfassung. Eine Fußzeile enthält meist Copyright-Informationen und Links zu anderen Seiten.

  1. Tippen Sie auf umschaltbares Bedienfeld > treeexpandall. Der Komponentenbrowser wird geöffnet. Ziehen Sie die Komponente Kopfzeile aus dem Komponentenbrowser in das adaptive Formular.

  2. Tippen Sie auf Logo. Der Symbolleiste wird angezeigt. Tippen Sie auf aem_6_3_edit in der Symbolleiste, geben Sie We.Retail ein und tippen Sie auf aem_6_3_forms_save.

  3. Tippen Sie auf „Bild“. Der Symbolleiste wird angezeigt. Tippen Sie auf cmppr. Der Eigenschaften-Browser wird auf der linken Seite des Bildschirms geöffnet. Suchen Sie das Logo und laden Sie es hoch. Tippen Sie auf aem_6_3_forms_save. Das Bild erscheint in der Kopfzeile.

    Sie können auf „Datei abrufen“ tippen, um das in diesem Artikel verwendete Logo herunterzuladen, falls Sie keines haben.

    Datei laden

  4. Drag the Footer component from treeexpandall to the adaptive form. Nach diesem Schritt sieht das Formular wie folgt aus:

    adaptive-form-with-headers-and-footers

Schritt 3: Komponenten hinzufügen, um Informationen zu erfassen und anzuzeigen

Komponenten sind Bausteine ​​eines adaptiven Formulars. AEM Forms provides many components to capture and display information in an adaptive form. You can drag the components from treeexpandall to a form. To learn about available components and corresponding functionality, see Introduction to authoring adaptive forms.

  1. Drag the Numeric Box component to the adaptive form. Platzieren Sie sie vor der Fußzeilenkomponente. Open properties of the component, change Title of the component to Customer ID, change Element Name to customer_ID, enable the Required Field option, enable the Use HTML5 Number Input Type option, and tap aem_6_3_forms_save.

  2. Ziehen Sie drei Textfeldkomponenten in das adaptive Formular. Platzieren Sie diese vor die Fußzeilenkomponente. Legen Sie die folgenden Eigenschaften für diese Textfelder fest:

    Property Textfeld 1
    Textfeld 2
    Textfeld 3
    Titel Name
    Lieferadresse Bundesland/Kanton
    Elementname customer_Name
    customer_Shipping_Address customer_State
    Erforderliches Feld Aktiviert Aktiviert Aktiviert
    Mehrere Zeilen zulassen
    Deaktiviert Aktiviert Deaktiviert
  3. Ziehen Sie eine Numerisches Feld-Komponente vor die Fußzeilenkomponente. Open properties of the component, set values listed in the below table, Tap aem_6_3_forms_save.

    Eigenschaft Wert
    Titel Postleitzahl
    Elementname customer_ZIPCode
    Maximale Anzahl von Ziffern 6
    Erforderliches Feld Aktiviert
    Mustertyp anzeigen Kein Muster
  4. Ziehen Sie eine E-Mail-Komponente vor die Fußzeilenkomponente. Open properties of the component, set values listed in the below table, and tap aem_6_3_forms_save.

    Eigenschaft Wert
    Titel E-Mail
    Elementname customer_Email
    Erforderliches Feld Aktiviert
  5. Ziehen Sie eine Dateianhang-Komponente vor die Fußzeilenkomponente. Open properties of the component, set values listed in the below table, and tap aem_6_3_forms_save.

    Eigenschaft Wert
    Titel Von Behörden anerkannter Adressnachweis
    Elementname customer_Address_Proof
    Erforderliches Feld Aktiviert
  6. Ziehen Sie eine Sendeschaltfläche-Komponente in das adaptive Formular. Platzieren Sie sie vor der Fußzeilenkomponente. Öffnen Sie Eigenschaften der Komponente, ändern Sie den Elementnamen in address_addition_update_submit, tippen Sie auf aem_6_3_forms_save. Das Layout des Formulars ist vollständig und das Formular sieht wie folgt aus:

    adaptive-form-with-all-the-components

Schritt 4: Sendeaktion für das adaptive Formular konfigurieren

Eine Sendeaktion wird ausgelöst, wenn ein Benutzer in einem adaptiven Formular auf die Schaltfläche „Senden“ klickt. Sie können eine Sendeaktion verwenden, um Formulardaten im lokalen Repository zu speichern, Formulardaten an einen REST-Endpunkt zu senden, Formulardaten als E-Mail zu senden und mehr. Adaptive Formulare bieten einige weitere vordefinierte Übermittlungsaktionen. Weitere Informationen finden Sie unter Konfigurieren der Sendeaktion.

Using the following steps, you can configure email submit action and demo submit action of the form:

  1. Konfigurieren Sie den E-Mail-Server. Weitere Informationen finden Sie unter Konfigurieren von E-Mail-Benachrichtigungen..

  2. Tap Form Container in the Content browser and tap cmppr. Der Eigenschaften-Browser wird auf der linken Seite geöffnet.

  3. Navigieren Sie zu Übermittlung > Übermittlungsaktion. Wählen Sie E-Mail senden. Specify the following values and tap aem_6_3_forms_save.

    Eigenschaft Wert
    Von donotreply@weretail.com
    To ${customer_Email}
    Betreff Bestätigung: Sie haben die Lieferadresse auf der We.Retail-Website hinzugefügt.
    E-Mail-Vorlage Hi ${customer_Name}, The following address is added as the shipping address for your account:
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode}
    Regards, We.Retail
    Anlagen einschließen Aktiviert

    Ihr Formular ist jetzt bereit. Jetzt können Sie das Formular in der Vorschau anzeigen und die Funktionalität testen. If you have used the name mentioned the tutorial and accessing the form on the machine running AEM Forms server, then the form is available at http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Schritt 5: Adaptives Formular in der Vorschau ansehen und senden

Sie können die Option Vorschau verwenden, um das Erscheinungsbild und Verhalten eines Formulars zu bewerten. Sie können ein Formular im Vorschaumodus senden und auch die für ein Formular geltenden Validierungen prüfen. Zum Beispiel, wenn ein Fehler angezeigt wird, weil ein Pflichtfeld leer ist.

Adaptive Formulare bieten auch eine Option zum Emulieren des Benutzererlebnisses bei einem Formular für verschiedene Geräte. Beispiel: iPhone, iPad und Desktop. You can use both Preview and Emulator ruler options in conjunction with each other to preview a form for devices of different screen sizes.

  1. Tippen Sie auf die Option Vorschau auf der rechten Seite des Formulareditors. Das Formular wird im Bearbeitungsmodus geöffnet. Wenn Sie den Namen verwendet haben, der in der Schulung benutzt wird, dann lautet die Vorschau-URL des Formulars http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. Use ruler to view how the form looks on various devices.
  3. Füllen Sie die Felder des Formulars aus und tippen Sie auf Senden. Das Formular wird gesendet und Sie werden zur standardmäßigen Dankeseite weitergeleitet. Sie können auch eine benutzerdefinierte Danke-Seite angeben. Einzelheiten finden Sie unter Konfigurieren der Weiterleitungsseite.

Das adaptive Formular zum Hinzufügen einer Adresse ist fertig. If you have used the name mentioned in the tutorial and accessing the form on the machine running AEM Forms server, then the form is available at http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Auf dieser Seite