Sie sehen sich Hilfeinhalte der folgenden Version an:

Erfahren Sie, wie Sie ein adaptives Formular in eine externe Webseite einbetten

Mit AEM Forms können Formularentwickler nahtlos adaptive Formulare in eine AEM-Siteseite oder eine außerhalb von AEM gehostete Webseite einbetten. 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.

Weitere Informationen zum Einbetten eines adaptiven Formulars in eine AEM-Siteseite finden Sie unter Adaptive Formulare in AEM-Sites einbetten.

Im Folgenden erfahren Sie, wie Sie ein adaptives Formular in eine externe Webseite einbetten.

Voraussetzungen

Führen Sie folgende Schritte aus, bevor Sie ein adaptives Formular in eine externe Webseite einbetten:

  • Veröffentlichen Sie das adaptive Formular in einer AEM-Veröffentlichungsinstanz.
  • Wenn sich der AEM-Server und die Webseite in verschiedenen Domänen befinden, gehen Sie wie folgt vor, um das Apache Sling Referrer Filter-Paket zu konfigurieren:
    1. Wechseln Sie in der AEM-Autoreninstanz zum AEM Web Console Configuration Manager unter http://[server]:[port]/system/console/configMgr.
    2. Klicken Sie auf Apache Sling Referrer Filter, um die Konfiguration zu bearbeiten.
    3. Geben Sie im Feld Zulässige Hosts die Domäne an, in der sich die Webseite befindet. Dadurch kann der Host POST-Anforderungen an den AEM-Server senden. Sie können auch einen regulären Ausdruck verwenden, um eine Reihe von externen Anwendungsdomänen anzugeben. 

Adaptives Formular einbetten

Sie können ein adaptives Formular einbetten, indem Sie einige JavaScript-Zeilen in die Webseite einfügen. Die API im Code sendet eine HTTP-Anforderung an den AEM-Server für adaptive Formularressourcen und fügt das adaptive Formular in den angegebenen Formularcontainer ein. 

Einbetten des adaptiven Formulars:

  1. Fügen Sie den folgenden Code in die Webseite ein, in die Sie das adaptive Formular einbetten möchten. 

    var loadAdaptiveForm = function(options){
        if(options.path) {
            // options.path refers to the publish URL of the adaptive form
            // For Example: http:myserver:4503/content/forms/af/ABC, where ABC is the adaptive form
            // Note: If AEM server is running on a context path, the adaptive form URL must contain the context path 
            var path = options.path;
            path += "/jcr:content/guideContainer.html";
            $.ajax({
                url  : path ,
                type : "GET",
                data : {
                    // Set the wcmmode to be disabled
                    wcmmode : "disabled",
                    // Set the data reference, if any
                    "dataRef": options.dataRef
                    // Specify a different theme for the form object
                    "themeOverride" : options.themepath
                },
                async: false,
                success: function (data) {
                    // If jquery is loaded, set the inner html of the container
                    // If jquery is not loaded, use APIs provided by document to set the inner HTML but these APIs would not evaluate the script tag in HTML as per the HTML5 spec
                    // For example: document.getElementById().innerHTML
                    if(window.$ && options.CSS_Selector){
                        // HTML API of jquery extracts the tags, updates the DOM, and evaluates the code embedded in the script tag.
                        $(options.CSS_Selector).html(data);
                    }
                },
                error: function (data) {
                    // any error handler
                }
            });
        } else {
            if (typeof(console) !== "undefined") {
                console.log("Path of Adaptive Form not specified to loadAdaptiveForm");
            }
        }
  2. Im eingebetteten Code:

    • Ersetzen Sie options.path durch die Veröffentlichungs-URL des adaptiven Formulars. Wenn der AEM-Server in einem Kontextpfad ausgeführt wird, stellen Sie sicher, dass die URL diesen Pfad enthält.
    • Ersetzen Sie options.dataRef durch Attribute, die mit der URL übertragen werden sollen.
    • Ersetzen Sie options.themePath durch den Pfad zu einem anderen Design als dem im adaptiven Formular konfigurierten Design. Alternativ können Sie den Designpfad mit dem Anforderungsattribut angeben.
    • CSS_Selector ist der CSS-Selektor des Formularcontainers, in den das adaptive Formular eingebettet ist.

Das adaptive Formular wird in die Webseite eingebettet. Beobachten Sie Folgendes im eingebetteten adaptiven Formular:

  • Die Kopf- und Fußzeile im adaptiven Originalformular werden nicht vom eingebetteten Formular übernommen.
  • Entwürfe und übermittelte Formulare sind auf der entsprechenden Registerkarte im Forms Portal verfügbar.  
  • Die im adaptiven Originalformular konfigurierte Aktion wird im eingebetteten Formular beibehalten.
  • Regeln für adaptive Formulare bleiben erhalten und sind im eingebetteten Formular voll funktionsfähig.
  • Die im Originalformular konfigurierten Erlebnis-Targeting und A/B-Tests funktionieren im eingebetteten adaptiven Formular nicht. 
  • Wenn Adobe Analytics im ursprünglichen Formular konfiguriert ist, werden die Analysedaten im Adobe Analytics-Server erfasst. Sie sind jedoch nicht im Formularanalysebericht verfügbar.

Mustertopologie

Die externe Webseite, in die das adaptive Formular eingebettet wird, sendet Anforderungen an den AEM-Server, der sich in der Regel hinter der Firewall in einem privaten Netzwerk befindet. Um sicherzustellen, dass die Anforderungen sicher auf den AEM-Server geleitet werden, wird empfohlen, einen Reverse-Proxy-Server einzurichten.

Schauen wir uns ein Beispiel an, wie Sie einen Apache 2.4-Reverse-Proxy-Server ohne Dispatcher einrichten können. In diesem Beispiel hosten Sie den AEM-Server mit dem Kontextpfad /forms und weisen /forms für den Reverse-Proxy zu. Dadurch wird sichergestellt, dass alle Anforderungen für /forms auf dem Apache-Server an die AEM-Instanz geleitet werden. Diese Topologie hilft dabei, die Anzahl der Regeln auf der Dispatcher-Ebene zu reduzieren, da alle Anforderungen mit dem Präfix /forms an den AEM-Server weitergeleitet werden.

  1. Öffnen Sie die Konfigurationsdatei httpd.conf und heben Sie den Kommentar für die folgenden Codezeilen auf. Alternativ können Sie die folgenden Codezeilen in die Datei einfügen.

    LoadModule proxy_html_module modules/mod_proxy_html.so
    LoadModule proxy_http_module modules/mod_proxy_http.so

  2. Richten Sie Proxy-Regeln ein, indem Sie die folgenden Codezeilen in der Konfigurationsdatei httpd-proxy.conf hinzufügen. 

    ProxyPass /forms http://[AEM_Instance]/forms
    ProxyPassReverse /forms http://[AEM_Instance]/forms

    Ersetzen Sie [AEM_Instance] durch die AEM-Server-Veröffentlichungs-URL in den Regeln.

Wenn Sie den AEM-Server nicht in einem Kontextpfad bereitstellen, lauten die Proxy-Regeln auf Apache-Ebene wie folgt:

ProxyPass /content http://<AEM_Instance>/content
ProxyPass /etc http://<AEM_Instance>/etc
ProxyPass /etc.clientlibs http://<AEM_Instance>/etc.clientlibs
# CSRF Filter
ProxyPass /libs/granite/csrf/token.json http://<AEM_Instance>/libs/granite/csrf/token.json
  
ProxyPassReverse /etc http://<AEM_Instance>/etc
ProxyPassReverse /etc.clientlibs http://<AEM_Instance>/etc.clientlibs
# written for thank you page and other URL present in AF during redirect
ProxyPassReverse /content http://<AEM_Instance>/content

Hinweis:

Wenn Sie eine andere Topologie einrichten, stellen Sie sicher, dass Sie die URLs für Senden, Vorausfüllen und andere Funktionen auf der Dispatcher-Ebene in die Positivliste eintragen.

Empfohlene Vorgehensweisen

Berücksichtigen Sie beim Einbetten eines adaptiven Formulars in eine Webseite die folgenden Richtlinien:
  • Stellen Sie sicher, dass die Formatierungsregeln in den Webseite-CSS nicht mit den Formularobjekt-CSS in Konflikt stehen. Um dies zu vermeiden, können Sie die Webseite-CSS im Design für das adaptive Formular mithilfe der AEM-Clientbibliothek wiederverwenden. Weitere Informationen zur Verwendung der Client-Bibliothek in den Designs für adaptive Formulare finden Sie unter Designs in AEM Forms.
  • Verwenden Sie für den Formularcontainer auf der Webseite die gesamte Fensterbreite. So wird sichergestellt, dass die für mobile Geräte konfigurierten CSS-Regeln ohne Änderungen funktionieren. Wenn der Formularcontainer nicht die gesamte Fensterbreite einnimmt, müssen Sie benutzerdefinierte CSS schreiben, damit sich das Formular an verschiedene mobile Geräte anpasst. 
  • Verwenden Sie die API getData, um die XML- oder JSON-Darstellung der Formulardaten im Client abzurufen. 
  • Verwenden Sie die API unloadAdaptiveForm, um das adaptive Formular aus HTML DOM zu entfernen.
  • Richten Sie den Header „access-control-origin“ ein, wenn Sie eine Antwort vom AEM-Server senden.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie