Einbetten eines adaptiven Formulars in eine AEM Sites-Seite embed-an-adaptive-form-to-aem-sites-page

Version
Artikel-Link
AEM 6.5
Hier klicken
AEM as a Cloud Service
Dieser Artikel

Übersicht overview

Mit AEM Forms können Formularentwickelnde adaptive Formulare problemlos in eine AEM Sites-Seite oder in eine Web-Seite einbetten, die außerhalb von AEM gehostet wird. Das eingebettete adaptive Formular ist voll funktionsfähig, und Benutzende können es ausfüllen und senden, ohne die Seite zu verlassen. Dies hilft Benutzenden, im Kontext anderer Elemente auf der Web-Seite zu bleiben und gleichzeitig mit dem Formular zu interagieren. Dadurch können Benutzende bequem Formulare ausfüllen und senden, ohne jemals die Seite verlassen zu müssen, auf der sie sich befinden. Diese Integration bietet eine praktische Möglichkeit, die bereits erstellte adaptiven Formulare wiederzuverwenden.

Mit dem AEM-Seiteneditor können Sie schnell mehrere Formulare auf Ihren AEM Sites-Seiten einbetten. Durch die Verwendung des AEM-Seiteneditors können Inhaltsautorinnen und Inhaltsautoren nahtlose Erlebnisse zur Datenerfassung auf einer Sites-Seite erstellen, indem sie die Leistung adaptiver Formularkomponenten nutzen, einschließlich dynamischem Verhalten, Überprüfungen, Datenintegration, Generierung von Datensatzdokumenten und Automatisierung von Geschäftsprozessen. Außerdem können Sie damit verschiedene Funktionen von AEM Sites-Seiten verwenden, z. B. Versionierung, Targeting, Übersetzung und Multi-Site-Manager.

AEM Forms bietet Container- und Einbettungskomponenten für adaptive Formulare. Sie können Adaptive Formulare – Einbettungskomponente (v2) verwenden, um ein vorhandenes adaptives Formular hinzuzufügen oder ein Formular mit dem Editor für adaptive Formulare zu erstellen, oder Container für adaptive Formulare, um ein neues Formular in einem Experience Fragment oder einer AEM Sites-Seite zu erstellen.

Beispiel für ein adaptives Formular auf einer AEM Sites-Seite

Wie kann ich ein adaptives Formular auf einer AEM Sites-Seite oder in einem AEM Experience Fragment erstellen oder einbetten? various-options-to-create-or-embed-an-adaptive-form-in-aem-sites-page-or-aem-experience-fragment

Sie können diese Funktion bestmöglich nutzen, indem Sie die folgenden Optionen verwenden:

  • Erstellen eines adaptiven Formulars mit genehmigten Vorlagen und Einbetten in eine AEM Sites-Seite: Sie können vorab genehmigte Vorlagen nutzen, um schnell adaptive Formulare zu erstellen und einzubetten, die den Branding-Richtlinien und Design-Standards Ihres Unternehmens entsprechen.

  • Einbetten von vorhandenen Formularen in eine AEM Sites-Seite: Sie können bereits erstellte Formulare einfach in Ihre Websites integrieren, sodass Besucherinnen und Besucher direkt mit ihnen interagieren können.

  • Konvertieren eines eingebetteten adaptiven Formulars in ein Experience Fragment: Konvertieren Sie ein eingebettetes adaptives Formular, das zu einer AEM Sites-Seite hinzugefügt wurde, in ein Experience Fragment, um das Formular auf mehreren AEM Sites-Seiten wiederverwenden zu können.

  • **Erstellen und Hinzufügen eines benutzerdefinierten adaptiven Formulars zu einer AEM Sites-Seite:**Sie können die Container-Komponente für adaptive Formulare verwenden, um ein brandneues Formular von Grund auf neu zu erstellen und es speziell auf Ihre Anforderungen und Design-Vorlieben anzupassen.

  • Erstellen und Hinzufügen eines benutzerdefinierten adaptiven Formulars zu Experience Fragments: Sie können die Reichweite Ihrer Formulare erweitern, indem Sie sie zu AEM Experience Fragments hinzufügen, wodurch eine nahtlose Wiederverwendung über mehrere Seiten oder Sites hinweg ermöglicht wird.

  • Hinzufügen von mehreren Formularen zu einer AEM Sites-Seite oder einem Experience Fragment: Sie können mehrere adaptive Formulare erstellen oder zu einer AEM Sites-Seite hinzufügen, um Benutzenden basierend auf ihren Vorlieben und Anforderungen mehrere Optionen zur Verfügung zu stellen. Mit dem AEM-Seiteneditor können Sie schnell mehrere Formulare auf Ihren AEM Sites-Seiten einbetten. Sie können die Komponente Container für adaptive Formulare mehrfach verwenden, um einer AEM Sites-Seite adaptive Formulare hinzuzufügen. Sie können Adaptive Formulare – Einbettungskomponente nur dann mehrfach auf einer AEM Sites-Seite verwenden, wenn die Option Formular deckt die gesamte Breite des Rahmens ab ausgewählt ist. Falls die Option Formular deckt die gesamte Breite des Rahmens ab nicht aktiviert ist, unterstützt die AEM Sites-Seite nur ein adaptives Formular ohne iFrame. Um weitere adaptive Formulare mit Adaptive Formulare – Einbettungskomponente hinzuzufügen, wählen Sie die Option Formular deckt die gesamte Breite des Rahmens ab aus.

Überlegungen zum Einbetten eines adaptiven Formulars auf einer AEM Sites-Seite oder in einem AEM Experience Fragment consideration

  • Wenn Sie ein Formular mit Adaptive Formulare – Einbettungskomponente (v2) erstellen oder hinzufügen, werden die Formulare mithilfe des Übersetzungsflusses von AEM Forms übersetzt und lokalisiert. In diesem Fall wird ein einzelnes Formular beibehalten und in allen Sprachkopien der Sites-Seiten referenziert. Adaptive Formulare – Einbettungskomponente (v2) bietet keinen Zugriff auf verschiedene Funktionen von AEM Sites-Seiten wie Versionierung, Targeting, Übersetzung und Multi-Site-Manager.

  • Wenn Sie den Container für adaptive Formulare verwenden, um ein Formular zu erstellen, werden die Formulare über den AEM Sites-Übersetzungsfluss übersetzt und lokalisiert. Für jede Sprache wird eine separate Kopie (Sprachkopie) der Sites-Seite und der entsprechenden Formulare generiert. Wenn Inhaltsautorinnen oder Inhaltsautoren eine Regel in einem Formular auf der übergeordneten Seite ändern, müssen dieselben Änderungen in allen Sprachkopien des Formulars vorgenommen werden. Mit dem Container für adaptive Formulare können Sie auch verschiedene Funktionen von AEM Sites-Seiten verwenden, z. B. Versionierung, Targeting, Übersetzung und Multi-Site-Manager.

Anforderungen zum Einbetten eines adaptiven Formulars auf einer AEM Sites-Seite oder in einem AEM Experience Fragment before-you-start-embedding-an-adaptive-form

Bevor Sie mit der Einbettung eines neuen adaptiven Formulars oder eines bereits vorhandenen adaptiven Formulars mit Adaptive Formulare – Einbettungskomponente (v2) beginnen, aktivieren Sie die Kernkomponenten adaptiver Formulare und fügen Sie Client-Bibliotheken für adaptive Formulare zu Ihrer AEM Sites-Seite hinzu:

Aktivieren der Kernkomponenten für adaptive Formulare für Ihre AEM Cloud Service-Umgebung
Stellen Sie sicher, dass die Kernkomponenten für adaptive Formulare für Ihre AEM Forms as a Cloud Service-Umgebung aktiviert sind.
Hinzufügen von Client-Bibliotheken für adaptive Formulare zu einer AEM Sites-Seite oder einem Experience Fragment

Wenn die Option Wenn das Formular die gesamte Breite einer Seite einnimmt im Konfigurationsdialogfeld Formular-Container ausgewählt ist und adaptive Formulare unter Verwendung von Kernkomponenten verwendet werden, ist es notwendig, die Client-Bibliotheken auf der entsprechenden Seite der Site einzubinden.

Die Option „Formular deckt die gesamte Breite einer Seite ab“ ist ausgewählt und das adaptive Formular mit Kernkomponenten wird verwendet

Fügen Sie die Client-Bibliotheken Customheaderlibs und Customfooterlibs auf Ihrer AEM Sites-Seite mithilfe der Bereitstellungs-Pipeline ein. Hinzufügen von Client-Bibliotheken:

  1. Greifen Sie auf Ihr AEM Cloud Service-Git-Repository zu und klonen Sie es.

  2. Öffnen Sie den Ordner „AEM Cloud Service-Git-Repository“ in einem einfachen Texteditor. Beispielsweise Microsoft® Visual Code.

  3. Öffnen Sie die Datei ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.html und fügen Sie ihr den folgenden Code hinzu:

    code language-none
        //Customheaderlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
        </sly>
    
  4. Öffnen Sie die Datei ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.html und fügen Sie ihr den folgenden Code hinzu:

    code language-none
        //customfooterlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
        </sly>
    
  5. Öffnen Sie die Datei ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.html und fügen Sie ihr den folgenden Code hinzu:

    code language-none
        //Customheaderlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
        </sly>
    
  6. Öffnen Sie die Datei ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.html und fügen Sie ihr den folgenden Code hinzu:

    code language-none
        //customfooterlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
        </sly>
    
  7. Führen Sie die Bereitstellungs-Pipeline aus, um die Client-Bibliotheken in Ihrer AEM as a Cloud Service-Umgebung bereitzustellen.

Aktivieren der Adaptive Formulare – Einbettungskomponente (v2) für Ihre AEM Sites-Seite oder ein Experience Fragment

Führen Sie die folgenden Schritte aus, um die Adaptive Formulare – Einbettungskomponente (v2) in der Richtlinie der Vorlage zu aktivieren:

  1. Öffnen Sie die AEM Sites-Seite oder das Experience Fragment zur Bearbeitung. Um die Seite zur Bearbeitung zu öffnen, wählen Sie die Seite aus und klicken Sie auf Bearbeiten.
  2. Öffnen Sie die Vorlage Ihrer Sites- oder Experience Fragment-Seite. Um die Vorlage zu öffnen, navigieren Sie zu Seiteninformationen Seiteninformationen > Vorlage bearbeiten. Dadurch wird die entsprechende Vorlage im Vorlageneditor geöffnet.
  3. Klicken Sie in der Strukturansicht auf das Symbol Richtlinie Richtlinie in der Menüleiste. Aktivieren Sie in der Liste Zulässige Komponenten das Kontrollkästchen Adaptive Formulare – Einbetten (v2) unter [AEM-Projektarchetyp-Name] – Adaptives Formular.
  4. Klicken Sie auf Fertig.
embed

https://video.tv.adobe.com/v/3419369?quality=12&learn=on

Einbetten eines adaptiven Formulars mit der Adaptive Formulare – Einbettungskomponente (v2) embed-an-adaptive-form-in-sites-editor-or-experience-fragment

Verwenden Sie die Adaptive Formulare – Einbettungskomponente (v2), um mithilfe des Assistenten zur Formularerstellung im AEM Sites-Editor ein adaptives Formular zu erstellen. Das resultierende Formular wird als externe Entität gespeichert, sodass es in anderen Sites-Seiten und eigenständigen Formularen wiederverwendet werden kann. Sie können ein brandneues Formular von Grund auf neu direkt in eine AEM Sites-Seite oder ein Experience Fragment einbetten und es speziell an Ihre Anforderungen und Design-Vorlieben anpassen. Bei Formularen mit nur einem Verwendungszweck wird empfohlen, eine AEM Sites-Seite direkt zu erstellen, während Experience Fragments sich ideal für Formulare eignen, die auf mehreren Seiten auf Ihrer Website wiederverwendet werden müssen.

Sie können ein neues Formular einfach mit der Adaptive Formulare – Einbettungskomponente (v2) einbetten. Stellen Sie sich beispielsweise vor, ein neues Kontaktformular in eine AEM Sites-Seite oder AEM Experience Fragment zu integrieren. Alle Aktualisierungen oder Änderungen, die auf der AEM Sites-Seite oder im Experience Fragment am Kontaktformular vorgenommen werden, werden automatisch auf alle Seiten übertragen, auf denen es bereitgestellt wird. Dies vereinfacht die Verwaltung der Formulare Ihrer Website, gewährleistet ein nahtloses Anwendererlebnis und optimiert gleichzeitig den gesamten Prozess.

Durch die Verwendung der Adaptive Formulare – Einbettungskomponente (v2) haben Sie folgende Möglichkeiten:

Einbetten eines neuen Formulars in eine AEM Sites-Seite mitihilfe des Assistenten für adaptive Formulare embed-form-using-adaptive-form-wizzard-aem-sites

Schritte zum Einbetten eines neuen Formulars in eine AEM Sites-Seite:

  1. Öffnen Sie die AEM Sites-Seite im Bearbeitungsmodus.

  2. Ziehen Sie die Adaptive Formulare – Einbettungskomponente (v2) per Drag-and-Drop aus dem Komponenten-Browser auf die Seite.

  3. Klicken Sie auf das Plus-Symbol, und Sie werden zum Assistenten für die Formularerstellung weitergeleitet.

    Adaptive Formulare – Einbettungskomponente

  4. Erstellen Sie ein neues adaptives Formular mit dem Assistenten für die Formularerstellung.
    Der Asset-Pfad enthält bereits den Pfad eines erstellten adaptiven Formulars

  5. Speichern Sie die Einstellungen. Das adaptive Formular ist jetzt in der Seite eingebettet.

Als Nächstes können Sie mithilfe des Assistenten zur Formularerstellung die Übermittlungsaktion und die erweiterten Eigenschaften eines eingebetteten adaptiven Formulars festlegen.

Einbetten eines neuen Formulars in ein Experience Fragment mithilfe des Assistenten für adaptive Formulare embed-form-using-adaptive-form-wizzard-experience-fragment

Schritte zum Einbetten eines neuen Formulars in ein Experience Fragment:

  1. Öffnen Sie das Experience Fragment im Bearbeitungsmodus.

  2. Ziehen Sie die Adaptive Formulare – Einbettungskomponente (v2) per Drag-and-Drop aus dem Komponenten-Browser auf die Seite.

  3. Klicken Sie auf das Plus-Symbol, und Sie werden zum Assistenten für die Formularerstellung weitergeleitet.

    Adaptive Formulare – Einbettungskomponente

  4. Erstellen Sie ein neues adaptives Formular mit dem Assistenten für die Formularerstellung.
    Der Asset-Pfad enthält bereits den Pfad eines erstellten adaptiven Formulars

  5. Speichern Sie die Einstellungen. Das adaptive Formular ist jetzt im Experience Fragment eingebettet.

Als Nächstes können Sie mithilfe des Assistenten zur Formularerstellung die Übermittlungsaktion und die erweiterten Eigenschaften eines eingebetteten adaptiven Formulars festlegen.

Einbetten eines vorhandenen adaptiven Formulars in eine AEM Sites-Seite embed-an-adaptive-form-in-sites-editor

Mit der Adaptive Formulare – Einbettungskomponente (v2) können Sie mühelos ein bereits vorhandenes adaptives Formular in eine AEM Sites-Seite integrieren. Diese Funktion verbessert die Anpassungsfähigkeit und Wiederverwendbarkeit von adaptiven Formularen erheblich und bietet Kundinnen und Kunden eine bequeme Möglichkeit, bereits erstellte Formulare wiederzuverwenden. Stellen Sie sich beispielsweise vor, ein Kontaktformular in eine AEM Sites-Seite zu integrieren, sodass das Formular nicht mehrmals neu erstellt werden muss.

Einbetten eines adaptiven Formulars in eine Sites-Seite:

  1. Öffnen Sie die AEM Sites-Seite im Bearbeitungsmodus.
  2. Ziehen Sie die  Adaptive Formulare – Einbettungskomponente (v2) per Drag-and-Drop vom Komponenten-Browser auf die Sites-Seite.
  3. Wählen Sie auf der Sites-Seite die Adaptive Formulare – Einbettungskomponente aus und wählen Sie dann in der Aktionsleiste die Option Eigenschaften des Containers für adaptive Formulare aus. Das Dialogfeld Bearbeiten von „Adaptive Formulare – Einbetten (v2)“ wird geöffnet.
  4. Wählen Sie das adaptive Formular aus, das Sie in den Asset-Pfad einbetten möchten.
  5. Speichern Sie die Einstellungen. Das adaptive Formular ist jetzt in der Seite eingebettet.

Als Nächstes können Sie mithilfe des Assistenten zur Formularerstellung die Übermittlungsaktion und die erweiterten Eigenschaften eines eingebetteten adaptiven Formulars festlegen.

Einbetten eines vorhandenen adaptiven Formulars in ein Experience Fragment: embed-an-adaptive-form-in-experience-fragment

Sie können die Barrierefreiheit Ihrer Formulare auch erweitern, indem Sie sie in ein AEM Experience Fragment einbetten. Einbetten eines adaptiven Formulars in ein Experience Fragment:

  1. Öffnen Sie ein Experience Fragment im Bearbeitungsmodus.
  2. Ziehen Sie die Adaptive Formulare – Einbettungskomponente (v2) vom Komponenten-Browser per Drag-and-Drop zum Experience Fragment.
  3. Wählen Sie im Experience Fragment die Einbettungskomponente für adaptive Formulare aus und wählen Sie in der Aktionsleiste die Option Eigenschaften des Containers für adaptive Formulare aus. Das Dialogfeld Bearbeiten von „Adaptive Formulare – Einbetten (v2)“ wird geöffnet.
  4. Wählen Sie das adaptive Formular aus, das Sie in den Asset-Pfad einbetten möchten.
  5. Speichern Sie die Einstellungen. Das adaptive Formular ist jetzt in das Experience Fragment eingebettet.

Als Nächstes können Sie mithilfe des Assistenten zur Formularerstellung die Übermittlungsaktion und die erweiterten Eigenschaften eines eingebetteten adaptiven Formulars festlegen.

Konvertieren eines Formulars auf einer AEM Sites-Seite in ein Experience Fragment convert-an-adaptive-form-in-sites-page-to-an-experience-fragment

Sie können ein vorhandenes adaptives Formular in einem Sites-Seiteneditor in ein Experience Fragment konvertieren, um es auf mehreren Seiten oder Sites wiederzuverwenden.

So konvertieren Sie ein adaptives Formular auf einer AEM Sites-Seite in ein Experience Fragment:

  1. Öffnen Sie die AEM Sites-Seite mit dem adaptiven Formular (in der Komponente „Container für adaptive Formulare“) im Bearbeitungsmodus.

  2. Öffnen Sie die Inhaltsstruktur und wählen Sie den Container für adaptive Formulare, der Ihr adaptives Formular enthält. Eine AEM Sites-Seite kann mehrere adaptive Formulare hosten. Wählen Sie daher sorgfältig den richtigen Container für adaptive Formulare aus.

  3. Wählen Sie in der Menüleiste das Symbol In Experience Fragment-Variante konvertieren .

    Klicken des Archivlogos, um ein adaptives Formular in einer AEM Sites-Seite in ein Experience Fragment zu konvertieren

    Es wird ein Dialogfeld zum Konvertieren des Containers für adaptive Formulare in ein neues Experience Fragment oder zum Hinzufügen zu einem vorhandenen Experience Fragment angezeigt.

  4. Legen Sie im Dialogfeld In Experience Fragment-Variante konvertieren Werte für die folgenden Optionen fest:

    • Aktion: Wählen Sie diese Option aus, um ein Experience Fragment zu erstellen oder zu einem vorhandenen Experience Fragment hinzuzufügen.
    • Übergeordneter Pfad: Geben Sie den Pfad des Ordners an, in dem das Experience Fragment gehostet werden soll. Die Option ist nur zum Erstellen eines neuen Experience Fragments verfügbar.
    • Vorlage: Geben Sie den Pfad der Experience Fragment-Vorlage an. Wenn Sie keine Experience Fragment-Vorlage haben, erstellen Sie eine. Die Option ist nur zum Hinzufügen des adaptiven Formulars zu einem vorhandenen Experience Fragment verfügbar.
    • Fragmenttitel: Geben Sie den Titel des Experience Fragments an. Der Titel identifiziert ein Experience Fragment eindeutig.
    • Fragment-Tags:  Geben Sie das Tag des Experience Fragments an. Das Tag identifiziert die Kategorie eines Experience Fragments eindeutig.

Konfigurieren der Eigenschaften der „Adaptive Formulare – Einbettungskomponente (v2)“

Sie können die erweiterten Einstellungen der Adaptive Formulare – Einbettungskomponente (v2) anpassen. Im Dialogfeld Bearbeiten von „Adaptive Formulare – Einbettungen“ können Sie Folgendes angeben:

  • Asset-Pfad: Suchen und wählen Sie das einzubettende adaptive Formular aus. Es wird automatisch ausgefüllt, wenn Sie es über den Assets-Browser eingefügt haben.

  • Nach dem Senden: Wählen Sie die Aktion aus, die bei der Formularübermittlung ausgelöst werden soll. Sie können auswählen, dass eine Dankesnachricht oder eine Dankeseite angezeigt werden soll.

    • Dankesnachricht anzeigen: Verfassen Sie im Rich-Text-Editor eine Nachricht, die beim Absenden des Formulars angezeigt werden soll. Diese Option steht nur zur Verfügung, wenn Sie ausgewählt haben, dass eine Dankesnachricht angezeigt werden soll.
    • Dankesseite anzeigen: Suchen und wählen Sie die Seite aus, die bei Übermittlung eines Formulars angezeigt wird. Diese Option steht nur zur Verfügung, wenn Sie ausgewählt haben, dass eine Dankesseite angezeigt werden soll.
    • Umleiten zur Dankeseite: Aktivieren Sie die Option, um die Seite mit dem eingebetteten adaptiven Formular durch die Dankeseite zu ersetzen. Andernfalls ersetzt die Dankesseite das adaptive Formular in der Adaptive Formulare – Einbettungskomponente, ohne die darunter liegenden Seiten zu aktualisieren. Diese Option steht nur zur Verfügung, wenn Sie gewählt haben, dass eine Dankesseite angezeigt werden soll.
    • Dankesnachricht: Kurze Bestätigung, die nach dem erfolgreichen Senden eines Formulars auf dem Bildschirm angezeigt wird.
    • Dankesseite: Suchen und wählen Sie die Seite aus, die nach dem erfolgreichen Senden eines Formulars angezeigt wird.
  • Seitensprache verwenden: Verwenden des Gebietsschemas der AEM Sites-Seite anstelle des Gebietsschemas des adaptiven Formulars. Diese Option ist nur auf adaptive Formulare (Foundation) anwendbar.

  • Fokus auf Formular festlegen: Wählen Sie diese Option aus, um den Fokus auf das erste Feld des adaptiven Formulars zu legen. Diese Option ist nur auf adaptive Formulare (Foundation) anwendbar.

  • Design: Wählen Sie ein Design aus, das die Formatierung für die Komponenten in Ihrem adaptiven Formular definiert. Zur Formatierung gehören Eigenschaften des Erscheinungsbildes, wie Schriftstil, Hintergrundfarbe, Abmessungen und Ausrichtung. Diese Option ist nur auf adaptive Formulare (Foundation) anwendbar.

    note note
    NOTE
    Sie können die Optionen Seitensprache verwenden, Fokus auf Formular festlegen und Design nur für adaptive Formulare (Foundation) verwenden.
  • Formular deckt die gesamte Breite des Rahmens ab:
    Ein Inline-Frame (iframe) ist ein HTML-Element, das ein adaptives Formular auf eine AEM Sites-Seite lädt.

    • Wenn das Kontrollkästchen Formular deckt die gesamte Breite des Rahmens ab aktiviert ist, belegt ein adaptives Formular die gesamte Breite des Containers, in dem es platziert wird. In diesem Fall wird kein iFrame zum Rendern des Formulars verwendet.  Das Layout und Design eines adaptiven Formulars passen sich an die gesamte Breite des Containers an, sodass es responsiv ist und an verschiedene Bildschirmgrößen angepasst werden kann. Mit dieser Option können Sie mehrere adaptive Formulare in eine AEM Sites-Seite einbetten.

      note note
      NOTE
      Um mehrere Formulare in eine AEM Sites-Seite einzubetten, aktivieren Sie das Kontrollkästchen Formular deckt die gesamte Breite des Rahmens ab.
    • Wenn das Kontrollkästchen Formular deckt die gesamte Breite des Rahmens ab nicht aktiviert ist, deckt ein adaptives Formular nicht die gesamte Breite des Containers ab. Stattdessen wird ein iframe zum Rendern des Formulars verwendet, der nicht über eine bestimmte Breite hinaus erweitert werden kann. Dieser Ansatz ist nützlich, wenn ein adaptives Formular bestimmte Grenzen hat und im Container mit anderen AEM-Komponenten daneben koexistieren muss. Wenn diese Option nicht aktiviert ist, kann nur ein einziges adaptives Formular ohne iFrame in eine AEM Sites-Seite eingebettet werden.

      note note
      NOTE
      Die AEM Sites-Seite unterstützt nur ein einziges adaptives Formular, das ohne iFrame vorhanden ist. Um weitere adaptive Formulare mit Adaptive Formulare – Einbettungskomponente hinzuzufügen, wählen Sie die Option Formular deckt die gesamte Breite des Rahmens ab aus.
  • Höhe: Geben Sie die Höhe des Containers an. Lassen Sie es leer, um die Größe des Containers automatisch zu anzupassen.

  • CSS-Client-Bibliothek: Geben Sie den Pfad zu einer CSS-Client-Bibliothek an.

Veröffentlichen von eingebetteten adaptiven Formularen publishing-embedded-adaptive-form

Betrachten wir die folgenden Szenarien für das Veröffentlichen eines eingebetteten Formulars in einer AEM Sites-Seite:

  • Wenn Sie die AEM Sites-Seite zum ersten Mal veröffentlichen und sie ein eingebettetes adaptives Formular enthält, veröffentlichen Sie die Sites-Seite und das eingebettete Asset.
  • Wenn Sie nur das eingebettete Formular in einer veröffentlichten Sites-Seite geändert haben, veröffentlichen Sie das ursprüngliche Asset, und die Änderungen werden in der veröffentlichten Sites-Seite übernommen. Die veröffentlichte Sites-Seite enthält einen Verweis auf das Asset und erfordert kein erneutes Veröffentlichen der Seite.
  • Wenn Sie die Sites-Seite und das eingebettete adaptive Formular geändert haben, veröffentlichen Sie die Sites-Seite und das eingebettete Asset erneut.

Ändern eines eingebetteten adaptiven Formulars modifying-embedded-adaptive-form

Um eine Konfiguration oder Eigenschaft des eingebetteten adaptiven Formulars zu ändern, führen Sie einen der folgenden Schritte aus.

  • Öffnen Sie das Originalformular in einem adaptiven Formular im entsprechenden Editor und ändern Sie es.
  • Wählen Sie von der Sites-Seite aus im Bearbeitungsmodus das adaptive Formular und dann In neuem Fenster bearbeiten. Das ursprüngliche Formular wird im Bearbeitungsmodus geöffnet, sodass sie es bearbeiten können.
NOTE
Die im ursprünglichen adaptiven Formular vorgenommenen Änderungen werden automatisch im eingebetteten Formular übernommen. Allerdings müssen Sie das adaptive Formular oder die Sites-Seite erneut veröffentlichen, damit die Änderungen auf der veröffentlichten Seite angezeigt werden.

Best Practices best-practices

Beachten Sie die folgenden Punkte, wenn Sie adaptive Formulare in AEM Sites-Seiten einbetten:

  • Die Kopf- und Fußzeile im Originalformular sind nicht im eingebetteten Formular enthalten.
  • Benutzerentwürfe und -übermittlungen von eingebetteten Formularen werden unterstützt und sind auf den Registerkarten „Entwürfe“und „Gesendete Formulare“ im Formularportal sichtbar.
  • Die im Originalformular konfigurierte Übermittlungsaktion wird im eingebetteten Formular beibehalten.
  • Wenn Sie für das Originalformular Adobe Analytics konfiguriert haben, werden die Analysedaten des eingebetteten Formulars in Adobe Analytics erfasst. Sie sind jedoch nicht im Formularanalysebericht verfügbar.

Siehe auch see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab