reCAPTCHA i WordPress och Contact Form 7

Denna guide visar hur du som användare av WordPress och Contact Form 7 kan skydda din sida från skräppostutskick via sidans kontaktformulär. Många captcha-lönsingar för kontaktformulär har visat sig otillräckliga varav Googles Recaptcha-lösning nu har nått version 3.

Det finurliga med version 3 är att det inte längre behövs något aktivt av sidans besökare. Recaptcha-lösningen finns där i bakgrunden och läser av besökarens mönster/händelser och gör då bedömningen om detta är en riktigt besökare eller bot.

I de senare versionerna av Contact Form 7 har man tagit bort den egna captcha-lösningen till förmån för de externa lösningar som finns. I menyn för kontaktformuläret väljer du då Integration och sedan ”reCaptcha”

Nästa steg är att lägga in dina Google-nycklar för sidan. Dessa får du via ett Google-konto och du kan klicka direkt på länken i inställningarna för att nå kontot. Hos Google sen lägger du till din webbplats genom att klicka på kugghjulet.

Efter att sidan är klar kan du i fältet ovänför din domän/domäner hämta dina Google-nycklar Under rubriken ”reCAPTCHA keys”

Dessa nycklar klipper du sedan in på din sida under reCaptcha-inställningarna i Contact Form 7

Spara och nu är sidan skyddad av Googles reCAPTCHA v3

Det första du nu kommer märka är att samtliga sidor fått en liten reCAPTCHA-logga. Detta beror på att reCAPTCHA är aktivt på samtliga av webbplatsens undersidor.

Om du ej vill att denna ska vara synlig kan du dölja denna via en liten kodsnutt i temats CSS-fil. I detta exempel kör vi temat Storefront och lägger in den extra css-koden via Utseende–>Anpassa i WP-adminmenyn.

Koden som läggs in under ”Extra CSS” är:

.grecaptcha-badge { 
    visibility: hidden;
}

Om man avser att dölja denna reCAPTCHA behöver man enligt Google villkor upplysa besökaren med följande text/länkar vid kontaktformuläret:

This site is protected by reCAPTCHA and the Google 
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

Denna text kan givetvis översättas och man lägger in den på valfri plats i formuläret.

Was this article helpful?

Related Articles