Le module Formulaire de Divi offre la possibilité d’ajouter un captcha pour limiter les messages indésirables.
Vous avez tous en tête ce champ dans lequel il faut inscrire la somme d’un calcul pour prouver que vous n’êtes pas un spambot.

En remplacement, si vous souhaitez augmenter la sécurité de vos formulaires, vous pouvez utiliser Google Recaptcha, l’antispam made in Google.
Son implémentation n’étant pas incluse dans Divi, je vais donc vous expliquer comment l’ajouter manuellement.

Le principe

Derrière la simplicité apparente de l’utilisation de Google Recaptcha – où un clic suffit pour prouver son humanité – se cache un algorithme complexe.
En effet, via l’analyse de vos mouvements de souris, de votre manière de saisir au clavier et de quelques autres critères, celui-ci sait différencier un robot d’un être humain. Et si jamais il a un doute, il vous demandera un petit test complémentaire.

La manière que je propose pour implémenter Google Recaptcha dans le module formulaire de Divi est une version simplifiée de la méthode habituelle.
Normalement, c’est lors de la soumission du formulaire qu’un fichier PHP spécifique contenant la clé secrète communique avec l’API de Google pour vérifier l’humanité de l’utilisateur. Ce qui, dans le cas de Divi, ne serait pas très simple à mettre en place…

Si vous avez testé mon formulaire de démo, vous avez pu constater que le bouton “Envoyer” n’était pas cliquable tant que vous n’aviez pas validé le Recaptcha.
Toute l’astuce est là : on fait un callback en Javascript sur la validation du Recaptcha pour activer ou non le bouton de soumission du formulaire via CSS.
En termes simples : on écoute si le Recaptcha confirme qu’il s’agit d’un utilisateur en chair et en os et, si tel est le cas, on active le bouton “Envoyer”.

Créez votre Google Recaptcha

Et oui, pour commencer il vous faut générer votre Recaptcha chez Google.

  • Rendez-vous sur cette page
  • Connectez-vous avec votre compte Google si nécessaire
  • Renseignez les infos nécessaires dans la boite de dialogue “Enregistrer un site”
Divi Community - Enregistrer un site pour Google Recaptcha
  1. Donnez un nom à votre site
  2. Choisissez le Recaptcha de type “Case à cocher”
  3. Précisez l’URL de votre domaine (sans https ou www)
  4. Acceptez les CGU
  5. Libre à vous de laisser coché ou de décocher les alertes

Une fois cette première étape enregistrée, une nouvelle page va s’ouvrir avec le détail de votre Recaptcha.

Divi Community - Intégration côté client du Google Recaptcha

Nous allons juste nous intéresser à la partie “Étape 1 : intégration côté client”, car ce sont ces lignes que vous allez devoir insérer sur la page de votre formulaire de contact.

Ajoutez le Google Recaptcha à votre formulaire Divi

Je pars du principe que vous avez déjà créé votre formulaire comme vous l’entendez…
Je le précise aussi à tout hasard, mais le captcha du module Formulaire de Divi n’a évidemment pas besoin d’être activé. 😉

Divi Community - Désactiver le captcha du module formulaire

Incluez le script de Google Recaptcha dans votre page

Divi Community - Ajouter un module code dans Divi

Pour ceci, insérez un module Code dans votre page, avant le module Formulaire et insérez la ligne suivante :

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Dans l’idéal, il faudrait que ce script soit appelé dans le <head> du site, mais ça fonctionne tout de même ainsi…
Sinon,  vous avez 2 autres solutions :

  • ajouter cette ligne dans options du thème Divi -> Intégration -> Ajouter du code dans le <head> de votre blog mais de cette manière, ce script sera chargé sur toutes les pages de votre site. Ce qui est inutile si votre formulaire n’est présent que sur une seule page…
  • si vous utilisez un thème enfant, vous pouvez faire une inclusion avec condition en ajoutant le code suivant dans votre fichier functions.php.
    Vous n’avez qu’à modifier 999 par l’identifiant de la page concernée.
function dc_inclusion_google_recaptcha() {
    if (is_page(99)) {
      wp_enqueue_script( 'google-recaptcha', '//www.google.com/recaptcha/api.js' );
    }
}
add_action( 'wp_enqueue_scripts', 'dc_inclusion_google_recaptcha' );

Insérez le Google Recaptcha dans votre formulaire

Divi Community - Insérer un module code dans Divi

Ajoutez un second module Code à votre page avec les lignes ci-dessous :

<script>
  jQuery(document).ready(function($){
    $('.et_pb_contact_submit').prop('disabled', true);
    $('.et_contact_bottom_container').prepend('<div class="g-recaptcha" data-sitekey="VOTRE_CLÉ_SECRÈTE" data-callback="recaptcha_callback"></div>')
  });

function recaptcha_callback(){     
	jQuery('.et_pb_contact_submit').prop("disabled", false);
    }
</script>

Détaillons ce code

  • Ligne 3  : on cible le bouton d’envoi du formulaire .et_pb_contact_submit, auquel on ajoute la propriété disabled pour le rendre inactif.
  • Ligne 4 :  on insère à l’endroit voulu le code HTML correspondant au Google Recaptcha.
    Ici, en première position dans la div .et_contact_bottom_container qui contient le bouton d’envoi du formulaire.
    Notez la propriété data-callback="recaptcha_callback" qui va nous permettre “d’écouter” le résultat du Recaptcha.
    Et surtout, pensez à renseigner votre clé secrète là où je l’ai indiqué. 😉
  • Ligne 7 : on déclare l’action à effectuer si le résultat est concluant, à savoir retirer la propriété disabled au bouton d’envoi pour le rendre cliquable.

Affinez le style

Divi Community - Bouton d'envoi du formulaire Divi inactif

Pour terminer, ajoutez un peu de CSS pour styler le Google Recaptcha et le bouton d’envoi du formulaire.
Voici les règles CSS que j’ai utilisées dans ma démo. Libre à vous de les modifier pour coller avec le style de votre formulaire.

.g-recaptcha > div {
  margin: 0 auto 20px;
}

.et_pb_contact_submit:disabled {
  opacity: 0.5;
}

.et_pb_contact_submit:disabled:hover {
	padding: .3em 1em;
  cursor: not-allowed;
  margin-bottom: 0;
  border: none;
}

.et_pb_contact_submit:disabled:hover:after {
	display: none;
}

Détaillons ce code

  • Lignes 1 – 2 : on centre le Recaptcha et on ajuste ses marges haut et bas
  • Lignes 5 – 6 : on réduit l’opacité du bouton désactivé
  • Lignes 9 – 13 : on fait quelques ajustements sur le bouton désactivé lors de son survol, notamment pour ajouter le pointeur précisant qu’aucune action n’est possible
  • Lignes 16 – 17 : on retire l’icone qui normalement apparait au survol du bouton quand celui-ci est activé

En conclusion

Les robots spammeurs peuvent passer leur chemin, car vous savez désormais comment ajouter un Google Recaptcha au module Formulaire de votre site Divi !
Ici encore, nous voyons la puissance et la souplesse de jQuery quand nous avons besoin d’insérer des éléments à l’endroit que l’on souhaite.  
Enfin, dans tout ça, je crois que la plus grande difficulté fût d’écrire correctement “Recaptcha” une trentaine de fois… 😀

D'autres tutoriels pouvant vous intéresser: