WordPress & Elementor kennisbank

Contactformulier beveiligen tegen spam met Elementor

Inhoud van dit artikel:

Een contactformulier beveiligen tegen spam op je WordPress website? Niets is zo irritant als het binnenkrijgen van spamreacties op je website. Nu zijn er allerlei plugins die je hiervoor kunt installeren, maar sinds kort kun je ook reCAPTCHA v3toevoegen aan je Elementor formulieren. Daarmee beveilig je het contactformulier tegen spamreacties. Je hebt hiervoor wel de Pro versie van Elementor nodig.

Koppeling maken met reCAPTCHA v3

Voordat je reCAPTCHA v3 kunt toevoegen aan je contactformulieren, moet je eerst een koppeling maken doormiddel van een Api key. Dit doe je als volgt:

Ga naar Elementor -> Instellingen -> Integraties

Je ziet hier de mogelijkheid om een sleutel toe te voegen. Deze moet je eerst ophalen via Google (klik hiervoor op de hyperlink ‘reCAPTCHA V3).

Recaptcha koppelen formulier elementor

Google key ophalen

Als je klikt op de hyperlink kom je op de juiste pagina in Google waar je een nieuwe sleutel kunt aanmaken voor reCAPTCHA V3.

Kopieer vervolgens beide sleutels naar het integratie tabblad in Elementor.

Api key aanmaken recaptcha elementor

sleutel recaptcha elementor formulier

Contactformulier beveiligen tegen spam

Vervolgens ga je naar het contactformulier dat je wilt beveiligen tegen spam. Voeg een item toe. Selecteer bij type: reCAPTCHA V3.

Contactformulier beveiligen tegen spam elementor recatcha v3

Zichtbaarheid reCaptcha

reCAPTCHA v3 is dus niet zichtbaar in het contactformulier en je bezoeker hoeft niets te doen om te verifiëren dat ze geen spambot zijn. Maar.. als je reCAPTCHA v3 hebt ingesteld, zie je wel een label op de webpagina verschijnen waarop staat dat je website beveiligd is.

Recaptcha label op website

Heb je reCAPTCHA v3 nodig?

We gebruiken de formulieren van Elementor op bijna alle websites van onze klanten. Sommige klanten krijgen nooit spamreacties binnen en anderen wel. Mijn advies: mocht je er (nog) geen last van hebben, dan zou ik de reCAPTCHA gewoon nog even weglaten. Je kunt het altijd nog toevoegen.

Ook interessant voor jou

Inzendingen Elementor formulier opslaan in WordPress

Multi-step formulier maken in WordPress met Elementor

Elementor update 2.10: multi-step formulieren en integratie met Lottie!

7 Responses

  1. hoi Sanne, ik heb de integratie volgens het stappenplan uitgevoerd. Op mijn desktop versie gaat het goed, maar op de mobiele tel + tablet versie zie je de reCAPTCHA button niet verschijnen. Is dat normaal?

    1. Hoi Jennifer,

      Welke button bedoel je precies? Als je recaptch v3 hebt geïnstalleerd zie je als het goed is een label in het venster verschijnen (ipv een button). Is dat wat je bedoelt?

  2. Hoi Sanne, Ik heb recaptcha V3 geinstalleerd, en het label verschijnt nu op elke pagina van mijn website. Dit wil ik niet. Hoe kan ik dit aanpassen zodat het label alleen maar op de contactpagina te zien is?
    Mocht je op mijn website kijken dan zie je dat er geen recaptcha meer is. Ik heb hem namelijk verwijderd omdat ik het heel irritant vind dat Google dit label op elke pagina laat zien.

    1. Hoi Bobby,

      Je kunt het label uitschakelen met custom css. Gebruik hiervoor onderstaande code:

      .grecaptcha-badge { display: none !important; }

      Groetjes,

      Sanne

  3. Dankjewel voor je reactie.
    Bedoel je dat ik in de customizer (ik gebruik het Astra thema) bij extra CSS onderaan bij de eerste regel waar een 1 voor staat de regel grecaptcha-badge { display: none !important;} kan vermelden?
    En mijn tweede vraag, als ik dat doe komt er dan op geen enkele pagina een label? Hoe krijg ik dan wel op de contactpagina een label?

    Ik ben nl. niet zo thuis in de HTML codes

  4. Dankjewel voor je reactie.
    Bedoel je dat ik in de customizer (ik gebruik het Astra thema) bij extra CSS onderaan bij de eerste regel waar een 1 voor staat de regel .grecaptcha-badge { display: none !important;} kan vermelden?
    En mijn tweede vraag, als ik dat doe komt er dan op geen enkele pagina een label? Hoe krijg ik dan wel op de contactpagina een label?

    Ik ben nl. niet zo thuis in de HTML codes

    1. Hoi Bobby,

      Ja inderdaad je kunt de code in de ‘Extra css’ plakken via de customizer. Of als je werkt met de Theme Style van Elementor, zie je daar onderin ook een functie waarmee je custom css kunt toevoegen.

      Je schakelt het dan inderdaad uit voor de hele website en niet voor een aparte pagina…

Mis geen updates

Blijf op de hoogte van de laatste
Elementor Trends & Ontwikkelingen!

No worries, je ontvangt max. 2 keer per maand een mailing.