T.V
- Les champs qui recueillent l'adresse postale d'un participant constituent une partie essentielle de nombreux formulaires. Ce tutoriel a pour but de vous montrer comment grouper les champs d'adresse. Un cas d'utilisation courant est de masquer le champ facultatif "numéro de boîte" lorsque vous connaissez déjà le reste de l'adresse d'un participant. Inversement, l'autre cas d'utilisation est d'afficher tous les champs d'adresse lorsqu'au moins un d'entre eux est vide.
Le pré-remplissage des formulaires permet à Qualifio de remplir automatiquement les champs avec les informations déjà enregistrées dans votre base de données. Comment l'utiliser ?
Lorsqu'un formulaire est pré-rempli, les champs peuvent alors adopter différents comportements. Les options sont : Montrer, Verrouiller ou Masquer. En effet, le profilage progressif de Qualifio masque ou verrouille les champs de formulaire que les prospects ont déjà complétés auparavant (sauf les champs définis sur "Montrer"). En d'autres termes, il affiche les champs en fonction des champs que le prospect a remplis lors de ses visites précédentes.
Depuis l'éditeur du formulaire, ce comportement peut être déterminé dans les "Options" de chaque champ.
À propos des champs d'adresse postale
Dans Qualifio, il existe six champs pour reccueillir l'adresse d'un participant :
- Nom de rue (obligatoire)
- Numéro (obligatoire)
- Boîte ou "Numéro de boîte" (facultatif)
- Code postal (obligatoire)
- Localité (obligatoire)
- Pays (obligatoire)
Pour ce tutoriel, imaginons le scénario suivant :
Vous réalisez un formulaire dans Qualifio qui contient les champs d'adresse énumérés ci-dessus.
Tout d'abord, vous pré-remplissez les champs en utilisant l'URL de pré-remplissage ou l'authentification unique SSO. Ensuite, vous les masquez pour les participants dont vous connaissez déjà l'adresse.
Or, tout cela fonctionne parfaitement lorsque vous connaissez l'adresse complète du participant, y compris son numéro de boîte. Toutefois, ce champ n'est pas utilisé à chaque fois (ce qui explique qu'il ne soit pas obligatoire sur la plupart des formulaires). C'est lorsque le participant n'a pas fourni de valeur pour le champ "Boîte" que les choses peuvent devenir délicates.
Les participants pourraient rencontrer un écran qui ressemble à celui-ci :
Le champ Boîte (ou "Numéro de boîte") est affiché, alors que les autres champs d'adresse ne le sont pas, ce qui entraîne forcément une certaine confusion.
Ne craignez rien, il existe une solution
Dans le scénario ci-dessus, vous voudriez afficher ou masquer le champ Boîte en fonction de si les autres champs d'adresse sont affichés ou masqués. L'affichage du champ Boîte devrait donc dépendre des autres champs d'adresse, puisqu'ils ont une relation entre eux.
Bien que ce ne soit pas l'option standard, les champs d'adresse peuvent être groupés, ce qui permet un comportement interdépendant et un affichage dynamique du champ Boîte.
Nous utiliserons la logique ci-dessous pour restreindre ce dernier :
Comment grouper les champs d'adresse postale ?
Suivez les instructions ci-dessous pour regrouper les champs d'adresse sur le formulaire d'une campagne :
1) Dans la navigation, cliquez sur Campagnes, puis sur le nom d'une campagne pour l'ouvrir.
2) Dans l'étape Canaux, cliquez sur Marqueurs.
3) Cliquez sur Code HTML supplémentaire et intégrez-y le script ci-dessous.
4) Cliquez sur Enregistrer.
Suivez les instructions ci-dessous pour grouper les champs d'adresse au niveau du site :
1) Dans la navigation, cliquez sur Paramètres.
2) Cliquez sur Sites.
3) Une fois le site choisi, ouvrez ses Marqueurs (l'icône </>)
4) Cliquez sur Code HTML supplémentaire et intégrez-y le script ci-dessous.
5) Cliquez sur Sauvegarder.
CODE ou SCRIPT à intégrer :
<script type="text/javascript" src="https://player.qualifio.com/demos/innovation/lib/showHideFields.js"></script>
<script type="text/javascript">
// simplify prefix
var fields = _qlf_fields;
// defined your rules
var applyRules = function() {
// design rules defined on the graph
if ( fields.getValue('country') == '') {
// hide nothing
} else if ( fields.getValue('locality') == '') {
// hide nothing
} else if ( fields.getValue('zipcode') == '') {
// hide nothing
} else if ( fields.getValue('address') == '') {
// hide nothing
} else if ( fields.getValue('number') == '') {
// hide nothing
} else {
fields.hideFields('country,locality,zipcode,address,number,box');
}
}
// apply rules when form is displayed
if (qlfDataLayer[0]['step'] == 'identityset') {
applyRules();
}
</script>
C'est tout. Vous pouvez maintenant conditionner l'affichage du champ Boîte : sa visibilité sera conditionnée par la visibilité des autres champs d'adresse.
Résultat attendu
- Vous connaissez déjà l'adresse complète du participant → le formulaire est pré-rempli avec ces informations → tous les champs obligatoires sont pré-remplis et masqués ; seul le champ Boîte (facultatif) est encore vide → le champ Boîte sera alors masqué.
- Vous connaissez déjà une partie de l'adresse du participant → le formulaire est pré-rempli avec ces informations → au moins un champ obligatoire est encore vide et il en va de même pour le champ Boîte (facultatif) → tous les champs, y compris la Boîte, seront alors affichés*.
*Limite : Pour que votre formulaire reste cohérent, nous recommandons vivement de définir tous les champs sur "Montrer". En effet, selon votre configuration, les champs du formulaire pourraient ne pas tous avoir le même comportement. Ainsi, vous pourriez par exemple avoir des champs verrouillés (en lecture seule pour empêcher leur modification), tandis que le champ Boîte sera toujours visible et modifiable si le participant n'a pas fourni de valeur pour celui-ci auparavant.
Jetez un coup d'œil à ce que cela permet d'accomplir :
Le champ Boîte est masqué lorsque tous les autres champs sont pré-remplis. Il n'est affiché qu'en cas de besoin, comme illustré ci-dessus.
C'est ainsi que grouper les champs d'adresse postale permet aux participants de mieux comprendre vos formulaires et d'interagir avec ceux-ci plus rapidement et plus efficacement.
• • •
Merci pour votre attention. Nous restons à votre écoute pour répondre à toutes vos remarques et suggestions !