Ajouter Google reCAPTCHA à un formulaire d'abonnement
Nous allons ajouter Google reCAPTCHA à tous les formulaires d'abonnement de LianaMailer afin d'empêcher les inscriptions non sollicitées à des newsletters, générées par des robots. ReCAPTCHA permet de distinguer un robot d'un utilisateur réel sans avoir à poser à l'abonné des questions de contrôle qui sont souvent jugées irritantes.
Pour ajouter ReCAPTCHA, nous avons besoin des clés de nos clients LianaMailer. Les clés peuvent être récupérées en créant un profil reCAPTCHA sur un site Google spécifique. Lisez les instructions sur la façon de créer un profil reCAPTCHA et de récupérer les clés ici.
For adding ReCAPTCHA, we need the keys from our LianaMailer customers. The keys can be retrieved by creating a reCAPTCHA profile on a specific Google site. Read the instructions on how to create a reCAPTCHA profile and retrieving the keys here.
Ajout de clés reCAPTCHA aux formulaires d'abonnement intégrés
Si un formulaire d'abonnement à la newsletter a été intégré à votre site, suivez ces instructions pour ajouter les clés aux paramètres du site :
- Ajoutez des scripts dans la section <head> de la page d'abonnement. Cela comprendra les scripts nécessaires pour exécuter reCAPTCHA sur votre site :
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
- Ajoutez ce script dans la section <head> de la page. Ce script va confirmer et faire correspondre les clés données :
<script> function onSubmit(token) { document.getElementById("lianamailer").submit(); } </script> - Modifiez le bouton Submit/Envoyer pour avoir les classes nécessaires pour appeler reCAPTCHA. Modifiez le data-sitekey pour qu'il contienne votre clé publique de site :
<input value="Tilaa" type="submit" class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit'>
- Envoyez les clés reCAPTCHA à notre support pour l'installation.
Ajout de clés reCAPTCHA aux formulaires AJAX
Si vous utilisez le code d'intégration dans l'onglet Formulaires intégrés qui se trouve dans les paramètres, le formulaire sera exécuté en tant que formulaire Ajax. Dans ce cas, le script requis pour la vérification du reCAPTCHA sur votre site Web diffère dans la bibliothèque de scripts requise ainsi que dans la vérification elle-même. En revanche, l'invitation requise pour le bouton Submit/Envoyer reste la même.
- Modifiez le code d'intégration que vous obtenez de LianaMailer en ajoutant id="lianamailer" sur la première ligne.
<form class="lianamailer" id="lianamailer" data-lianamailer="form" method="post" action="">
- Ajoutez la bibliothèque nécessaire à la section head du site.
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
- Si vous souhaitez prendre en charge l'utilisation de votre site avec le navigateur obsolète Internet Explorer 11, ajoutez également la bibliothèque polyfill à la section head de votre site. Cette bibliothèque ajoute un support pour la syntaxe du code qui n'est pas supportée par cette version du navigateur.
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>
- Ajoutez le code de vérification dans la section head du site. Cela vérifie les clés lors de l'envoi du formulaire et transmet les données à la distribution ajax.
<script>
function onSubmit(token) {
var submit_event = null;
try {
submit_event = new Event("submit", {"bubbles": false, "cancelable":
true});
}
catch (error) {
submit_event = document.createEvent("Event");
var bubbles = false;
var cancelable = true;
toggle_event.initEvent("submit", bubbles, cancelable);
}
document.getElementById("formfield").dispatchEvent(submit_event);
}
</script>
- Ajoutez les scripts nécessaires au bouton Submit/Envoyer du formulaire pour l'invitation de la vérification. N'oubliez pas d'entrer la clé de site de votre profil reCAPTCHA dans le script data-sitekey :
<input value="Tilaa" type="submit" class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit'>