Introduction
In this post, we are going to learn how to change the position or hide the reCaptcha icon.
reCaptcha v3 is a tool developed by Google that helps protect websites against abusive traffic without interrupting users. It analyzes the user’s behavior on the page and assigns a score based on their level of trust. Site administrators can then use this score to determine how to handle suspicious interactions, such as allowing, blocking, or presenting additional challenges.
Change position
By default, the banner appears in the bottom right corner of the page, where contact buttons, social media links, or the “Back to top” button are usually placed.
This causes them to overlap and one or the other is not easily accessible to the user. So a quick option would be to change its position; in this case, we’re going to move it to the bottom left corner. For this, we will use CSS code that we can include in WordPress > Appearance > Customice > Additional CSS. Other ways to include CSS code can be through a specific plugin; if we use Elementor in the Advanced settings > Custom CSS.
/*Mover Recaptcha a la izquierda*/
.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: -2px !important;
bottom: 20px !important;
}
.grecaptcha-badge:hover {
width: 256px !important;
}
What if changing its position isn’t enough?
It may happen that in the lower left corner, we also have some element, and it might be better to hide it, either for adaptability or aesthetics. For that, we also have a solution.
For this case, the official solution is provided by Google here.
Let me summarize:
It would be necessary to include the following text visibly in the user flow:
Este sitio está protegido por reCaptcha y la
<a href="https://policies.google.com/privacy">Política de Privacidad</a> y los
<a href="https://policies.google.com/terms">Términos de Servicio</a> de Google.
And to hide the icon, we will use CSS:
.grecaptcha-badge { visibility: hidden; }
