Incorporation d’un formulaire adaptatif ou d’une communication interactive dans une application d’une seule page AEM Sites

Présentation

AEM Forms permet aux développeurs de formulaires d’incorporer facilement des formulaires adaptatifs et des communications interactives dans une application à page unique AEM Sites (SPA). Le formulaire adaptatif incorporé et la communication interactive sont entièrement fonctionnels et les utilisateurs peuvent remplir et envoyer le formulaire sans quitter la page. Il permet à l’utilisateur de rester dans le contexte d’autres éléments de la page web et d’interagir simultanément avec le formulaire adaptatif ou la communication interactive.

Dans l’application d’une seule page AEM Sites, vous pouvez ajouter un formulaire adaptatif ou une communication interactive à l’aide du composant de conteneur AEM Forms SPA . Il s’agit d’un composant AEM Forms pour AEM Sites SPA que vous pouvez ajouter à votre page Sites.

Pour plus d’informations sur l’incorporation d’un formulaire adaptatif dans une AEM Sites non SPA, voir Incorporation d’un formulaire adaptatif ou d’une communication interactive dans la page AEM Sites.

Prérequis

Pour incorporer un formulaire adaptatif ou une communication interactive dans un site d’AEM SPA à l’aide du composant Conteneur AEM Forms, vérifiez que vous avez installé :

Installer le composant Conteneur AEM Forms SPA

Exécutez les étapes suivantes pour installer le composant Conteneur AEM Forms SPA :

  1. Cloner ou télécharger le composant AEM Forms pour SPA.

  2. Installez le composant AEM Forms pour SPA. Les instructions d’installation du composant sont disponibles dans le fichier README.md .

    Le composant comprend un exemple de composant React qui peut être utilisé pour intégrer SPA composant de conteneur à un projet SPA basé sur React.

  3. Cloner ou télécharger un projet de SPA basé sur React.

  4. Intégrez SPA composant de conteneur à un projet SPA basé sur React en suivant les instructions disponibles dans le fichier README.md .

    Après avoir installé le composant Conteneur AEM Forms SPA et l’intégration du composant à un projet SPA basé sur React, vous pouvez incorporer des formulaires adaptatifs et des communications interactives dans la page AEM Sites.

Incorporation d’un formulaire adaptatif ou d’une communication interactive

Pour incorporer un formulaire adaptatif ou une communication interactive à l’aide d’AEM Forms pour SPA composant Conteneur :

  1. Ouvrez la page AEM sites, en mode d’édition, dans laquelle vous souhaitez incorporer un formulaire adaptatif ou une communication interactive.

  2. Insérez le composant AEM Formulaire pour SPA sur la page à l’aide de l’une des options suivantes :

    • Appuyez sur le conteneur de mises en page sur la page Sites, appuyez sur + et sélectionnez le composant AEM Formulaire pour SPA.

    • Dans le panneau Explorateur de composants, faites glisser et déposez le composant AEM Formulaire pour SPA sur la page.

    • Recherchez un formulaire adaptatif ou une communication interactive dans le navigateur Ressources et faites-le glisser sur la page Sites. Il incorpore le formulaire dans une AEM Forms pour SPA conteneur de composants.

    REMARQUE

    Le rendu de plusieurs composants de conteneur AEM Forms SPA sur une page n’est pas pris en charge. Vous pouvez avoir plusieurs conteneurs AEM Forms SPA sur une page, mais un seul composant est rendu à la fois. Assurez-vous qu’un seul composant est visible sur une page pour éviter les incohérences.

  3. Appuyez sur le composant Conteneur AEM Forms SPA incorporé dans la page Sites, puis appuyez sur settings_icon dans la barre d’actions. La boîte de dialogue Modifier le conteneur AEM Forms SPA s’ouvre.

  4. Dans la boîte de dialogue Modifier le conteneur AEM Forms , spécifiez ce qui suit :

    • Type d’actif : sélectionnez le type d’actif à incorporer. Les options sont Formulaire adaptatif et Communication interactive

    • Chemin d’accès à la ressource : Recherchez et sélectionnez le formulaire adaptatif ou la communication interactive à incorporer. Le champ est automatiquement renseigné si un formulaire adaptatif ou une communication interactive est inséré à l’aide du navigateur Ressources.

    • Canal (communication interactive uniquement) : Sélectionnez le type de canal interactif à incorporer. Les options sont Canal Web et Canal d’impression.

    • Thème : Sélectionnez un thème qui définit le style des composants de votre formulaire adaptatif ou de votre communication interactive. Style comprend des propriétés d’aspect, comme le style de police, la couleur d’arrière-plan, les dimensions et l’alignement.

  5. Appuyez sur done_icon pour enregistrer les paramètres. Le formulaire adaptatif ou la communication interactive est désormais incorporé à la page.

Publier le formulaire adaptatif incorporé et la communication interactive

Examinez les scénarios suivants pour publier une ressource incorporée (formulaire adaptatif ou communication interactive) sur la page AEM Sites :

  • Si vous publiez la page AEM Sites pour la première fois et qu’elle comprend un formulaire adaptatif ou une communication interactive incorporés, publiez la page Sites et la ressource incorporée.
  • Si vous avez modifié uniquement le formulaire adaptatif ou la communication interactive incorporés dans une page Sites publiée, publiez la ressource d’origine et les modifications sont répercutées dans la page Sites publiée. La page Sites publiée comprend une référence à la ressource et ne nécessite pas de republier la page.
  • Si vous avez modifié la page Sites et le formulaire adaptatif ou la communication interactive incorporés, republiez la page Sites et la ressource incorporée.

Modifier le formulaire adaptatif incorporé et la communication interactive

AEM page de sites conserve une référence au formulaire adaptatif et à la communication interactive dans le conteneur AEM Forms. Par conséquent, toutes les configurations et propriétés, telles que le thème, les styles et l’action d’envoi, configurées dans le formulaire adaptatif d’origine et la communication interactive, sont conservées dans le formulaire adaptatif incorporé et la communication interactive.

Pour modifier toute configuration ou propriété du formulaire adaptatif incorporé et de la communication interactive, effectuez l’une des opérations suivantes.

  • Ouvrez le formulaire d’origine dans les formulaires adaptatifs ou la communication interactive dans les éditeurs respectifs et modifiez-le.
  • Appuyez sur le formulaire adaptatif ou la communication interactive dans la page Sites en mode d’édition, puis appuyez sur Modifier dans une nouvelle fenêtre. Le formulaire d’origine s’ouvre en mode d’édition.

Éléments à prendre en compte et bonnes pratiques

Gardez les points suivants à l’esprit lorsque vous incorporez des formulaires adaptatifs à des pages de sites AEM :

  • L’en-tête et le pied de page du formulaire d’origine ne sont pas intégrés dans le formulaire incorporé.
  • Les brouillons et les envois de formulaires incorporés sont pris en charge et visibles dans les onglets Brouillons et Formulaires envoyés du portail de formulaires.
  • L’action Envoyer configurée sur le formulaire d’origine est conservée dans le formulaire incorporé.
  • Le ciblage d’expérience et les tests A/B configurés sur le formulaire d’origine ne fonctionnent pas dans le formulaire incorporé. Cependant, vous pouvez utiliser le ciblage d’expérience sur la page Sites pour présenter différents formulaires en fonction des profils utilisateur.
  • Si vous avez configuré Adobe Analytics pour le formulaire d’origine, les données d’analyse du formulaire incorporé seront capturées dans Adobe Analytics. En revanche, elles ne seront pas disponibles dans le rapport d’analyse des formulaires.

Sur cette page