1

Menu

Google reCaptcha v3 badge naar links verplaatsen

Heb je een WordPress website met een contactformulier dat gebruik maakt van de Google reCaptcha v3 badge? Dan komt deze standaard rechts onderin beeld tevoorschijn. Als je er met je muis overheen gaat schuift hij uit naar links zodat je de hele badge kunt bekijken. Maar wat als je een chat(bot) of andere zwevende elementen rechts onderin beeld hebt?

CSS toevoegen

Gelukkig kan je de v3 reCaptcha badge heel makkelijk naar de linkerkant van je website verplaatsen. Zo valt hij niet voor/achter andere elementen of pop-ups. Je hebt hier alleen maar een stukje CSS-code voor nodig, dat kan je verderop in dit artikel vinden. Je kan het op drie manieren toevoegen:

  • Via de customizer. Ga naar Weergave -> Customizer. Klik vervolgens op het kopje Extra CSS. Plak hier de code en klik op Publiceren.
  • Via de thema bestand editor*. Ga hiervoor naar Weergave -> Thema bestand editor. Zorg dat je met de dropdown het juiste thema hebt geselecteerd en open het bestand style.css. Plak hier de code en klik vervolgens op Update bestand.
  • Via een plugin. Je hebt verschillende plugins om custom CSS toe te voegen aan je website, bijvoorbeeld wanneer je geen child thema gebruikt. Zoek hiervoor in de plugin bibliotheek van WordPress. We raden het echter niet aan omdat je weer een extra plugin moet installeren. Gebruik in dat geval liever de Customizer.

* Gebruik de thema bestand editor alleen als je hier ervaring mee hebt. Bij een fout stukje code zal je website een foutmelding geven waardoor deze helemaal offline is. Je zal deze moeten herstellen via FTP, waar je natuurlijk niet op zit te wachten.

De code

Gebruik onderstaande CSS-code om de Google reCaptche V3 badge naar links te verplaatsen.

.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: 4px !important;
}
.grecaptcha-badge:hover {
width: 256px !important;
}

Het resultaat

Op onze website staat de recaptcha badge links in beeld, zodat hij niet achter de chat terecht komt.

Et voilà! Als het goed is staat de badge nu links onderin beeld. Leeg voor de zekerheid even de cache van je website en bekijk hem in een anoniem tabblad. Dan weet je zeker dat het werkt! Je kan een voorbeeld bekijken op onze contactpagina.

Populaire berichten

Heb je een vraag?
Heb je een vraag of heb je hulp nodig? Onze collega Joris Spitholt staat voor je klaar!
Naam(Vereist)
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Misschien vind je dit ook interessant...

Google Ads campagnes uitbesteden? Dat kan bij ons!
Stormachtig is gespecialiseerd in zoekmachine-adverteren via Google Ads (vroeger AdWords) en Microsoft Bing. Google Ads-beheer ...
De 26 beste (gratis) SEO-tools van 2024
Ga je actief aan de slag met zoekmachineoptimalisatie, dan heb je natuurlijk goed gereedschap nodig. ...
Hoger in Google komen met je website? De 18 allerbeste tips voor 2024!
Je vindt dat je die eerste plek op een bepaalde zoekterm verdient, maar op dit ...

Stel een vraag

Stel je vraag via onderstaande formulier. We proberen je bericht zo snel mogelijk te beantwoorden!

Naam(Vereist)
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.