v7
S’applique à Campaign Classic v7
v8
S’applique également à Campaign v8

Eléments statiques dans un formulaire web static-elements-in-a-web-form

Vous pouvez inclure des éléments avec lesquels l’utilisateur n’a aucune interaction dans les pages du formulaire ; il s’agit d’éléments statiques tels que des images, du contenu HTML, une barre horizontale ou un lien hypertexte. Ces éléments sont créés par le premier bouton de la barre d'outils, en sélectionnant Éléments statiques.

Les types de champs disponibles sont les suivants :

  • Valeur issue des réponses fournies antérieurement (dans le contexte du formulaire) ou de la base de données.

  • Lien hypertexte, HTML, barre horizontale. Voir Insérer du contenu HTML.

  • Image enregistrée dans la bibliothèque de ressources ou sur un serveur accessible par les utilisateurs. Voir Insérer des images.

  • Script exécuté côté client et/ou côté serveur. Il doit être rédigé en Javascript et compatible avec la plupart des navigateurs afin d'assurer une bonne exécution côté client.

    note note
    NOTE
    Côté serveur, le script peut utiliser les fonctions définies dans la documentation JSAPI Campaign.

Insérer du contenu HTML inserting-html-content

Vous pouvez inclure des contenus HTML dans une page de formulaire : liens hypertextes, images, paragraphes formatés, vidéos, etc.

L'éditeur HTML vous permet de saisir le contenu à insérer dans la page du formulaire. Pour ouvrir l'éditeur, cliquez sur Éléments statiques > HTML.

Vous pouvez saisir et mettre en forme directement votre contenu ou afficher la fenêtre du code source pour y coller un contenu externe. Pour basculer en mode "code source", cliquez sur la première icône de la barre d'outils :

Pour insérer un champ de la base, utilisez le bouton de personnalisation.

NOTE
Les chaînes saisies dans l'éditeur HTML ne font l'objet d'une traduction que si elles sont définies dans le sous-onglet Textes. Dans le cas contraire, elles ne sont pas collectées. Voir à ce sujet la section Traduire un formulaire web.

Renseignez les champs de la fenêtre d'édition, comme dans l'exemple ci-dessous :

Pour ajouter un lien hypertexte, accédez au menu Éléments statiques > Lien.

  • Le Libellé est le contenu du lien hypertexte, tel qu'il sera affiché dans la page du formulaire.

  • L'URL correspond à l'adresse visée, par exemple : https://www.adobe.com pour un site web ou info@adobe.com pour envoyer un message.

  • Le champ Fenêtre permet de sélectionner le mode d'affichage du lien, lorsqu'il s'agit d'un site. Vous pouvez choisir d'ouvrir le lien dans une nouvelle fenêtre, dans la fenêtre courante ou dans une autre fenêtre.

  • Vous pouvez ajouter une bulle d'aide, comme dans l'exemple ci-dessous :

  • Vous pouvez choisir d'afficher le lien sous forme de bouton ou d'image. Pour cela, sélectionnez l'affichage dans le champ Type.

Par défaut, les liens sont associés à une action de type URL, qui permettent de saisir une adresse de destination du lien dans le champ URL.

Vous pouvez définir d'autres actions pour le lien. Ainsi, lorsque l'utilisateur clique sur le lien, il peut :

  • Actualiser la page

    Pour cela, sélectionnez l'option Actualiser la page dans la liste déroulante du champ Action.

  • Afficher la page suivante / précédente

    Pour cela, sélectionnez l'option Page suivante ou Page précédente dans la liste déroulante du champ Action.

    Vous pouvez masquer les boutons Suivant et/ou Précédent si un lien est destiné à les remplacer. Voir à ce sujet cette page.

    Ainsi, le lien paramétré remplacera le bouton Suivant utilisé par défaut.

  • Afficher une autre page

    L'option Activer une transition permet d'afficher une page spécifique, associée à la transition sortante sélectionnée dans le champ Transition.

    Par défaut, une page n'a qu'une transition sortante. Pour créer de nouvelles transitions, sélectionnez la page puis cliquez sur le bouton Ajouter de la section Transitions sortantes, comme dans l'exemple ci-dessous :

    Dans le diagramme, cet ajout sera représenté comme dans l'exemple ci-dessous :

    note note
    NOTE
    Pour plus d'informations sur l'enchaînement des pages dans un formulaire web, voir Définir l'enchaînement des pages des formulaires web.

Personnaliser le contenu HTML personalizing-html-content

Vous pouvez personnaliser le contenu HTML d'une page de formulaire avec des données enregistrées dans une page précédente. Par exemple, vous pouvez créer un formulaire Web d'assurance automobile dont la première page permet d'indiquer les coordonnées et la marque du véhicule.

Vous pouvez réinjecter dans la page suivante le nom de l'utilisateur et la marque sélectionnée en utilisant des champs de personnalisation. La syntaxe à utiliser dépend du mode de stockage des informations. Pour plus d'informations, consultez la section Utiliser les informations collectées.

NOTE
Pour des raisons de sécurité, la valeur saisie dans la formule <%= est remplacée par des caractères avec échappement.

Dans notre exemple, le nom et le prénom du destinataire sont stockés dans un champ de la base, tandis que la marque de son véhicule est stockée dans une variable. La syntaxe du message personnalisé en page 2 sera la suivante :

<P>Welcome <%= ctx.recipient.@firstName %> <%= ctx.recipient.@lastName %>,</P>
<P>To start your customized study, please select your car <%=ctx.vars.marque%> and its year of purchase.</P>

Le résultat sera le suivant :

Utiliser des variables de texte using-text-variables

L'onglet Texte permet de créer des champs variables qui peuvent être utilisés dans le HTML entre les caractères <%= et %>, avec la syntaxe suivante : $(IDENTIFIER).

Utilisez cette méthode pour localiser facilement vos chaînes. Voir Traduire un formulaire web

Par exemple, vous pouvez créer un champ Contact qui permettra d'afficher la chaîne « Dernier contact le » dans le contenu HTML. Pour ce faire, procédez comme suit :

  1. Cliquez sur l'onglet Textes du texte HTML.

  2. Cliquez sur l'icône Ajouter.

  3. Dans la colonne Identifiant, indiquez le nom de la variable.

  4. Dans la colonne Texte, saisissez la valeur par défaut.

  5. Dans le contenu HTML, insérez cette variable texte via la syntaxe <%= $(Contact) %>.

    note caution
    CAUTION
    Si vous saisissez ces caractères dans l'éditeur HTML, les champs < et > seront remplacés par leurs caractères avec échappement. Dans ce cas, vous devez corriger le code source en cliquant sur l'icône Afficher le code source de l'éditeur de texte HTML.
  6. Ouvrez le libellé Aperçu du formulaire pour afficher la valeur renseignée dans le HTML :

Ce mode de fonctionnement permet de définir les textes des formulaires web et d'en gérer les traductions à l'aide de l'outil de traduction intégré. Voir à ce sujet la section Traduire un formulaire web.

Insérer des images inserting-images

Pour inclure des images dans les formulaires, elles doivent être enregistrées sur un serveur accessible depuis l'extérieur.

Sélectionnez le menu Éléments statiques > Image.

Sélectionner la source de l'image à insérer : elle peut être issue de la bibliothèque de ressources publiques ou stockée sur un serveur externe accessible de l'extérieur.

S'il s'agit d'une image de la bibliothèque, sélectionnez-la dans la liste déroulante du champ; S'il s'agit d'une image externe, saisissez le chemin d'accès à l'image à insérer. Le libellé sera affiché lorsque l'utilisateur passe la souris sur l'image (correspond à un champ ALT en HTML), ou lorsque l'image n'est pas affichée.

La section centrale de l'éditeur permet de visualiser l'image.

recommendation-more-help
601d79c3-e613-4db3-889a-ae959cd9e3e1