Dans ce tutoriel, nous utilisons ChronoForms, une extension de Joomla! très utilisée, pour montrer comment vous pouvez intégrer la Consent Database à vos formulaires Joomla!. Si vous utilisez une autre extension, ce tutoriel pourra néanmoins vous servir car la procédure d’implémentation est généralement identique.
Pour utiliser la Consent Database avec ChronoForms, il vous faudra utiliser la méthode d’implémentation par JavaScript.
En bref, vous devez :
id nécessaires ; etPour commencer, copiez le code que vous trouverez à la page Consent Database > Intégrer > JavaScript.
Collez-le dans la section head de toutes vos pages. Pour ce faire, vous avez deux options :
head dans Extensions > Plugins > Système – Headtag > Menu Item Tags et collez le script de la Consent Database.
Une fois le code Consent Database intégré à la section head de votre site, rendez-vous sur votre tableau de bord Joomla! et créez un formulaire (p. ex. « contact ») à l’aide de l’extension ChronoForms.
Si votre site utilise déjà ChronoForms, rendez-vous sur votre page d’aperçu des formulaires (Components > ChronoForms6) et cliquez sur le formulaire auquel vous souhaitez intégrer la Consent Database.
Pour notre exemple d’implémentation, nous utiliserons le formulaire suivant (nom, e-mail, message et abonnement à la newsletter) :
Sur ChronoForms, il devrait apparaître comme ceci :
Une fois le contenu de votre formulaire défini, il vous faut adapter les champs de saisie ce dernier pour permettre à la Consent Database d’identifier et de récupérer les informations que vos utilisateurs y saisissent.
Pour procéder à cette mise en correspondance (« mapping »), vous pouvez utiliser la fonction load (ou la fonction submit) avec l’objet map). Pour le bon fonctionnement de la fonction load ou submit, il vous faudra :
form ;subject et en preferences ; etid pour l’élément submit ;a. Cliquez sur l’icône des paramètres à droite de la zone de formulaire et ajoutez une id à votre formulaire :
b. Comme pour Form ID, ajouter une id pour les champs de texte (dans notre exemple : nom, e-mail et message) :
Ainsi qu’aux cases à cocher (ici, « generic » et « newsletter ») :
Si votre case à cocher est obligatoire, comme celle ci-dessus, veillez bien à :
#contact-submit, comme indiqué plus bas sur la configuration générale du bouton « envoyer ») : 
c. Enfin, donnez aussi une id au bouton « envoyer » :
Il est également possible d’ajouter un message de confirmation à afficher lorsque l’utilisateur aura rempli le formulaire (submit > Actions) :
Sauvegardez vos modifications et vérifiez que votre formulaire est bien publié.
Si vous modifiez un formulaire déjà existant sur votre site, allez directement à la section ci-dessous. Sinon, si vous venez de créer le formulaire, copiez le code du formulaire généré par ChronoForms :
{chronoforms6}contact{/chronoforms6}Et collez-le dans une page de votre site (p. ex. « nous contacter »).
Maintenant que votre formulaire est prêt, vous devez vous assurer qu’il envoie les informations à la Consent Database lorsque l’utilisateur le remplit et le valide. Vous avez deux possibilités :
load , qui vous permet d’envoyer les données de consentement aux API de iubenda de manière asynchrone :submit, qui vous permet d’envoyer les données de consentement aux API de iubenda de manière synchrone.La fonction load vous permet de lier des champs de l’objet consent à des champs de saisie de votre élément <form> et d’enregistrer automatiquement le consentement, soit en programmant une fonction de déclenchement via submitElement:, soit en programmant l’enregistrement via un déclencheur dédié.
Par défaut, cette méthode écrit dans localStorage pour protéger les données de toute perte qui pourrait survenir si une nouvelle page était chargée avant que le JavaScript n’ait été complètement exécuté.
La fonction load doit être appelée seulement après la déclaration de l’objet form (comme illustré dans l’exemple ci-dessous).
Voici la fonction load avec l’objet map :
<script>
_iub.cons_instructions.push(["load", {
submitElement: document.getElementById("contact-submit"),
form: {
selector: document.getElementById("contact-form"),
map: {
subject: {
first_name: "name",
email: "email"
},
preferences: {
generic: "generic",
newsletter: "newsletter"
}
}
},
consent: {
legal_notices: [{
identifier: "privacy_policy",
},
{
identifier: "cookie_policy",
}
],
}
}])
</script>À noter concernant le code ci-dessus :
contact-submit et contact-form ;first_name et d’ email subject (n’oubliez pas qu’il existe quatre options non modifiables : first_name, last_name, full_name et email) ;generic et newsletter) ;legal_notices, automatisées si vous synchronisez vos documents juridiques iubenda avec la Consent Database (utilisez simplement les identifiants standard privacy_policy et cookie_policy).Veillez à bien inscrire le script load après le formulaire (par exemple dans le pied de page de votre page de contact). Voilà, c’est tout !
Une fois les consentements collectés, vous pourrez trier et analyser les données de consentement de vos utilisateurs depuis le Tableau de bord de la Consent Database.
Pour plus d’informations sur la méthode load, consultez la documentation JS.
La méthode submit, qui vous permet d’envoyer les données de consentement aux API de iubenda de manière synchrone.
Cette méthode ne fonctionne pas s’il y a une règle de redirection après l’envoi du formulaire.
<script>
document.getElementById("contact-submit").onclick = function() {
sendToConsentSolution()
};
function sendToConsentSolution() {
var inputName = document.getElementById("name").value;
var inputEmail = document.getElementById("email").value;
var inputMessage = document.getElementById("message").value;
var subjectId = inputEmail.toLowerCase().replace(/\W/g, '-'); //optional
_iub.cons_instructions.push(["submit", {
form: {
selector: document.getElementById("contact-form"),
map: {
subject: {
first_name: "name",
email: "email"
},
preferences: {
generic: "generic",
newsletter: "newsletter"
}
}
},
consent: {
subject: {
id: subjectId
},
legal_notices: [{
identifier: "privacy_policy"
},
{
identifier: "cookie_policy"
}
]
}
}])
}
</script>À noter concernant le code ci-dessus :
contact-submit et contact-form ;first_name et d’ email subject (n’oubliez pas qu’il existe quatre options non modifiables : first_name, last_name, full_name et email) ;generic et newsletter) ;legal_notices, automatisées si vous synchronisez vos documents juridiques iubenda avec la Consent Database (utilisez simplement les identifiants standard privacy_policy et cookie_policy).subjectId — plutôt que de le laisser générer automatiquement — avec l’adresse e-mail de la personne concernée (par exemple), écrite toute en minuscules et en remplaçant les symboles « . » et « @ » par « – » : le subjectId de john.doe@iubenda.com devient ainsi john-doe-iubenda-com.Comme pour load, veillez à ce que la méthode submit soit insérée après le formulaire (p. ex. dans le pied de page de votre page de contact). Voilà, c’est tout !
Une fois les consentements collectés, vous pourrez trier et analyser les données de consentement de vos utilisateurs depuis le Tableau de bord de la Consent Database.
Pour plus d’informations sur la méthode submit, consultez la documentation JS.