Touchdown et Dynamics 365 : Ajouter un Recaptcha Google sur vos formulaires

Nous allons présenter ici comment intégrer un Captcha sur vos formulaires Touchdown.

Les formulaires permettent par exemple de capter les soumissions de vos formulaires de contact et de les intégrer directement en leads dans votre CRM

Sauf que un formulaire de contact sans protection anti-bot, ça va rapidement remplir votre CRM de déchet.

Bonne nouvelle, je vais vous montrer comment corriger ça rapidement.

Objectif

Ajouter Google reCAPTCHA v2 (checkbox) sur un formulaire Touchdown sans casser :

• la validation native Touchdown

• la soumission vers Dynamics 365

• le tracking marketing

Contexte technique

Touchdown génère des formulaires embarqués qui reposent sur :

• un <form> HTML

• un moteur JavaScript interne (tdFormInstance.process())

Impératif absolu : Le formulaire doit être de type “Bloc à intégrer”.

Une fois votre formulaire prêt, récupérer les différents élements.

Ce sont ceux là que l’on va modifier / compléter

Étape 1 : Charger les scripts nécessaires

On va charger les scripts nécessaire en plus de ceux de Touchdown

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function () {

    $('#sb_form').submit(function (event) {

      event.preventDefault();

      var response = grecaptcha.getResponse();

      if (response.length == 0) {
        // reCAPTCHA non validé
        $('#alert_captcha').show();
      } else {
        // reCAPTCHA validé
        $('#alert_captcha').hide();
        tdFormInstance.process();
      }

      return false;
    });

  });
</script>

Étape 2 – Ajouter le composant reCAPTCHA dans le HTML

Dans le contenu HTML du formulaire Touchdown, ajoute ce bloc à l’endroit exact où tu veux afficher le captcha (généralement juste avant le bouton Envoyer).

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td style="padding-top: 10px; padding-bottom: 10px;">
      <div class="g-recaptcha" data-sitekey="TA CLE PUBLIQUE GOOGLE"></div>
      <span id="alert_captcha" style="color:red;font-weight:bold;display:none;">
        Vérifier le captcha
      </span>
    </td>
  </tr>
</table>

Étape 3 – Supprimer le onsubmit natif (OBLIGATOIRE)

Par défaut, Touchdown génère un formulaire de ce type :

<form id="sb_form" onsubmit="tdFormInstance.process(); return false;" method="post">

C’est incompatible avec reCAPTCHA

Pourquoi ? Parce que Touchdown intercepte la soumission avant que tu puisses valider le captcha.

<form id="sb_form" method="post">

Et voilà

• ✔️ Le captcha est bloquant

• ✔️ Touchdown reste maître de la soumission

• ✔️ Dynamics 365 reçoit uniquement des leads propres

• ✔️ Aucun impact sur le tracking marketing