Créer un formulaire de mise à jour de profil hébergé sur Dialog Insight

Un processus d'édition de profil est configuré par défaut dans le module Abonnements. Vous devez personnaliser les éléments de ce processus pour les adapter à votre utilisation et vos objectifs. Le processus inclut un point d'entrée (un lien) que vous intégrez à un message ou un intercepteur, le formulaire en tant que tel, une page de confirmation et un courriel de bienvenue (optionnel).   

Étape 1 : Générer le processus

Commencez par cliquer sur Créer un formulaire. Sélectionnez les options Mise à jour de profil et Dialog Insight, puis indiquez la langue du formulaire :

Étape 2 : Éditer le formulaire

Cliquez sur crayon pour éditer le formulaire d'édition :

Un modèle de formulaire vous est offert par défaut afin d'accélérer la création. Ce modèle vient avec des champs et des textes par défaut. Vous devez adapter le contenu et le visuel du formulaire pour que cela corresponde à votre objectif. Si vous souhaitez changer les champs du formulaire afin de demander d'autres informations, vous devez le faire dans la page Configuration du formulaire (voir étape 3 pour plus de détails).

☑ Entête et pied de page
Vous pouvez ajouter du contenu dans l'entête et dans le pied de page (votre logo, un texte explicatif, un titre, vos coordonnées). Vous devez d'abord ajouter un bloc Structure dans lequel vous glisserez un bloc Contenu. Les modifications à l'entête et au pied de page s'appliquent à toutes les pages du processus.

☑ Configurations globales (styles globaux)
Vous pouvez modifier les styles pour l'ensemble des étapes du processus. Toutefois, si des styles sont appliqués à un élément spécifique, ce style prévaudra dans cet élément. 

☑ Styles du formulaire
Dans la section principale du formulaire, modifiez la couleur, les largeurs et les polices des éléments principaux (champs, bouton, textes). 

☑ Ajout de contenu
Le modèle de formulaire vient avec une seule colonne qui englobe des sections prédéfinies pour l'entête, le formulaire et le pied de page. Vous pouvez ajouter une zone en glissant un bloc structure (colonnes) dans lequel vous glisserez un ou des blocs de contenu. Il s'agit du même fonctionnement que l'éditeur de courriel. Les éléments de contenu disponibles peuvent être insérés dans n'importe quelle section du formulaire, à l'exception du formulaire en tant que tel (les champs). Nous verrons comment modifier les champs ou en ajouter à la prochaine étape. 

Liste et description des blocs de contenu 

Texte	Contenu Section pour taper ou coller du 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 de l'éditeur ont préséance sur ceux définis dans la section Styles. Styles Section qui permet de définir les styles applicables à l'ensemble des textes insérés dans la zone de contenu. Configurations Section 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'entête pour insérer le logo de l'entreprise ou une image représentative. En plus de pouvoir ajouter une image, on peut en définir la largeur, le texte alternatif à afficher lorsque les images ne peuvent pas s'afficher, et au besoin un lien de redirection, soit la page qu'on veut ouvrir en cliquant sur l'image. Vous pouvez également choisir une nouvelle image, qui n'est pas encore hébergée, en cliquant sur Téléverser une image. ** Les images au format PNG, GIF et JPG sont à privilégier. 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 . 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. Section Description 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. Largeur Largeur 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 alternatif Texte 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é. Lien Adresse complète de la page que vous souhaitez afficher lorsque l'on clique sur l'image. Configurations Alignement et l'espace autour de l'image (padding).
Séparateur	Élément qui ajoute une ligne horizontale, qui sert surtout à séparer des sections. Propriétés du séparateur Section Description Styles Section qui permet de définir les styles applicables à la ligne. Configurations Section 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. Section Description Contenu Section qui permet de définir le texte à figurer sur le bouton et le lien de l'adresse de redirection. Styles Section qui permet de définir les styles applicables au texte et à la boîte du bouton. Configurations Section 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 s'abonner. 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és car ils servent à identifier les personnes en tant que contact dans Dialog Insight. ** Il ne peut y avoir qu'un seul élément de saisie par formulaire.
Suivi 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. Section Description Contenu Section qui permet de choisir les applications à afficher, et de définir pour chacune le texte du lien et l'adresse de redirection. Styles Section qui permet de définir les styles applicables à l'ensemble des textes et des liens. Configurations Section qui renferme les paramètres d'espacement, d'alignement, et de positionnement entre autres des icônes d'applications.

Étape 3 : Configurer les champs

☑ Champs par défaut
Dans la section Configuration du formulaire, vous pouvez modifier les champs affichés dans le modèle de base. D'abord, vérifiez si ces champs par défaut vous conviennent, en particulier ceux qui touchent à l'abonnement. Vous pouvez ajouter des champs selon les données que vous voulez collecter sur les personnes qui s'abonnent à vos communications. Vous pouvez retirer les champs dont vous n'avez pas besoin. 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 Dialog Insight. Les données entrées dans un champ du formulaire seront ajoutées à un champ de projet. Si vous avez modifié un champ dans un formulaire qui est déjà en ligne, vous devrez mettre à jour le processus pour que les changements soient appliqués.

Les champs d'abonnement sont affichés par défaut avec des cases à cocher. Vous pourriez enlever les cases à cocher et mettre l'abonnement "transparent" en sélectionnant Champ caché :

La personne qui soumet le formulaire sera automatiquement abonnée. Il est donc important de mettre un texte qui explique à quel abonnement on consent lorsqu'on clique sur le bouton de soumission. Si votre objectif n'est pas de permettre la mise à jour des abonnements, vous pouvez retirer les champs d'abonnement.  

Référence pour les configurations de champ  

Champ	Description
Section	Par défaut, le formulaire comporte une seule section. Si vous avez créé une autre section, vous aurez le choix pour l'emplacement du champ.
Champ	Nom du champ sélectionné. Il peut s'agir d'un champ du projet ou encore d'un champ spécifique au formulaire.
Étiquette	Nom 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.
Source	Source 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 - 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 le champ Valeur fixe.
Type	Disponible 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.
Requis	*Disponible uniquement lorsque la valeur du champ provient du formulaire. 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 maximum	Disponible uniquement lorsque la valeur du champ provient du formulaire. Longueur du champ en nombre de caractères, lorsqu'il s'agit d'un champ texte.
Valeur par défaut	Disponible uniquement lorsque la valeur du champ provient du formulaire. Valeur par défaut à attribuer à un champ REQUIS lorsqu'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.

☑ Disposition des étiquettes de champs
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.

☑ 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 ajouter une question de validation 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 :

1. Sous l'onglet Options du formulaire, cochez l'option Utiliser Google Recaptcha.
2. Cliquez sur le lien Gérer mes clés.
3. Choisissez 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.

Étape 4 : Éditer la page de confirmation

Lorsqu'on soumet le formulaire, on est redirigé sur une page de confirmation. Éditez le texte et le visuel de cette page pour l'adapter à votre identité visuelle et votre cas d'utilisation :    

Étape 5 : Ajouter un courriel de confirmation (optionnel)

Vous pouvez ajouter un message de bienvenue qui est envoyé automatiquement après avoir soumis le formulaire. C'est un outil utile si vous avez des infos additionnelles et pertinentes. Évitez de répéter le contenu de la page de confirmation.

Étape 6 : Publier le formulaire

Avant de publier, vérifiez le rendu visuel en cliquant sur Aperçu en haut à droite de l'éditeur du formulaire. Une fois tous les éléments complets et sans erreur, cliquez sur Publier dans la page d'édition du processus (en haut à droite).

Étape 7 : Intégrer le formulaire

Lorsque tout le processus est configuré et à votre goût, il ne vous reste plus qu'à insérer le lien dans un message (par exemple dans un bouton) ou un intercepteur :