Hur man lägger till Cloudflare Turnstile CAPTCHA i WordPress

Att köra ett kontaktformulär på vår WordPress-sida lärde oss en värdefull läxa: vi behöver bra spam-skydd som inte irriterar riktiga användare. Vi provade många CAPTCHA-alternativ, men de frustrerade ofta våra besökare.

Vanliga CAPTCHA:er stoppar spam, men folk gillar dem inte. Vi fick klagomål om svåra pussel, särskilt på telefoner. Vissa oroade sig också för sin integritet.

Sedan hittade vi Cloudflare Turnstile, och det förändrade allt. Det blockerar skräppost utan att störa besökare. På så sätt kan du få mindre skräppost samtidigt som du får folk att fylla i dina formulär.

I den här guiden visar vi hur du lägger till Turnstile på din WordPress-webbplats.

Varför lägga till Cloudflare Turnstile CAPTCHA i WordPress?

Spam och botar kan orsaka problem för webbplatser, som att skicka spamlänkar, bryta sig in i inloggningsformulär eller översvämma med spammejl på ett formulär för leadgenerering.

Allt detta kan skapa utrymme för brute-force-attacker, vilket förstör din besökarupplevelse. Om du driver en webbutik kan automatiserade skript till och med lägga falska beställningar.

Många webbplatsägare använder CAPTCHA och reCAPTCHA för att blockera skript och botar. Många klagar dock på att dessa tekniker ger en dålig användarupplevelse, och vissa oroar sig till och med för att CAPTCHA stjäl deras data.

Med dessa bekymmer i åtanke har Cloudflare introducerat Turnstile CAPTCHA. Denna teknik använder enkla, icke-påträngande utmaningar som körs osynligt i webbläsaren och skyddar din webbplats utan att be besökare att lösa komplexa pussel.

Dessutom använder den Apples Private Access Tokens för att verifiera användare utan att samla in extra data.

Om du använder formulärbyggare eller WooCommerce, så integreras Turnstile även med dessa tredjepartsplugins. Detta gör att du kan lägga till osynliga CAPTCHA i många olika delar av din WordPress-webbplats.

Med det sagt, låt oss se hur du kan lägga till Cloudflare Turnstile CAPTCHA i WordPress. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du föredrar:

Metod 1: Använd WPForms för att lägga till Cloudflare CAPTCHA (för WordPress-formulär)

Det enklaste sättet att lägga till Cloudflares CAPTCHA i dina formulär är att använda gratis WPForms-pluginet.

WPForms är den bästa drag-and-drop WordPress-formulärbyggarplugin som används av över 6 miljoner webbplatser. Du kan använda den för att skapa alla typer av formulär, inklusive kontaktformulär, bokningsformulär och mycket mer.

Gratispluginet WPForms har ett färdigt Cloudflare Turnstile-fält som du kan dra och släppa på vilket formulär som helst.

Hur man lägger till Turnstile CAPTCHA i WPForms

Först måste du installera och aktivera WPForms-pluginet. Om du behöver hjälp, se vår guide om hur du installerar ett WordPress-plugin.

Gå efter aktivering till WPForms » Inställningar och klicka sedan på fliken CAPTCHA .

På den här sidan väljer du ‘Turnstile’.

Du kommer nu att se några nya inställningar där du kan ange webbplatsnyckeln och webbplatshemligheten.

För att få denna information, öppna en ny webbläsarflik och gå till Cloudflare inloggningssida. Du behöver skapa ett Cloudflare-konto med din e-postadress om du inte redan har gjort det.

När du är inloggad på Cloudflare-instrumentpanelen, hitta ‘Turnstile’ i menyn till vänster och klicka på den.

Detta tar dig till en skärm med grundläggande information om Cloudflare Turnstile.

Om du är nöjd med att fortsätta, klicka på knappen 'Lägg till webbplats'.

På den här skärmen, börja med att skriva in ett 'Webbplatsnamn'.

Detta är bara för din referens, så du kan använda vad du vill.

Skriv sedan in din webbplats domännamn i fältet 'Domän'.

Nästa steg är att välja vilken CAPTCHA-widget du vill skapa. Det första valet är 'Managed', vilket är den metod som rekommenderas av Cloudflare. Det är här Cloudflare analyserar webbläsarens begäran och sedan bestämmer vilken typ av utmaning den ska köra.

Medan detta pågår kommer besökaren att se en laddningsanimation.

Där det är möjligt kommer Cloudflare att försöka köra en icke-interaktiv utmaning i bakgrunden så att besökaren inte behöver göra något. I det här fallet kommer användaren helt enkelt att se ett 'Lyckat'-meddelande när deras webbläsare klarar testet.

Ibland kan Cloudflare besluta att det är säkrare att visa en interaktiv utmaning istället. Besökaren behöver dock bara markera en ruta istället för att lösa ett pussel, så det är fortfarande enklare än traditionella pusselbaserade CAPTCHA:er.

Om du inte har en specifik anledning att inte göra det, är det smart att använda hanterade CAPTCHAs, eftersom detta ger dig en bra säkerhetsnivå med minimal påverkan på besökarupplevelsen.

Vill du inte använda interaktiva utmaningar på din WordPress-webbplats? Då kan du välja 'Icke-interaktiv' eller 'Osynlig' istället.

Icke-interaktiva utmaningar körs i webbläsaren, så besökaren behöver inte vidta några åtgärder. Precis som med den hanterade CAPTCHA:n kommer besökare att se laddningsanimationen och ett ‘Lyckat’-meddelande när utmaningen är klar.

Om du istället väljer 'Osynlig' kommer besökaren inte att se animationen eller lyckomeddelandet. Denna inställning gör att du helt kan dölja CAPTCHA från dina besökare, vilket kan undvika förvirring och inte lägga till något extra i din WordPress-tema.

Efter att ha fattat ditt beslut klickar du på knappen ‘Skapa’. Så fort du har gjort det kommer Cloudflare att visa din webbplatsnyckel och hemliga nyckel.

Hur man konfigurerar Cloudflare Turnstile CAPTCHA för WordPress

Byt nu tillbaka till din WordPress-blogg eller webbplats och lägg till 'Webbplatsnyckel' och 'Webbplatshemlighet'.

Som standard kommer WPForms att visa följande meddelande varje gång en besökare misslyckas med CAPTCHA: 'Cloudflare Turnstile-verifiering misslyckades, försök igen senare.'

Du kan ersätta detta med ditt eget anpassade meddelande genom att skriva i fältet 'Felmeddelande'.

Därefter kanske du vill anpassa hur CAPTCHA ser ut på din webbplats genom att öppna dropdown-menyn ‘Typ’ och välja mellan ljus, mörk eller auto.

Följande bild visar ett exempel på hur temat 'Mörk' ser ut på ett anpassat användarregistreringsformulär.

Efter att ha fattat detta beslut, scrolla till botten av skärmen och klicka på ‘Spara inställningar.’

När det är gjort är du redo att lägga till Turnstile CAPTCHA-skydd till vilket formulär som helst.

Hur man lägger till Cloudflare Turnstile CAPTCHA i ett WordPress-formulär

Att lägga till Cloudflare Turnstile till WordPress med WPForms är enkelt och smidigt.

För att skapa ett nytt formulär med WPForms, gå helt enkelt till WPForms » Lägg till nytt.

För att börja, ge formuläret ett namn genom att skriva i ‘Namnge ditt formulärfält.’ Detta är bara för din referens, så du kan använda vad du vill.

WPForms levereras med färdiga mallar, så att du snabbt kan komma igång och bygga alla typer av formulär. När du hittar en design du vill använda, klicka på den orange knappen 'Använd mall'.

Efter att ha valt en mall ser du WPForms-redigeraren.

För att anpassa ett fält, klicka bara för att markera det i formulärredigeraren. Sidopanelen uppdateras sedan för att visa alla inställningar för det valda fältet.

Du kan också ändra ordningen i vilken dessa fält visas genom att använda dra-och-släpp. 

För att lägga till Cloudflare Turnstile i formuläret, klicka helt enkelt på fliken 'Lägg till fält' i den vänstra menyn.

Här hittar du det inbyggda fältet 'Turnstile' och klickar för att lägga till det i ditt formulär.

WPForms kommer nu att visa en ikon för 'Turnstile aktiverad' i det övre högra hörnet.

Detta meddelar dig att formuläret är skyddat med Cloudflare Turnstile.

Ett annat alternativ är att aktivera Cloudflare i formulärets inställningar. Välj helt enkelt Inställningar i menyn till vänster och klicka sedan på 'Spamskydd och säkerhet'.

Du klickar nu på omkopplaren ‘Aktivera Cloudflare Turnstile’ för att ändra den från inaktiverad (grå) till aktiverad (blå).

När du är nöjd med hur formuläret är inställt, klicka på knappen ‘Spara’.

Du kan nu gå till sidan eller inlägget där du vill visa formuläret och klicka på ‘+’-ikonen. I popup-fönstret som visas, börja skriva in ‘WPForms.’

När rätt block visas, klicka på det för att lägga till det på sidan eller inlägget.

I ditt nya WPForms-block klickar du på rullgardinsmenyn och väljer formuläret du just skapade.

Du kan nu uppdatera eller publicera din sida. Nu, om du besöker den här sidan eller inlägget, kommer du att se formuläret live.

För mer information kan du läsa vår steg-för-steg-guide om hur du skapar ett säkert kontaktformulär i WordPress.

Metod 2: Lägg till Turnstile CAPTCHA i kommentarer, WooCommerce och mer (gratis plugin)

Om du vill skydda dina formulär med Cloudflare Turnstile, låter WPForms dig lägga till CAPTCHA-skydd med bara några få klick.

Du kanske dock vill lägga till Turnstile i andra delar av din webbplats. Du kan till exempel använda det för att bekämpa kommentarspam i WordPress.

Du kanske också vill använda Turnstile i din WooCommerce-butik.

Till exempel kan du skydda alla dina e-handelssidor, inklusive WooCommerce-inloggning, registrering och kassasidor. Detta kan hjälpa till att förhindra bedrägerier och falska beställningar i WooCommerce.

Det enklaste sättet att lägga till Cloudflares CAPTCHA i andra delar av WordPress är att använda Simple Cloudflare Turnstile. Detta gratisplugin integreras med många populära WordPress-plugins och formulärbyggare, inklusive Formidable Forms, WPForms och andra.

Först måste du installera och aktivera pluginet. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Vid aktivering, gå till Inställningar » Cloudflare Turnstile.

Pluginet kommer nu att be om en webbplatsnyckel och en webbplatshemlighet. För att få denna information, följ helt enkelt samma process som beskrivs ovan när du ställer in ett Turnstile-konto.

När det är gjort, lägg till 'Site Key' och 'Site Secret' i din WordPress-instrumentpanel.

Därefter kanske du vill anpassa hur CAPTCHA ser ut på din webbplats och hur den beter sig i Allmänna inställningar. För att börja kan du öppna rullgardinsmenyn 'Tema' och välja mellan ljus, mörk eller automatisk.

Om dina webbplatsbesökare kommer från olika länder kan du välja 'Auto Detect' i fältet 'Language'. På så sätt kommer Cloudflare Turnstile att använda det språk som besökaren använder.

I läget 'Utseende' kan du välja om Turnstile-widgeten ska visas för alla användare eller endast baserat på vissa interaktioner. Det säkraste alternativet är att välja 'Alltid'.

Det är också möjligt att inaktivera Turnstile-knappen för att skicka. Om du väljer detta alternativ kommer det inte att finnas någon knapp för användaren att klicka på när de har slutfört Turnstile-utmaningen.

Skrolla ner, du hittar Avancerade inställningar.

En sak du kan göra här är att skjuta upp skript. Denna inställning kan göra att webbsidan laddas snabbare eftersom den talar om för webbläsaren att vänta tills hela sidan är laddad innan den kör JavaScript-kod.

Om denna inställning orsakar problem med andra saker på din webbplats, kanske du vill stänga av den.

Du kan också anpassa Turnstile-meddelandet. Som standard visar Cloudflare ett meddelande som lyder 'Vänligen verifiera att du är mänsklig' till besökare. För att lägga till din egen formulering, skriv helt enkelt i fältet 'Anpassat felmeddelande'.

Slutligen kan du välja att aktivera Meddelande vid misslyckande. Den här inställningen låter dig lägga till ett ytterligare meddelande som visas under Turnstile-widgeten om användaren misslyckas med utmaningen.

Nedanför Avancerade inställningar finns Inställningar för vitlistning.

Här kan du välja att inloggade användare inte behöver slutföra Cloudflare Turnstile. Du kan också lista IP-adresser som inte behöver genomgå utmaningen.

Därefter kan du välja de områden där du vill använda Cloudflare Turnstile CAPTCHA.

Du kan använda Turnstile med alla inbyggda WordPress-formulär, inklusive inloggningssidan, användarregistreringsformuläret och sidan för återställning av lösenord.

Beroende på vilka plugins du har installerat kan du se några extra alternativ.

Till exempel, om du har skapat en onlinebutik med WooCommerce, kommer du att se en sektion för WooCommerce-formulär.

Om du klickar för att expandera det här avsnittet, kommer du att se alla WooCommerce-sidor där du kan lägga till en Cloudflare CAPTCHA.

Mark helt enkelt rutan bredvid varje sida du vill skydda.

När du är nöjd med informationen du har angett, scrolla till botten av skärmen och klicka på 'Spara ändringar'.

Nu, om du besöker din webbplats, kommer du att se Turnstile CAPTCHA i aktion.

Skydda din webbplats ytterligare med våra ultimata guider

Vill du hålla din webbplats ännu säkrare från obehöriga användare och skadliga botar? Läs dessa artiklar nedan för att förbättra din webbplats säkerhet:

• Hur man stoppar och förhindrar en DDoS-attack på WordPress
• Hur och varför du bör begränsa inloggningsförsök i WordPress
• Hur man lösenordsskyddar dina WordPress-formulär
• Hur man lägger till inloggning med ett klick med Google i WordPress
• Hur man lägger till gratis SSL i WordPress med Let’s Encrypt
• Hur man lägger till tvåfaktorsautentisering i WordPress (gratis metod)

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till Cloudflare Turnstile CAPTCHA i WordPress. Du kan också gå igenom vår ultimata guide för WordPress-säkerhet och våra experttips för de bästa WordPress-säkerhetsplugins.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.