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.
Adaptive Formulare sind Formulare der neuen Generation, die dynamisch und responsiv sind. Sie können adaptive Formulare verwenden, um ein personalisiertes Benutzererlebnis zu schaffen. Sie können adaptive Formulare auch mit Adobe Analytics für Nutzungsstatistiken und Adobe Campaign für Kampagnenmanagement 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:
[ ](assets/form-preview-mobile.gif)
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.
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.
Eine Option Eigenschaften hinzufügen wird angezeigt. Die Felder Titel und Name sind obligatorisch.
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.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. Ungültige Eingaben werden durch Bindestriche ersetzt.Tippen Sie auf Erstellen. Ein adaptives Formular wird erstellt und es wird ein Dialogfeld zum Öffnen des Formulars zur Bearbeitung angezeigt. Tippen Sie auf Ö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-Benutzeroberfläche für adaptive Formulare und zu verfügbaren Komponenten finden Sie unter Einführung in das Authoring adaptiver Formulare.
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.
Tippen Sie auf >
. Der Komponentenbrowser wird geöffnet. Ziehen Sie die Komponente Kopfzeile aus dem Komponentenbrowser in das adaptive Formular.
Tippen Sie auf Logo. Der Symbolleiste wird angezeigt. Tippen Sie in der Werkzeugleiste auf . Geben Sie We.Retail ein und tippen Sie anschließend auf
.
Tippen Sie auf „Bild“. Der Symbolleiste wird angezeigt. Tippen Sie auf . Der Eigenschaften-Browser wird auf der linken Seite des Bildschirms geöffnet. Suchen Sie das Logo und laden Sie es hoch. Tippen Sie auf
. 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.
Ziehen Sie die Komponente Fußzeile aus in das adaptive Formular. Nach diesem Schritt sieht das Formular wie folgt aus:
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.
Customer ID
und den Elementnamen in customer_ID
. Aktivieren Sie die Option Erforderliches Feld, aktivieren Sie die Option HTML5-Zahleneingabetyp verwenden und tippen Sie auf 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 tippen Sie auf .
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ühren Werte fest und tippen Sie auf .
Eigenschaft | Wert |
---|---|
Titel | |
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ühren Werte fest und tippen Sie auf .
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_additional_update_submit Tippen Sie auf . Das Layout des Formulars ist vollständig und das Formular sieht wie folgt aus:
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.
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..
/content/help/en/experience-manager/6-4/sites-administering/notification.html
Tippen Sie im Inhalts-Browser auf Formular-Container und dann auf . 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 tippen Sie auf .
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.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. Wenn Sie den Namen, der in der Schulung verwendet wurde, verwendet haben und auf das Formular auf dem Computer zugreifen, auf dem der AEM Forms-Server ausgeführt wird, finden Sie das Formular unter http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.
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. 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.
Das adaptive Formular zum Hinzufügen einer Adresse ist fertig. Wenn Sie den Namen, der in der Schulung verwendet wurde, verwendet haben und auf das Formular auf dem Computer zugreifen, auf dem der AEM Forms-Server ausgeführt wird, finden Sie das Formular unter http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.