Navigation

Créer un formulaire d'édition hébergé sur Dialog Insight

La création du formulaire d'édition de profil vous permet de personnaliser celui qui est offert par défaut. Vous pouvez le personnaliser en modifiant un champ existant ou en ajoutant ou supprimant des champs. Il faut savoir que les champs composant la clé unique ne sont pas supprimables puisqu'ils sont nécessaires à l'identification du contact dans l'application.

 

 Pré-requisAvoir déjà créé un formulaire et utiliser le formulaire par défaut.
Chemin d'accès > Processus > Abonnement et mise à jour

 Comment faire

Un modèle de formulaire vous est offert afin d'en accélérer la création. Ce modèle vient avec des champs et des textes par défaut. Vous pouvez toutefois personnaliser le formulaire selon vos besoins, en modifiant :

  • la structure - Vous pouvez créer un formulaire sur 1, 2 ou 3 colonnes.
  • les éléments de contenu - Vous pouvez insérer divers éléments de contenu différents. Voir la Description des zones de contenu.
  • les styles - Vous pouvez changer les styles qui s'appliquent à toutes les pages et à tous les messages.

Si vous souhaitez changer les champs du formulaire afin de demander d'autres informations, vous devez le faire via la page Configuration du formulaire.

Ouvrir le formulaire d'édition de profil
  1. Cliquez sur l'image du formulaire .

  2. Le modèle du formulaire s'ouvre dans l'éditeur de message en mode Glisser-Déposer.
  3. Il convient alors de l'adapter à vos besoins spécifiques, en ajoutant, modifiant ou supprimant des éléments de contenu et des textes.
Définir les styles globaux

Les styles qui sont définis ici s'appliquent à toutes les pages d'information et à tous les messages du processus. Si des styles spécifiques sont définis au niveau d'un contenu particulier, il remplacera le style global.

Pour modifier les styles existants, accédez à la section Styles dans le volet de gauche et cliquez sur Éditer.

SectionDescription
ContenuStyles applicables aux textes et aux liens, dont la police de caractères, la taille, la couleur, le poids, etc.
PagesStyles applicables à l'ensemble de la page, dont l'espacement du haut, la couleur et l'image de fond.
Options avancéesOptions supplémentaires pouvant être appliquées.
Modifier la structure du formulaire

Le modèle de formulaire vient avec une seule colonne, mais vous pouvez changer cette disposition en choisissant une autre structure, ou ajouter une zone avec une disposition différente.

Pour modifier la structure ou en ajouter une, accédez à la section Structure et faites glisser la disposition de votre choix dans le formulaire.

Définir les zones de contenu du formulaire

Le formulaire par défaut vient avec des sections prédéfinies pour l'en-tête, le contenu et le pied de page. Les éléments de contenu disponibles peuvent être insérés dans n'importe quelle section du formulaire, à l'exception du formulaire de saisie en tant que tel, avec ses champs, qui lui ne peut être inséré que dans la zone destinée au contenu.

  1. Pour ajouter une nouvelle zone de contenu, sélectionnez-la dans la section des zones disponibles et faites-la glisser jusque dans la section désirée.
  2. Pour éditer une zone de contenu, cliquez sur l'icône d'édition de cette zone de contenu.
  3. Pour supprimer une zone de contenu du formulaire, il faut simplement cliquer sur l'icône d'édition  qui y est associée.
Description des zones de contenu
 
NomDescription et utilisation
Texte libre

Élément qui permet d'ajouter du texte.
On peut ajouter une zone de texte dans n'importe quelle section du formulaire ou d'une page.


Propriétés applicables au texte
           
SectionDescription
ContenuSection pour taper ou coller du texte. Au besoin, cliquez sur l'icône d'édition  pour ouvrir l'éditeur de texte et disposez de toutes les options de format de texte.

Sachez qu'il est possible d'insérer une image à même le contenu du texte via l'option d'insertion d'image hébergée ou Web.

Si vous avez choisi une zone comportant plusieurs colonnes, il sera indiqué s'il s'agit du contenu de gauche, du centre ou de droite. De plus, la hauteur des colonnes s'ajustera selon le contenu le plus long.
Les styles appliqués à l'aide du l'éditeur ont préséance sur ceux définis via la section Styles ci-après.
StylesSection qui permet de définir les styles applicables à l'ensemble des textes insérés dans la zone de contenu.
ConfigurationsSection qui renferme les paramètres d'espacement autour du texte.
Image


Élément qui permet d'ajouter une image dans le formulaire ou dans une page. On peut s'en servir notamment dans l'en-tête pour insérer le logo de l'entreprise ou une image représentative du formulaire.
En plus de pouvoir ajouter une image, on peut en définir la largeur, le texte alternatif à afficher advenant que les images ne peuvent s'afficher, et au besoin un lien de redirection, soit la page qu'on veut ouvrir en cliquant sur l'image.

Pour choisir une nouvelle image
  • Pour ajouter une image, choisissez une image parmi celles figurant sous la section Images et faites la glisser jusque dans le bloc de votre choix, dans le message (ou formulaire).
  •  Pour remplacer une image, double-cliquez dans le bloc contenant l'image ou placez le curseur dans le coin supérieur droit de la zone et cliquez sur l'icône d'édition . Cliquez ensuite sur l'icône  figurant à côté du nom de l'image pour ouvrir le sélecteur d'image. Sélectionnez la nouvelle image et cliquez sur Sélectionner. Pour redimensionner, recadrer ou faire pivoter cette image, cliquez sur l'icône d'édition , qui ouvrira l'éditeur d'image intégré.
  • Vous pouvez également choisir une nouvelle image, qui n'est pas encore hébergée, en cliquant sur Téléverser une image.
    1. Dans le sélecteur d'images, cliquez sur Téléverser dans la bibliothèque ou Téléverser de votre ordinateur pour ouvrir votre explorateur de fichiers.
    2. Naviguez jusqu'à l'emplacement de l'image en question et sélectionnez-la.
      ** Les images au format PNG, GIF et JPG sont à privilégier.
    3. Sélectionnez l'image et cliquez sur Ajouter.
    4. Assurez-vous que les dimensions de l'image soient adéquates. Au besoin, vous pourrez modifier votre image avant de l'insérer dans le message (ou le formulaire) en cliquant sur l'icône d'édition . S'ouvrira alors un éditeur d'image vous permettant de redimensionner ou recadrer votre image, ou de lui apporter toute autre modification nécessaire.
    5. Si vous avez apporté des changements, n'oubliez pas de les enregistrer.
    6. Si vous avez beaucoup d'images et avez créé des catégories pour les regrouper, sélectionnez dans la liste Catégorie celle dans laquelle vous voulez placer votre nouvelle image, le cas échéant.
    7. De retour dans l'éditeur de message, sélectionnez votre image et faites la glisser à l'endroit désiré dans le message.


Propriétés applicables à l'image
        
SectionDescription
Image (URL)Tapez l'URL de l'image ou encore sélectionnez-en une dans le sélecteur de fichiers en cliquant sur l'icône d'édition .
Pour effectuer des retouches à l'image, soit pour en modifier la taille, la couleur, l'orientation, ou autre, cliquez sur l'icône d'édition  pour ouvrir l'éditeur d'image.
LargeurLargeur maximale de l'image, en pixels.
* Pour assurer un affichage adéquat de l'image dans le formulaire, il est fortement conseillé que l'image choisie ait les mêmes dimensions (largeur et hauteur) que celles que vous souhaitez avoir dans le formulaire. De plus, le fait d'avoir la bonne dimension d'image réduira le temps de chargement du formulaire.
**Comme tout le contenu du formulaire est adaptatif, la dimension de l'image sera ajustée au format de l'écran sur lequel il s'affiche.
Texte alternatifTexte utilisé en remplacement d'une image. Ce texte est affiché lorsque l'image ne peut s'afficher ou encore pour des besoins d'accessibilité pour les personnes touchées par une invalidité ou incapacité.
LienAdresse complète de la page que vous souhaitez afficher lorsque l'on clique sur l'image.
ConfigurationsOptions supplémentaires pour définir l'alignement et l'espace autour de l'image.
Séparateur

Élément qui ajoute une ligne horizontale, qui sert surtout à séparer des sections.

Propriétés du séparateur
        
SectionDescription
StylesSection qui permet de définir les styles applicables à la ligne.
ConfigurationsSection qui renferme la largeur et les paramètres d'espacement de la ligne.
Bouton

Élément qui ajoute un bouton d'action, qui dirige le visiteur vers une action ou page définie.

Propriétés du bouton
        
SectionDescription
ContenuSection qui permet de définir le texte à figurer sur le bouton et le lien de l'adresse de redirection.
StylesSection qui permet de définir les styles applicables au texte et à la boîte du bouton.
ConfigurationsSection qui renferme les paramètres d'espacement autour du bouton et sa largeur.
Formulaire

Élément qui affiche les champs de saisie qui permettent de capturer des informations sur les personnes désirant éditer leur profil. Certains champs sont déjà inclus dans le modèle du formulaire, notamment ceux qui composent la clé unique du projet. Ces champs ne peuvent être modifiées car ils servent à identifier les personnes en tant que contact dans l'application Dialog Insight.
** Il ne peut y avoir qu'un seul élément de saisie par formulaire.
 Comment faire
  • Pour éditer les styles applicables aux champs, aux descriptions des champs, aux sections ou au bouton d'action, cliquez sur l'icône d'édition  dans le coin supérieur droit de l'élément de contenu.
  • Pour modifier ou ajouter des champs afin de capturer des informations différentes ou supplémentaires, vous devez aller à la page Configuration du formulaire.

Suivi sur médias sociaux

Élément qui permet d'ajouter des liens vers vos pages de médias sociaux (icônes et liens respectifs).
Les images représentatives des diverses applications sont déjà fournies et ne peuvent pas être modifiées. Vous pouvez toutefois choisir celles à afficher, ainsi que le texte et le lien.

Propriétés applicables aux médias sociaux
        
SectionDescription
ContenuSection qui permet de choisir les applications à afficher, et de définir pour chacune le texte du lien et l'adresse de redirection.
StylesSection qui permet de définir les styles applicables à l'ensemble des textes et des liens.
ConfigurationsSection qui renferme les paramètres d'espacement, d'alignement, et de positionnement entre autres des icônes d'applications.
Configurer le formulaire

La configuration du formulaire consiste à définir les informations que vous souhaitez rendre éditable aux contacts qui veulent mettre à jour leur profil et comment ses champs s'afficheront.

Pour procéder à la configuration, il faut aller à la page Configuration du formulaire.

Préciser la disposition des champs
  1. Sous l'onglet Options du formulaire, définissez où doivent s'afficher les étiquettes de champ par rapport à la zone de saisie, soit à gauche, au-dessus ou à l'intérieur de la zone de saisie du champ.
Activer le processus d'authentification

Si vous voulez vous assurer que la personne qui remplit le formulaire est bel et bien une véritable personne, et non un robot, il est préférable d'activer l'option reCAPTCHA pour qu'une question de validation soit ajoutée dans le formulaire.

Si le formulaire s'affiche sous un domaine autre que ofsys.com, vous devrez au préalable enregistrer le domaine utilisé sur reCAPTCHA pour pouvoir connaître vos clés publique et privée.

Pour enregistrer votre site ou domaine sur reCAPTCHA, allez sur https://www.google.com/recaptcha/admin#list et suivez les directives présentées à l'écran. Une fois l'enregistrement effectué, reCAPTCHA vous donnera une clé publique et une clé privée, que vous devrez préciser dans Dialog Insight.

Pour activer l'option d'authentification

  1. Sous l'onglet Options du formulaire, cochez l'option Utiliser Google Recaptcha.
  2. Cliquez sur le lien Gérer mes clés.
  3. Choisir votre domaine, s'il a déjà été configuré. Autrement, cliquez sur Ajouter une clé pour y ajouter le nom de domaine du site ou de la page affichant le formulaire d'inscription et précisez la clé publique et la clé privée assignées par reCAPTCHA lors de l'enregistrement.
Définir les données pouvant être modifiées

Le choix des données éditables se fait en sélectionnant parmi les champs du projet. Vous pouvez ajouter, modifier ou encore supprimer des champs dans la section Champs du formulaire. Notez qu'il n'est pas possible de supprimer les champs composant la clé unique car ces données permettent d'identifier les contacts dans l'application.

Pour ajouter un nouveau champ
  1. Cliquez sur le lien Ajouter un champ.
  2. Dans la fenêtre d'ajout d'un champ, choisissez la section dans laquelle vous voulez ajouter le champ et sélectionnez ensuite le champ. Peuvent figurer dans le formulaire n'importe quel champ du projet et quelques champs spécifiques aux activités. Les champs qui figurent déjà dans le formulaire ne sont pas présentés dans la liste, de sorte à ne pas les ajouter deux fois.
    • Si vous voulez ajouter un champ dans une section qui n'existe pas, vous devrez ajouter cette nouvelle section au préalable, en cliquant sur Ajouter une section.
      • Dans la fenêtre d'ajout d'une section, précisez l'étiquette et une description de la section. Si vous avez plus d'une langue d'inscription, vous devrez entrer une étiquette et une description pour chaque langue.
      • Cliquez sur Ajouter.
    • Précisions sur les sections
      S'il n'y a qu'une seule section, son nom ne s'affichera pas dans le formulaire. Par contre, s'il y a plus d'une section, elles s'afficheront toutes dans la formulaire, chacune présentant les champs associés.

  3. Vient ensuite la configuration du champ, dont certaines données sont requises (champs avec ).
Pour modifier un champ déjà dans le formulaire

La modification d'un champ est semblable à la procédure de création, sauf que les valeurs du champ ne sont pas toutes modifiables.

  1. Dans la liste des champs du formulaire, cliquez sur l'icône d'édition  associée au champ que vous souhaitez modifier.
  2. Dans la fenêtre de modification du champ, éditez les données désirées.
    Notez que les champs Champ et Requis ne peuvent pas être modifié une fois le champ créé.
  3. N'oubliez pas d'enregistrer vos changements.
  4. Si vous avez modifié un champ dans un formulaire qui est déjà en ligne, vous devrez mettre à jour le processus d'abonnement pour que les changements soient appliqués.
Description des données relatives à un champ
 
ChampDescription
SectionNom de la section dans laquelle figure le champ.
ChampNom du champ sélectionné. Il peut s'agir d'un champ du projet ou encore d'un champ spécifique au formulaire.
ÉtiquetteNom du champ tel qu'il doit figurer dans le formulaire. Si plusieurs langues sont offertes, il faudra préciser une étiquette pour chaque langue.
**Attention - Si une étiquette n'est pas fournie pour une langue donnée, c'est l'étiquette dans la langue par défaut qui sera utilisée.
Description
Description facultative du champ, pour permettre aux utilisateurs de mieux comprendre l'utilité du champ.
SourceSource de la valeur à saisir dans le champ.
  • Champ du formulaire - La valeur sera saisie par le participant, en remplissant le formulaire d'inscription.
  • Valeur fixe - Utilisé pour attribuer la même valeur à tous. Cette valeur ne sera donc pas affichée dans le formulaire d'inscription, mais la valeur sera toutefois inscrite dans le profil du contact.
    Si vous optez pour cette option, vous devez préciser cette valeur dans la champ Valeur fixe.
TypeDisponible uniquement lorsque la valeur du champ provient du formulaire.
Champ permettant de définir le type de valeur qu'il est possible de saisir dans le champ. Toute donnée entrée dans un champ ne correspondant pas au type spécifié pour le champ peut occasionner une erreur. Les types de champs possibles sont :
  • Champ texte - Champ présentant une zone de texte libre pour saisir la valeur.
  • Menu déroulant - Champ présentant un choix de réponses présentées sous forme de liste déroulante et dont les valeurs et les étiquettes sont définies dans la section Choix.
  • Bouton radio - Champ présentant un choix de réponses présentées sous forme de boutons radio et dont les valeurs et les étiquettes sont définies dans la section Choix.
OptionsDisponible uniquement lorsque la valeur du champ provient du formulaire.
  • Requis - Case à cocher indiquant si le champ est requis ou non lors de l'inscription. Lorsqu'un champ est requis, il présente une icône à cet effet, soit .
    Un champ requis ajoute une règle qui interdit l'ajout d'un contact dans la base de données sans donnée valide pour ce champ. Par contre, si une valeur par défaut a été définie pour le champ requis, le contact pourra quand même être ajouté. Par conséquent, si un champ requis n'a pas de valeur par défaut, il sera impossible d'ajouter le contact.
  • Multi-ligne - Champ dont la valeur est présentée sous forme de zone de texte sur plusieurs lignes. Le nombre de caractères pouvant être saisi dépend de la longueur maximale définie, le cas échéant.
Longueur maximumDisponible uniquement lorsque la valeur du champ provient du formulaire.
Longueur du champ en terme de nombre de caractères, lorsqu'il s'agit d'un champ texte.
Valeur par défautDisponible uniquement lorsque la valeur du champ provient du formulaire.
Valeur par défaut à attribuer à un champ REQUIS lorsque aucune valeur n'est fournie.
Si une valeur par défaut a été définie pour un champ requis, le contact pourra être ajouté même s'il n'a pas fourni de donnée.
Voir un aperçu du formulaire avant sa publication

Avant de publier le formulaire, vous voudrez valider que celui-ci s'affiche tel que vous le voulez.

  1. Retournez dans l'éditeur de message et cliquez sur la loupe  pour prévisualiser le formulaire.

IMPORTANT - Attention de NE PAS UTILISER l'adresse qui s'affiche dans la barre d'adresse lorsque la page de l'aperçu du formulaire s'affiche; cette adresse N'EST PAS LE LIEN à insérer dans votre message ou sur votre site pour ouvrir le formulaire. IL S'AGIT UNIQUEMENT D'UNE PAGE TEST.
Le véritable lien donnant accès au formulaire n'est disponible qu'une fois le formulaire publié et figure sous le bouton Dépublier.

Publier le formulaire

Vous devez publier le formulaire afin de générer le lien qui y donne accès. Vous devrez ensuite copier ce lien sur la ou les pages où vous voulez qu'il s'affiche.

  1. Allez à la page Édition.
  2. Valider que tous les éléments sont complets et sans erreur.
  3. Cliquez sur Publier.
Insérer le lien du formulaire à l'endroit désiré

Lorsque tout le processus est configuré et à votre goût, il ne vous reste plus qu'à insérer le lien sur la ou les pages de votre site ou dans un message.

Le lien du formulaire ne s'affiche que lorsque qu'il est publié. Il figure dans une section distincte intitulée Lien du formulaire.

Cette réponse a-t-elle été utile ? Oui Non

Envoyer vos commentaires
Désolés de n'avoir pu vous être utile. Aidez-nous à améliorer cet article en nous faisant part de vos commentaires.