Show Menu
THEMEN×

Tutorial: Publish your adaptive form

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.
After the adaptive form is ready, you can publish the form to make it available for end users. The end users can open the published form on any device and internet browser. When an adaptive form is published, the form and related content are copied from an AEM author instance to an AEM publish instance. Das Formular wird dem Endbenutzer über die Veröffentlichungsinstanz zur Verfügung gestellt.
Sie haben die folgenden Methoden, um ein adaptives Formular zu veröffentlichen:

Bevor Sie beginnen

  • Einrichten einer AEM Forms-Veröffentlichungsinstanz : Die Instanz im Veröffentlichungsmodus ist eine öffentlich zugängliche Instanz von AEM, die im Veröffentlichungsmodus ausgeführt Forms wird. In einer Produktions-Umgebung befindet sich die Veröffentlichungsinstanz außerhalb der Firewall des Unternehmens.
  • Richten Sie Replizierung und umgekehrte Replizierung ein: Replizierung kopiert Inhalte aus der Autoreninstanz in eine Veröffentlichungsinstanz und gibt Benutzereingaben (z. B. Formulareingaben) aus der Veröffentlichungsinstanz an die Autoreninstanz zurück.

Veröffentlichen des adaptiven Formulars als AEM

Wenn das adaptive Formular als AEM veröffentlicht wird, enthält die gesamte Webseite nur das veröffentlichte Formular. Sie können die URL des adaptiven Formulars verwenden, um es von einer anderen Webseite aus zu verknüpfen. So veröffentlichen Sie das adaptive Formular shipping-address-add-update-form als AEM:
  1. Melden Sie sich bei AEM Forms Autoreninstanz an und suchen Sie das adaptive Formular "shipping-address-add-update-form"in der AEM Forms -Benutzeroberfläche. https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. Wählen Sie das adaptive Formular "shipping-address-add-update-form"und klicken Sie auf Veröffentlichen . Ein Dialogfeld mit Assets, die mit dem adaptiven Formular in Verbindung stehen, wird angezeigt. Tippen Sie auf Veröffentlichen . Das adaptive Formular wird veröffentlicht und ein Dialogfeld mit Erfolg wird angezeigt.
  3. Öffnen Sie das Formular in der Veröffentlichungsinstanz. Das Formular kann vom Endbenutzer ausgefüllt und gesendet werden. https://localhost:4503/content/forms/af/shipping-address-add-update-form.html

Einbetten des adaptiven Formulars in eine AEM Sites-Seite

AEM Forms ermöglicht es Formularentwicklern, adaptive Formulare nahtlos in eine AEM Sites Seite einzubetten. Das eingebettete adaptive Formular ist voll funktionsfähig und Benutzer können es ausfüllen und senden, ohne die Seite zu verlassen. Es hilft Benutzern, im Kontext anderer Elemente auf der Webseite zu bleiben und gleichzeitig mit dem Formular zu interagieren.
AEM Forms stellen Sie eine Komponente AEM Forms Container bereit, um ein adaptives Formular in eine AEM Sites Seite einzubetten. Standardmäßig ist die Komponente im AEM Sites Container nicht sichtbar. Führen Sie die folgenden Schritte aus, um die Komponente AEM Forms Container zu aktivieren und das adaptive Formular in eine AEM Sites Seite einzubetten:
  1. Erstellen und öffnen Sie eine Seite auf der Website We.Retail zur Bearbeitung. Beispiel: https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html . The adaptive form is embedded to the Sites page.
    Sie können das adaptive Formular auch in eine bestehende Site's Seite "We.Retail"einbetten. Zum Beispiel die Seite "ABOUT US" https://localhost:4502/editor.html/content/we-retail/us/en/about-us.html . Dadurch sparen Sie Zeit, eine Seite zu erstellen. Die folgenden Schritte verwenden die neu erstellte Seite.
    Die Website We.Retail wird mit AEM ausgeliefert. Wenn Sie die Website "We.Retail"nicht installiert haben, lesen Sie die Informationen unter We.Retail Reference Implementation installieren.
  2. Tippen Sie auf die -Seiteninformationen und wählen Sie auf der neu erstellten Website "Wir.Einzelhandel"die Option "Vorlage ​bearbeiten"aus. Die Vorlage der Seite wird in einer neuen Registerkarte des Browsers geöffnet.
  3. Tippen Sie im Feld Layout-Container auf . Erweitern Sie auf der Registerkarte " Zulässige Komponenten "das Akkordeon " Allgemein ", wählen Sie die Option " AEM Formular "und klicken Sie auf " ". Die Komponente "AEM Forms Container"ist für die Seite aktiviert.
  4. Open the browser tab containing AEM Sites page opened in step 1. Tap the Drag components here box and tap +. In the Insert New Component box, tap AEM Form . The AEM Forms Container component is added to the page.
  5. Tippen Sie auf die Komponente AEM Forms Container und dann auf . Ein Dialogfeld mit den Eigenschaften AEM Forms Containers wird angezeigt. Suchen Sie im Feld Asset Path das adaptive Formular shipping-address-add-update-form und wählen Sie es aus. Tippen Sie auf . Das adaptive Formular ist in die Seite eingebettet.
  6. Veröffentlichen Sie das adaptive Formular und die Sites Seite. Beachten Sie dabei Folgendes:
    • If you publish the AEM Sites page for the first time and it includes an embedded form, publish the Sites page and the embedded form.
    • Wenn Sie nur das eingebettete Formular auf einer veröffentlichten Siteseite ändern, veröffentlichen Sie das Originalformular und die Änderungen werden auf der veröffentlichten Siteseite übernommen. Die veröffentliche Siteseite enthält einen Verweis auf das Formular ein und erfordert kein erneutes Veröffentlichen der Seite.
    • Wenn Sie die Sites Seite und das eingebettete Formular ändern, veröffentlichen Sie die Sites Seite und das Formular erneut.
      Formular zur Änderung der Lieferungs- und Rechnungsadresse, das zu einer AEM Sites Seite hinzugefügt wurde.

Embed the adaptive form in an external webpage

You can embed an adaptive form to an external web page (a non-AEM webpage hosted outside AEM) by inserting a few lines of JavaScript in the external web page. The JavaScript code sends an HTTP request to the AEM Forms server for the adaptive form and related resources and adds the adaptive form to the web page. For detailed steps, see embed the adaptive form to an external web page .