Ajouter « nocaptcha reCaptcha » de Google à Guiform sous WordPress [Astuce]

J’utilise GuiForm pour faire des formulaires dans un WordPress, et je voulais y ajouter le captcha de Google sans pour autant devoir payer la licence chère de GuiForm juste pour ça…

Pour réussir ce que je décris ci-dessous, il vous faudra connaitre votre clé privée et publique de Google Captcha.

Il faut commencer par faire son formulaire (de contact dans mon cas) avec tous les champs voulus via GuiForm, puis on ajoute un champ de type « Heading » avec comme contenu « captcha ». On sauvegarde le formulaire.

Maintenant dans le fichier functions.php de votre thème il faut rajouter :

// on veut rajouter un captcha dans le formulaire de contact
// pour ça on surcharge 'guiform_render_form' qui est appelé par le plugin
function addCaptchaToGuiForm($content) {
  // on va remplacer "<h1>captcha</h1>" par ce qu'il faut
  $content = str_replace("<h1>captcha</h1>", "<div class='g-recaptcha' style='float:right' data-sitekey='VOTRE_CLE_PUBLIQUE' data-theme='light'></div><script src='https://www.google.com/recaptcha/api.js'></script>",$content);
  // on rajoute aussi du JavaScript
  $content .= '<script>'."\r\n".
              "function waitForjQuery() {"."\r\n".
              "  if (typeof jQuery === 'undefined') { setTimeout(waitForjQuery, 50); return }"."\r\n".
              "  var submit = jQuery('.f_submit');"."\r\n".
              "  var html = '<div class=\"'+submit[0].className+'\">'+submit.html()+'</div>';"."\r\n".
              "  submit.before(html).find('button').hide().prop('disabled', true);"."\r\n".
              "  var cloneSubmit = jQuery('.f_submit:first');"."\r\n".
              "  cloneSubmit.on('click', function(event) {"."\r\n".
              "    event.preventDefault();"."\r\n".
              "    jQuery.ajax({"."\r\n".
              "      type: 'GET',"."\r\n".
              "      url: '/wp-content/themes/VOTRE_THEME/checkCaptcha?response='+grecaptcha.getResponse(),"."\r\n".
              "      success: function(data) {"."\r\n".
              "        if (data['success'] === true) {"."\r\n".
              "          jQuery('.f_submit:first').remove()"."\r\n".
              "          jQuery('.f_submit').find('button').prop('disabled',false).show().last().trigger('click');"."\r\n".
              "        }"."\r\n".
              "        else if (data['error-codes']) {"."\r\n".
              "          switch (data['error-codes'][0]) {"."\r\n".
              "            case 'missing-input-secret': "."\r\n".
              "            case 'invalid-input-secret': alert('Erreur : impossible de vérifier le système anti-spam.'); break;"."\r\n".
              "            case 'missing-input-response': "."\r\n".
              "            case 'invalid-input-response': "."\r\n".
              "            default: alert('Erreur : vous devez répondre à l\'anti-spam.');"."\r\n".
              "          }"."\r\n".
              "        }"."\r\n".
              "      },"."\r\n".
              "      dataType: 'json'"."\r\n".
              "    });"."\r\n".
              "  })"."\r\n".
              "}"."\r\n".
              "waitForjQuery();"."\r\n".
              "</script>";
  return $content;
}
add_action('guiform_render_form', 'addCaptchaToGuiForm');

Grâce à cette astuce on modifie notre <h1>captcha</h1> par le code de Google. On ajoute un soupçon de JavaScript qui va permettre de cacher le vrai bouton « Submit ». Lorsqu’on va cliquer sur le faux bouton, le catpcha va être vérifié. Une fois fait le formulaire classique peut-être utilisé.

Attention : dans le code ci-dessus il faut remplacer VOTRE_CLE_PUBLIQUE et VOTRE_THEME par les valeurs correspondantes.

Enfin on a besoin de créer un fichier PHP à la racine de notre thème, qui va s’appeler checkCaptcha.php et qui aura comme contenu :

<?php
$url = "https://www.google.com/recaptcha/api/siteverify?secret=VOTRE_CLE_PRIVEE&response=".$_GET["response"];
$curl = curl_init($url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
$output = curl_exec($curl);
curl_close($curl);
echo $output;
?>

Attention : dans le code ci-dessus il faut remplacer VOTRE_CLE_PRIVEE par la valeur correspondante.