{"id":1463,"date":"2015-03-09T17:57:15","date_gmt":"2015-03-09T16:57:15","guid":{"rendered":"http:\/\/blog.kodono.info\/wordpress\/?p=1463"},"modified":"2015-03-09T18:29:52","modified_gmt":"2015-03-09T17:29:52","slug":"ajouter-nocaptcha-recaptcha-de-google-a-guiform-sous-wordpress-astuce","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2015\/03\/09\/ajouter-nocaptcha-recaptcha-de-google-a-guiform-sous-wordpress-astuce\/","title":{"rendered":"Ajouter “nocaptcha reCaptcha” de Google \u00e0 Guiform sous WordPress [Astuce]"},"content":{"rendered":"

J’utilise GuiForm<\/a> pour faire des formulaires dans un WordPress, et je voulais y ajouter le captcha de Google sans pour autant devoir payer la licence ch\u00e8re de GuiForm juste pour \u00e7a…<\/p>\n

Pour r\u00e9ussir ce que je d\u00e9cris ci-dessous, il vous faudra connaitre votre cl\u00e9 priv\u00e9e et publique de Google Captcha<\/a>.<\/p>\n

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”<\/strong>. On sauvegarde le formulaire.<\/p>\n

Maintenant dans le fichier functions.php<\/code> de votre th\u00e8me il faut rajouter :<\/p>\n

\r\n\/\/ on veut rajouter un captcha dans le formulaire de contact\r\n\/\/ pour \u00e7a on surcharge 'guiform_render_form' qui est appel\u00e9 par le plugin\r\nfunction addCaptchaToGuiForm($content) {\r\n  \/\/ on va remplacer \"<h1>captcha<\/h1>\" par ce qu'il faut\r\n  $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);\r\n  \/\/ on rajoute aussi du JavaScript\r\n  $content .= '<script>'.\"\\r\\n\".\r\n              \"function waitForjQuery() {\".\"\\r\\n\".\r\n              \"  if (typeof jQuery === 'undefined') { setTimeout(waitForjQuery, 50); return }\".\"\\r\\n\".\r\n              \"  var submit = jQuery('.f_submit');\".\"\\r\\n\".\r\n              \"  var html = '<div class=\\\"'+submit[0].className+'\\\">'+submit.html()+'<\/div>';\".\"\\r\\n\".\r\n              \"  submit.before(html).find('button').hide().prop('disabled', true);\".\"\\r\\n\".\r\n              \"  var cloneSubmit = jQuery('.f_submit:first');\".\"\\r\\n\".\r\n              \"  cloneSubmit.on('click', function(event) {\".\"\\r\\n\".\r\n              \"    event.preventDefault();\".\"\\r\\n\".\r\n              \"    jQuery.ajax({\".\"\\r\\n\".\r\n              \"      type: 'GET',\".\"\\r\\n\".\r\n              \"      url: '\/wp-content\/themes\/VOTRE_THEME\/checkCaptcha?response='+grecaptcha.getResponse(),\".\"\\r\\n\".\r\n              \"      success: function(data) {\".\"\\r\\n\".\r\n              \"        if (data['success'] === true) {\".\"\\r\\n\".\r\n              \"          jQuery('.f_submit:first').remove()\".\"\\r\\n\".\r\n              \"          jQuery('.f_submit').find('button').prop('disabled',false).show().last().trigger('click');\".\"\\r\\n\".\r\n              \"        }\".\"\\r\\n\".\r\n              \"        else if (data['error-codes']) {\".\"\\r\\n\".\r\n              \"          switch (data['error-codes'][0]) {\".\"\\r\\n\".\r\n              \"            case 'missing-input-secret': \".\"\\r\\n\".\r\n              \"            case 'invalid-input-secret': alert('Erreur : impossible de v\u00e9rifier le syst\u00e8me anti-spam.'); break;\".\"\\r\\n\".\r\n              \"            case 'missing-input-response': \".\"\\r\\n\".\r\n              \"            case 'invalid-input-response': \".\"\\r\\n\".\r\n              \"            default: alert('Erreur : vous devez r\u00e9pondre \u00e0 l\\'anti-spam.');\".\"\\r\\n\".\r\n              \"          }\".\"\\r\\n\".\r\n              \"        }\".\"\\r\\n\".\r\n              \"      },\".\"\\r\\n\".\r\n              \"      dataType: 'json'\".\"\\r\\n\".\r\n              \"    });\".\"\\r\\n\".\r\n              \"  })\".\"\\r\\n\".\r\n              \"}\".\"\\r\\n\".\r\n              \"waitForjQuery();\".\"\\r\\n\".\r\n              \"<\/script>\";\r\n  return $content;\r\n}\r\nadd_action('guiform_render_form', 'addCaptchaToGuiForm');\r\n<\/pre>\n
Gr\u00e2ce \u00e0 cette astuce on modifie notre <h1>captcha<\/h1><\/code> par le code de Google. On ajoute un soup\u00e7on de JavaScript qui va permettre de cacher le vrai bouton “Submit”. Lorsqu’on va cliquer sur le faux bouton, le catpcha va \u00eatre v\u00e9rifi\u00e9. Une fois fait le formulaire classique peut-\u00eatre utilis\u00e9.<\/p>\n
Attention<\/strong> : dans le code ci-dessus il faut remplacer VOTRE_CLE_PUBLIQUE<\/em> et VOTRE_THEME<\/em> par les valeurs correspondantes.<\/p>\n
Enfin on a besoin de cr\u00e9er un fichier PHP \u00e0 la racine de notre th\u00e8me, qui va s’appeler checkCaptcha.php<\/code> et qui aura comme contenu :<\/p>\n
\r\n<?php\r\n$url = \"https:\/\/www.google.com\/recaptcha\/api\/siteverify?secret=VOTRE_CLE_PRIVEE&response=\".$_GET[\"response\"];\r\n$curl = curl_init($url);\r\ncurl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);\r\n$output = curl_exec($curl);\r\ncurl_close($curl);\r\necho $output;\r\n?>\r\n<\/pre>\n
Attention<\/strong> : dans le code ci-dessus il faut remplacer VOTRE_CLE_PRIVEE<\/em> par la valeur correspondante.<\/p>\n","protected":false},"excerpt":{"rendered":"
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\u00e8re de GuiForm juste pour \u00e7a… Pour r\u00e9ussir ce que je d\u00e9cris ci-dessous, il vous faudra connaitre votre cl\u00e9 priv\u00e9e et publique de Google Captcha. Il faut commencer par faire […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[15,20,33],"tags":[24,155,25,158,82],"class_list":["post-1463","post","type-post","status-publish","format-standard","hentry","category-astuce","category-niveau-expert","category-programmation","tag-javascript","tag-niveau-expert","tag-php","tag-programmation","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=1463"}],"version-history":[{"count":6,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1463\/revisions"}],"predecessor-version":[{"id":1469,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1463\/revisions\/1469"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=1463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=1463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=1463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}