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.
