[S’applique également à la v8.]{class="badge positive" title="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.
Insérer un lien inserting-a-link
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.
Types de liens types-of-links
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 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 ne comporte qu’une seule transition sortante. Pour créer de nouvelles transitions, sélectionnez la page, puis cliquez sur le bouton Ajouter dans la section Transitions sortantes, comme illustré 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.
<%= 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 :
-
Cliquez sur l'onglet Textes du texte HTML.
-
Cliquez sur l'icône Ajouter.
-
Dans la colonne Identifiant, indiquez le nom de la variable.
-
Dans la colonne Texte, saisissez la valeur par défaut.
-
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. -
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.