Eléments statiques dans un formulaire web

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.

    REMARQUE

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

Insérer du contenu HTML

Vous pouvez inclure du contenu HTML dans une page de formulaire : liens hypertexte, 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.

REMARQUE

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 :

    REMARQUE

    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.

  • Pré-remplir les champs du formulaire avec les données de profil Facebook

    ATTENTION

    Cette fonction n'est disponible que si vous avez installé l'application Social Marketing. Avant d'utiliser cette option, vous devez créer une application Facebook, ainsi qu'un compte externe de type Facebook Connect. Voir à ce sujet cette page.

    L'option Précharger avec Facebook permet d'insérer, dans un formulaire, un bouton permettant de pré-remplir les champs grâce aux informations de profil Facebook.

    Lorsque l'utilisateur clique sur le bouton Remplir automatiquement, l'écran de demande de connexion Facebook apparaît.

    REMARQUE

    Il est possible de modifier la liste des droits étendus lors de la configuration du compte externe. Si vous ne renseignez aucun droit étendu, Facebook transmet par défaut les informations de base du profil.
    Pour connaître la liste des droits étendus et leur syntaxe, cliquez sur le lien : https://developers.facebook.com/docs/reference/api/permissions/

    Si l'utilisateur autorise le partage de ses informations, les champs du formulaire sont alors pré-remplis.

Pour réaliser ce cas d'utilisation, nous avons créé une application web composée des éléments suivants :

  • une page contenant le formulaire
  • une activité Enregistrement
  • une activité Fin

Les étapes d'ajout du bouton de pré-remplissage sont les suivantes :

  1. Créez votre formulaire.

  2. Positionnez-vous au même niveau que les champs du formulaire et ajoutez un lien.

  3. Renseignez le libellé et sélectionnez le type Bouton.

  4. Dans le champ Action, sélectionnez Précharger avec Facebook.

  5. Dans le champ Application, sélectionnez le compte externe de type Facebook Connect créé précédemment. Voir à ce sujet cette page.

Personnaliser le contenu HTML

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. Voir à ce propos la section Utiliser les informations collectées.

REMARQUE

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 :

Utilisation de variables texte

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) %>.

    ATTENTION

    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 l’onglet 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 intégré de traduction. Voir à ce sujet la section Traduire un formulaire web.

Insérer des 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.

Sur cette page