Schulung: Erstellen eines adaptiven Formulars do-not-publish-tutorial-create-an-adaptive-form
Dieses Tutorial ist ein Teil der Serie Erstellen Ihres ersten adaptives Formulars. Es wird empfohlen, die Serie in chronologischer Reihenfolge zu durchlaufen, um den vollständigen Anwendungsfall des Tutorials zu verstehen, durchzuführen und zu demonstrieren.
Über das Tutorial about-the-tutorial
Adaptive Formulare sind Formulare der neuen Generation, die dynamisch und responsiv sind. Sie können adaptive Formulare verwenden, um ein personalisiertes Benutzererlebnis zu schaffen. Außerdem können Sie adaptive Formulare mit Adobe Analytics für Nutzungsstatistiken und mit Adobe Campaign für das Kampagnen-Management integrieren. Weitere Informationen zu den Funktionen adaptiver Formulare finden Sie unter Einführung in das Bearbeiten adaptiver Formulare.
Es ist einfacher, Formulare zu erstellen und zu verwalten, wenn ein ordnungsgemäßer Prozess eingehalten wird. In diesem Artikel lernen Sie Folgendes:
-
Erstellen Sie ein adaptives Formular, mit dem ein Kunde eine Versandadresse hinzufügen kann
-
Layout-Felder eines adaptiven Formulars zum Anzeigen und Akzeptieren von Informationen eines Kunden
-
Erstellen Sie eine Sendeaktion zum Senden einer E-Mail mit Formularinhalt
-
Anzeigen und Senden eines adaptiven Formulars in der Vorschau
Am Ende des Artikels haben Sie ein Formular, was so ähnlich wie Folgendes aussieht:
Schritt 1: Adaptives Formular erstellen step-create-the-adaptive-form
-
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.
-
Wählen Sie Erstellen und dann Adaptives Formular aus. Eine Option zum Auswählen einer Vorlage wird angezeigt. Wählen Sie die Leer Vorlage zur Auswahl und Auswahl Nächste.
-
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. Der Titel erleichtert Ihnen die Identifizierung des Formulars in der Benutzeroberfläche von AEM Forms. - Name: Geben Sie
shipping-address-add-update-form
in das Feld Name ein. 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. Alle ungültigen Eingaben werden durch Bindestriche ersetzt.
- Titel: Geben Sie
-
Wählen Sie Erstellen aus. Ein adaptives Formular wird erstellt und es wird ein Dialogfeld zum Öffnen des Formulars zur Bearbeitung angezeigt. Auswählen Öffnen , um das neu erstellte Formular in einer neuen Registerkarte zu öffnen. 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-Oberfläche für adaptive Formulare und zu verfügbaren Komponenten finden Sie in der Einführung in das Authoring adaptiver Formulare.
Schritt 2: Kopf- und Fußzeile hinzufügen step-add-header-and-footer
AEM Forms bietet viele Komponenten zum Anzeigen von Informationen in einem adaptiven Formular. 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.
-
Auswählen > . Der Komponentenbrowser wird geöffnet. Ziehen Sie die Komponente Kopfzeile aus dem Komponentenbrowser in das adaptive Formular.
-
Auswählen Logo. Die Symbolleiste wird angezeigt. Auswählen Geben Sie in der Symbolleiste We.Retail und wählen Sie .
-
Wählen Sie Bild aus. Die Symbolleiste wird angezeigt. Auswählen . Der Eigenschaften-Browser wird auf der linken Seite des Bildschirms geöffnet. Suchen Sie das Logo und laden Sie es hoch. Auswählen . Das Bild erscheint in der Kopfzeile.
Sie können die Option Datei laden auswählen, um das in diesem Artikel verwendete Logo herunterzuladen, wenn Sie keines haben.
-
Ziehen Sie die Komponente Fußzeile aus in das adaptive Formular. Nach diesem Schritt sieht das Formular wie folgt aus:
Schritt 3: Komponenten hinzufügen, um Informationen zu erfassen und anzuzeigen step-add-components-to-capture-and-display-information
Komponenten sind Bausteine eines adaptiven Formulars. AEM Forms bietet viele Komponenten zum Erfassen und Anzeigen von Informationen in einem adaptiven Formular. Sie können die Komponenten von in ein Formular ziehen. Informationen zu verfügbaren Komponenten und entsprechenden Funktionen finden Sie in Einführung in die Bearbeitung von adaptiven Formularen.
-
Ziehen Sie die numerische Feldkomponente in das adaptive Formular. Platzieren Sie sie vor der Fußzeilenkomponente. Öffnen Sie die Eigenschaften der Komponente, ändern Sie Titel der Komponente
Customer ID
, ändern Elementname nachcustomer_ID
, aktivieren Sie die Erforderliches Feld aktivieren Sie die HTML5-Zahleneingabetyp verwenden und wählen Sie . -
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.:
table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 html-authored no-header Eigenschaft Textfeld 1 Textfeld 2 Textfeld 3 Titel Name Lieferadresse Status Elementname customer_Name customer_Shipping_Address customer_State Erforderliches Feld Aktiviert Aktiviert Aktiviert Mehrere Zeilen zulassen Deaktiviert Aktiviert Deaktiviert -
Ziehen Sie eine Numerisches Feld-Komponente vor die Fußzeilenkomponente. Öffnen Sie die Eigenschaften der Komponente, legen Sie die in der folgenden Tabelle aufgeführten Werte fest und wählen Sie .
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 Eigenschaft Wert Titel Postleitzahl Elementname customer_ZIPCode Maximale Anzahl von Ziffern 6 Erforderliches Feld Aktiviert Mustertyp anzeigen Kein Muster -
Ziehen Sie eine E-Mail-Komponente vor die Fußzeilenkomponente. Öffnen Sie die Eigenschaften der Komponente, legen Sie die in der folgenden Tabelle aufgeführten Werte fest und wählen Sie .
table 0-row-2 1-row-2 2-row-2 3-row-2 Eigenschaft Wert Titel E-Mail Elementname customer_Email Erforderliches Feld Aktiviert -
Ziehen Sie eine Dateianhang-Komponente vor die Fußzeilenkomponente. Öffnen Sie die Eigenschaften der Komponente, legen Sie die in der folgenden Tabelle aufgeführten Werte fest und wählen Sie .
table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header Eigenschaft Wert Titel Von Behörden anerkannter Adressnachweis Elementname customer_Address_Proof Erforderliches Feld Aktiviert -
Ziehen Sie eine Sendeschaltfläche-Komponente in das adaptive Formular. Platzieren Sie sie vor der Fußzeilenkomponente. Öffnen Sie die Eigenschaften der Komponente und ändern Sie den Elementnamen in
address_addition_update_submit
auswählen . Das Layout des Formulars ist vollständig und das Formular sieht wie folgt aus:
Schritt 4: Sendeaktion für das adaptive Formular konfigurieren step-configure-submit-action-for-the-adaptive-form
Eine Sendeaktion wird ausgelöst, wenn Benutzende in einem adaptiven Formular auf die Schaltfläche „Absenden“ klicken. 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 Sendeaktionen. Ausführliche Informationen finden Sie unter Konfigurieren der Sendeaktion.
Mit den folgenden Schritten können Sie die E-Mail-Sendeaktion und die Demo-Sendeaktion des Formulars konfigurieren:
-
Konfigurieren Sie den E-Mail-Server. Weitere Informationen finden Sie unter Konfigurieren von E-Mail-Benachrichtigungen..
-
Auswählen Formular-Container im Inhaltsbrowser und wählen Sie . Der Eigenschaften-Browser wird auf der linken Seite geöffnet.
-
Navigieren Sie zu Übermittlung > Übermittlungsaktion. Wählen Sie E-Mail senden. Geben Sie die folgenden Werte an und wählen Sie .
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 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 Hallo ${customer_Name}
, die folgende Adresse wurde als Lieferadresse für Ihr Konto hinzugefügt:${customer_Name}
,${customer_Shipping_Address}
,${customer_State}
,${customer_ZIPCode}
Mit freundlichen Grüßen, We.RetailAnhänge einfügen Aktiviert Ihr Formular ist fertig. Jetzt können Sie eine Vorschau des Formulars anzeigen und die Funktionalität testen. Wenn Sie den im Tutorial genannten Namen verwendet haben und das Formular auf dem Rechner mit dem AEM Forms-Server aufrufen, dann ist das Formular unter http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html verfügbar.
Schritt 5: Adaptives Formular in der Vorschau ansehen und senden step-preview-and-submit-the-adaptive-form
Sie können die Option Vorschau verwenden, um das Erscheinungsbild und Verhalten eines Formulars zu bewerten. Sie können ein Formular im Vorschaumodus absenden und auch die auf ein Formular angewendeten Validierungen überprüfen. Zum Beispiel, wenn ein Fehler angezeigt wird, weil ein Pflichtfeld leer gelassen wurde.
Adaptive Formulare bieten auch eine Option zum Emulieren von Erlebnissen eines Formulars für verschiedene Geräte. Beispiel: iPhone, iPad und Desktop. Sie können die beiden Optionen Vorschau und Emulator- in Verbindung miteinander verwenden, um eine Vorschau eines Formulars für Geräte mit unterschiedlichen Bildschirmgrößen anzuzeigen.
- Wählen Sie die Vorschau auf der rechten Seite des Formular-Editors. 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
- Verwenden Sie , um zu sehen, wie das Formular auf verschiedenen Geräten aussieht.
- Füllen Sie die Felder des Formulars aus und wählen Sie Einsenden. Das Formular wird abgesendet und Sie werden zur standardmäßigen Dankeschön-Seite weitergeleitet. Sie können auch eine benutzerdefinierte Dankeschön-Seite angeben. Einzelheiten finden Sie unter Konfigurieren der Weiterleitungsseite.
Das adaptive Formular zum Hinzufügen einer Adresse ist fertig. Wenn Sie den im Tutorial genannten Namen verwendet haben und auf das Formular auf dem Computer zugreifen, auf dem der AEM Forms-Server ausgeführt wird, ist das Formular unter http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html verfügbar.