Vous consultez actuellement l'aide de la version:

Découvrez comment incorporer un formulaire adaptatif dans une page Web externe

AEM Forms permet aux développeurs de formulaires d’incorporer facilement des formulaires adaptatifs dans une page de sites AEM ou une page Web hébergée en dehors d’AEM. Le formulaire adaptatif incorporé est entièrement fonctionnel et les utilisateurs peuvent le remplir et le soumettre sans quitter la page. Il permet à l’utilisateur de rester dans le contexte des autres éléments de la page Web et d’interagir simultanément avec le formulaire.

Pour des informations sur l’intégration d’un formulaire adaptatif dans une page de sites AEM, voir Incorporation d’un formulaire adaptatif dans des sites AEM.

Continuez la lecture de ce document pour découvrir comment incorporer un formulaire adaptatif dans une page Web externe.

Conditions préalables

Procédez comme suit avant d’incorporer un formulaire adaptatif dans une page Web externe :

  • Publiez le formulaire adaptatif sur une instance de publication AEM.
  • Si le serveur AEM et la page Web se trouvent sur des domaines différents, procédez comme suit pour configurer le bundle Apache Sling Referrer Filter :
    1. Sur l’instance de l’auteur AEM, accédez au gestionnaire de configuration de la console Web AEM à l’adresse http://[serveur]:[port]/system/console/configMgr.
    2. Recherchez et cliquez sur Apache Sling Referrer Filter pour modifier la configuration.
    3. Dans le champ Hôtes autorisés, spécifiez le domaine dans lequel la page Web se trouve. Cette opération permet à l’hôte de créer des requêtes POST vers le serveur AEM. Vous pouvez également utiliser l’expression régulière pour spécifier une série de domaines d’application externes. 

Incorporation d’un formulaire adaptatif

Vous pouvez incorporer un formulaire adaptatif en insérant quelques lignes de code JavaScript dans la page Web. L’API dans le code envoie une requête HTTP au serveur AEM pour les ressources de formulaire adaptatif et injecte le formulaire adaptatif dans le conteneur de formulaire spécifié. 

Pour incorporer le formulaire adaptatif :

  1. Insérez le code suivant dans la page Web dans laquelle vous souhaitez incorporer le formulaire adaptatif. 

    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. Dans le code incorporé :

    • Remplacez options.path par l’URL de publication du formulaire adaptatif. Si le serveur AEM s’exécute sur un chemin de contexte, assurez-vous que l’URL inclut ce chemin.
    • Remplacez options.dataRef par les attributs à transmettre avec l’URL.
    • Remplacez options.themePath par le chemin d’accès à un thème différent de celui configuré dans le formulaire adaptatif. Vous pouvez également spécifier le chemin d’accès au thème à l’aide de l’attribut de requête.
    • CSS_Selector est le sélecteur CSS du conteneur de formulaire dans lequel le formulaire adaptatif est incorporé.

Le formulaire adaptatif est incorporé dans la page Web. Vous pouvez observer ce qui suit dans le formulaire adaptatif incorporé :

  • L’en-tête et le pied de page du formulaire adaptatif d’origine ne sont pas compris dans le formulaire incorporé.
  • Les brouillons et les formulaires envoyés sont disponibles dans l’onglet Brouillons et envois du portail des formulaires.  
  • L’action Envoyer configurée sur le formulaire adaptatif d’origine est conservée dans le formulaire incorporé.
  • Les règles de formulaire adaptatif sont conservées et entièrement fonctionnelles dans le formulaire incorporé.
  • Le ciblage d’expérience et les tests A/B configurés dans le formulaire adaptatif d’origine ne fonctionnent pas dans le formulaire incorporé. 
  • Si Adobe Analytics est configuré sur le formulaire d’origine, les données d’analyse sont capturées dans le serveur Adobe Analytics. En revanche, il ne sera pas disponible dans le rapport d’analyse des formulaires.

Exemple de topologie

La page Web externe qui incorpore le formulaire adaptatif envoie les requêtes au serveur AEM, qui se trouve généralement derrière le pare-feu dans un réseau privé. Pour garantir que les requêtes sont dirigées de manière sécurisée vers le serveur AEM, il est recommandé de configurer un serveur de proxy inverse.

Examinons un exemple de la manière dont vous pouvez configurer un serveur de proxy inverse Apache 2.4 sans répartiteur. Dans cet exemple, vous allez héberger le serveur AEM avec le chemin de contexte /forms et mapper /forms pour le proxy inverse. Cela garantit que toute requête pour /forms sur le serveur Apache est redirigée vers une instance AEM. Cette topologie permet de réduire le nombre de règles au niveau de la couche de répartiteur car toute requête précédée de /forms dirige vers le serveur AEM.

  1. Ouvrez le fichier de configuration httpd.conf et supprimez les commentaires des lignes de code suivantes. Vous pouvez également ajouter ces lignes de code dans le fichier.

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

  2. Configurez les règles de proxy en ajoutant les lignes de code suivantes dans le fichier de configuration httpd-proxy.conf

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

    Remplacez [Instance_AEM] par l’URL de publication du serveur AEM dans les règles.

Si vous ne montez pas le serveur AEM sur un chemin de contexte, les règles de proxy au niveau de la couche Apache seront les suivantes :

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

Remarque :

Si vous installez une autre topologie, assurez-vous de mettre en liste blanche les URL d’envoi, de pré-remplissage et d’autres URL au niveau de la couche de répartiteur.

Meilleures pratiques

Lorsque vous incorporez un formulaire adaptatif dans une page Web, prenez en compte les meilleures pratiques suivantes :
  • Assurez-vous que les règles de style définies dans la page Web CSS ne sont pas en conflit avec l’objet de formulaire CSS. Pour éviter les conflits, vous pouvez réutiliser la page Web CSS dans le thème de formulaire adaptatif en utilisant la bibliothèque client AEM. Pour plus d’informations sur l’utilisation de la bibliothèque client dans les thèmes de formulaire adaptatif, voir Thèmes dans AEM Forms.
  • Assurez-vous que le conteneur du formulaire dans la page Web utilise toute la largeur de la fenêtre. Cela permet aux règles CSS configurées pour les appareils mobiles de fonctionner sans aucune modification. Si le conteneur de formulaire ne prend pas toute la largeur de la fenêtre, vous devez écrire un CSS personnalisé pour que le formulaire s’adapte aux différents appareils mobiles. 
  • Utilisez l’API getData pour obtenir la représentation XML ou JSON des données de formulaire dans le client. 
  • Utilisez l’API unloadAdaptiveForm pour décharger le formulaire adaptatif à partir du DOM HTML.
  • Configurez l’en-tête access-control-origin lors de l’envoi de la réponse à partir du serveur AEM.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne