Tutoriel : publier votre formulaire adaptatif tutorial-publish-your-adaptive-form

hero-image

Ce tutoriel fait partie de la série Création de votre premier formulaire adaptatif. Il est recommandé de suivre la série dans l’ordre chronologique pour comprendre, exécuter et accomplir le cas d’utilisation complet du tutoriel.

Une fois que le formulaire adaptatif est prêt, vous pouvez le publier pour le mettre à la disposition des utilisateurs finaux. Les utilisateurs finaux peuvent ouvrir le formulaire publié sur n’importe quel appareil et navigateur Internet. Lorsqu’un formulaire adaptatif est publié, le formulaire et le contenu associé sont copiés d’une instance d’auteur AEM à une instance de publication AEM. Le formulaire est mis à la disposition de l’utilisateur final via l’instance de publication.

Pour publier un formulaire adaptatif, utilisez lʼune des méthodes suivantes :

Avant de commencer before-you-start

Publiez le formulaire adaptatif en tant que page AEM publish-the-adaptive-form-as-an-aem-page

Lorsque le formulaire adaptatif est publié comme une page AEM, la page web entière ne contient que le formulaire publié. Vous pouvez utiliser l’URL du formulaire adaptatif pour le lier à partir d’une autre page web. Pour publier le formulaire adaptatif shipping-address-add-update-form en tant que page AEM :

  1. Connectez-vous à lʼinstance dʼauteur AEM Forms et recherchez le formulaire adaptatif shipping-address-add-update-form dans l’interface utilisateur dʼAEM Forms.
    https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. Sélectionnez le formulaire adaptatif shipping-address-add-update-form et sélectionnez Publier. Une boîte de dialogue contenant les ressources liées au formulaire adaptatif s’affiche. Sélectionnez Publier. Le formulaire adaptatif est publié et une boîte de dialogue de réussite s’affiche.
  3. Ouvrez le formulaire sur l’instance de publication. Le formulaire peut être complété et envoyé par l’utilisateur final.
    https://localhost:4503/content/forms/af/shipping-address-add-update-form.html

Incorporez le formulaire adaptatif dans une page AEM Sites embed-the-adaptive-form-in-an-aem-sites-page

AEM Forms permet aux développeurs de formulaires d’incorporer facilement des formulaires adaptatifs dans une page AEM Sites. 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.

AEM Forms fournit un composant, le conteneur AEM Forms, pour incorporer un formulaire adaptatif à une page AEM Sites. Par défaut, le composant n’est pas visible dans le conteneur AEM Sites. Pour activer le composant Conteneur AEM Forms et incorporer le formulaire adaptatif dans une page AEM Sites, procédez comme suit :

  1. Créez et ouvrez une page dans le site We.Retail pour la modifier. Par exemple, https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html. Le formulaire adaptatif est incorporé à la page du Sites.

    Vous pouvez également incorporer le formulaire adaptatif dans une page du Site’s We.Retail existante. Par exemple, la page À PROPOS DE NOUS https://localhost:4502/editor.html/content/we-retail/us/en/about-us.html. Cela vous permet de créer une page plus rapidement. Les étapes ci-dessous utilisent la page nouvellement créée.

    Le site We.Retail est présent nativement dans AEM. Si vous nʼavez pas installé le site We.Retail, consultez la section Implémentation de référence de We.Retail pour installer le site.

  2. Sélectionnez les informations de la page propriétés et sélectionnez l’option Modifier le modèle sur la page du site We.Retail que vous avez créée. Le modèle de la page s’ouvre dans un nouvel onglet du navigateur.

  3. Sélectionnez le champ conteneur de disposition, puis sélectionnez gestiondesflux . Dans l’onglet Composants autorisés, développez le menu en accordéon Général, sélectionnez l’option Formulaire AEM, puis sélectionnez icône_denregistrement . Le composant Conteneur AEM Forms est alors activé pour la page.

  4. Ouvrez l’onglet du navigateur contenant la page AEM Sites ouverte à l’étape 1. Sélectionnez le champ Faire glisser les composants ici, puis sélectionnez +. Dans le champ Insérer un nouveau composant, sélectionnez Formulaire AEM. Le composant Conteneur AEM Forms est alors ajouté à la page.

  5. Sélectionnez le composant Conteneur AEM Forms, puis sélectionnez icône-de-configuration . Une boîte de dialogue contenant les propriétés du conteneur AEM Forms s’affiche. Dans le champ Chemin d’accès à la ressource, recherchez et sélectionnez le formulaire adaptatif shipping-address-add-update-form. Sélectionnez  icône_d’enregistrement . Le formulaire adaptatif est incorporé dans la page

  6. Publiez le formulaire adaptatif et la page Sites. Voici quelques points à prendre en considération :

    • Si vous publiez la page AEM Sites pour la première fois et qu’elle comprend un formulaire incorporé, publiez la page Sites et le formulaire incorporé.

    • Si vous modifiez uniquement le formulaire incorporé à une page de site publiée, publiez le formulaire d’origine et les modifications seront répercutées sur la page de site publiée. La page de site publiée comprend une référence au formulaire et n’exige pas de republier la page.

    • Si vous modifiez la page Sites et le formulaire incorporé, republiez la page Sites et le formulaire.

      embed-in-aem-sites

    Ajout du formulaire de changement d’adresse d’expédition et de facturation à une page AEM Sites.

Incorporer le formulaire adaptatif dans une page web externe embed-the-adaptive-form-in-an-external-webpage

Vous pouvez incorporer un formulaire adaptatif dans une page web externe (une page web autre qu’AEM hébergée en dehors d’AEM) en insérant quelques lignes de code JavaScript dans la page web externe. Le code JavaScript envoie une requête HTTP au serveur AEM Forms pour le formulaire adaptatif et les ressources associées et ajoute le formulaire adaptatif à la page web. Pour obtenir des instructions détaillées, consultez la section Incorporer le formulaire adaptatif dans une page web externe.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2