Waar komt het op neer::

• Google Recaptcha keys opvragen
• Een Child Theme hebben en daarin een nieuw php-file aanmaken met code waarin o.m. de secret-key
• Javascript in de HEAD van WordPress pagina krijgen
• Een HTML-formulier schrijven met o.m. de site-key

WordPress heeft uitstekende plugins om formulieren mee te ‘bouwen’, ook met Google Recaptcha opties of aanvullende plugins. Soms ontkom je er niet aan om een formulier zelf in html op te zetten. Dan werken de Recaptcha plugins niet.  Dat betekent dus: handen uit de mouwen. Als ik het weer een keer moet doen wil ik een compleet overzicht hebben, vandaar dat ik het nu opschrijf.

In de php-code zie je dat je ook een honeypot kunt opgeven: een veld dat mensen niet invullen. Je moet het daartoe wel onzichtbaar maken op het formulier met bijvoorbeeld display:none.

HTML5 Formvalidatie werkt ook niet meer zomaar met reCaptcha. Daarvoor verwerk ik ook iets in het script.

Aan het eind wordt de inhoud van het formulier naar een andere server gepost. Daarvoor moet je een apart php-bestand aanmaken in een Child Theme. Je kunt dat natuurlijk vervangen door één of meerdere andere verwerkingen zoals het versturen van een e-mail of wat dan ook.

Wat er moet gebeuren:

Google recaptcha keys opvragen

Ga naar https://www.google.com/recaptcha/intro/v3.html en maak de sleutels aan voor je domein-URL

HEAD

In de head moet dit scriptje staan:

<!– Scripts/CSS and wp_head hook –>
<script src=”https://www.google.com/recaptcha/api.js” async defer>
</script>
<script> function captchaSubmit(data)
{ document.getElementById(“contact”).submit(); }
</script>

BODY

Het formulier zelf moet naar een nieuw php-bestand posten, waarin de recaptcha wordt geëvalueerd. De naam van dat php-bestand staat dus in de “action” van het form. Let op dat de id van het form ook in het scriptje hierboven staat.

<form id=”contact” action=”[pad-naar-de-juiste-child-theme-folder]/grform.php” method=”post”>

Daaronder komen je formuliervelden. De afsluitende submit button van het formulier moet in elk geval de class ‘g-recaptcha’ hebben: 

<button class=”g-recaptcha” data-sitekey=”de_Google_site_key_voor_jouw_site” data-callback=”captchaSubmit” data-badge=”inline”>Submit</button>

De data-callback roept het scriptje “captchaSubmit” aan dat in de head staat.

PHP

Dan alleen nog het php-bestand waar je het formulier naar toe post (ik heb het grform.php genoemd) en waarin het echte werk plaatsvindt:

<?php
// reCaptcha info
$secret = “de_SECRET_key_die_je_van_google_hebt_gekregen”;
$remoteip = $_SERVER[“REMOTE_ADDR”];
$url = “https://www.google.com/recaptcha/api/siteverify”;

// Form info

$honeypot = $_POST[“PVHP”];
//Geef de honeypot wel een verstandige veldnaam. Hij heet in het formulier dus PVHP.
//Een veldnaam als “Voornaam” kan door browsers automatisch worden ingevuld. Dat veld moet juist leeg blijven! Niet doen dus. 

$response = $_POST[“g-recaptcha-response”];
// Curl Request
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, array( ‘secret’ => $secret, ‘response’ => $response, ‘remoteip’ => $remoteip ));
$curlData = curl_exec($curl); curl_close($curl);
// Parse data
$recaptcha = json_decode($curlData, true);

// Als recaptcha OK geeft en de honeypot leeg is, wordt de data naar de 
// URL gepost die je normaal in de action van je formulier zou hebben gezet.

>if (($recaptcha[“success”]) && (strlen($honeypot) === 0))
{

//Setup cURL
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, “URL_waar_de_data_heen_moet”);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 100);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($_POST));
$data = curl_exec($ch);
curl_close($ch);

// laat deze php-pagina niet zien maar ga naar de bedanktpagina

header(“Location: URL_van_je_bedankt_pagina”);

}

// Weggecomment maar kan wel:

// else
// header(“Location: URL_voor_bots”);

?>

 Et voilà. 

Form validation werkt niet meer met Google Recaptcha

Omdat de functie van de verzend-knop is aangepast, werkt formuliervalidatie niet meer. De meest voorkomende check is of de verplichte velden wel zijn ingevuld. Dat heb ik hieronder ertussen gezet. De check moet gebeuren vóórdat de gebruiker wordt weggestuurd naar een andere pagina, want dan moet hij opnieuw het formulier gaan invullen. Het kan dus niet in die php, het moet echt in js.

De verzendknop in het formulier start de functie captchaSubmit. Daarin staat het daadwerkelijke “.submit” statement waarmee het form naar Google wordt gestuurd en de spamcheck begint. Vlak daarvóór kunnen we zelf onze validatiecheck doen en uit de functie springen als die niet slaagt. Dat laatste doet de regel met return false; De functie komt dan niet bij het .submit statement en het formulier blijft gewoon staan. Er verschijnt een pop-up met een verzoek om alle verplichte velden in te vullen. 

(Trouwens de honeypot-check moet hier natuurlijk niet in! Die komt pas in de php. De pagina gedraagt zich daardoor alsof het spammen is gelukt. Dat voorkomt eindeloze pogingen van bots om iets verstuurd te krijgen.)

Het hele Javascriptje voor in de HEAD ziet er dan zo uit, uitgaande van form name “contact”:

<script src=”https://www.google.com/recaptcha/api.js” async defer></script>
<script> function captchaSubmit(data) 
{
    var form = document.getElementById(‘contact’);   
    for(var i=0; i < form.elements.length; i++)
        { if(form.elements[i].value === ” && form.elements[i].hasAttribute(‘required’))
            { alert(‘Wilt u s.v.p. alle verplichte* velden invullen?’);       
            return false;
            }
        }
    document.getElementById(“contact”).submit();
}
</script>

Sjonge wat een uitzoekerij was dat. Als je het weet is het simpel. Pas toen ik vijf artikelen had gelezen, kreeg ik het aan de gang. Overal ontbrak wel iets essentieels. Toen moest ik het posten naar een andere server en het netjes redirecten nog zelf gaan uitvinden en ik ben toch al niet zo’n PHP koning… en toen deed de formvalidatie het niet meer…

Maar: we leren elke dag weer wat bij! Heerlijk, af en toe zo’n technische uitdaging, gewoon zorgen dat dingen het doen. Aanvullingen of suggesties zijn hieronder van harte welkom. 

Ik denk bijvoorbeeld dat het hardgecodeerde [pad-naar-de-juiste-child-theme-folder] ook anders kan. Ik hoor het graag.