Tutorial WordPress: Cómo ocultar el recaptcha badge de CF7 cumpliendo las políticas

Cómo ocultar el reCAPTCHA badge de Contact Form 7 cumpliendo las políticas

Contact Form 7 integra reCAPTCHA (normalmente reCAPTCHA v3 o Invisible reCAPTCHA) mostrando por defecto el “badge” de Google en la página. Ocultar ese badge es una modificación habitual para mejorar la estética, pero hay que tener en cuenta las políticas de Google: el badge debe ser visible o, si se oculta visualmente, debe cumplirse la condición que Google exige (por ejemplo, mostrar un aviso claro en el sitio que informe que el sitio está protegido por reCAPTCHA y enlazar a la Política de Privacidad y a los Términos de Servicio de Google). Si no se cumplen esas obligaciones, las claves pueden ser revocadas o el uso puede considerarse incumplimiento de las condiciones.

Resumen de opciones compatibles

Opción A — Mantener el badge visible pero menos intrusivo: reposicionar, reducir el tamaño o cambiar la opacidad (siempre visible) para que no interfiera con el diseño.
Opción B — Ocultar el badge y cumplir políticas: ocultar visualmente el badge y, a la vez, mostrar un aviso visible que informe sobre reCAPTCHA y enlace a la Política de Privacidad y los Términos de Google.

Por qué es importante cumplir las políticas

Google requiere transparencia sobre la protección con reCAPTCHA. Ocultar el badge sin la declaración obligatoria suele considerarse incumplimiento y puede provocar acciones sobre tu cuenta o las claves. Antes de ocultar o manipular el badge revisa la documentación y las condiciones de reCAPTCHA vigentes para tu versión (v2 invisible, v3, enterprise, etc.).

Implementación práctica en WordPress y Contact Form 7

Paso 1 — Identificar la versión de reCAPTCHA

En el panel de WordPress, ve a Contact > Integration para ver si Contact Form 7 está usando reCAPTCHA v3 o alguna otra variante.
Comprueba en el HTML generado el elemento con clase grecaptcha-badge (éste es el identificador habitual del badge).

Paso 2 — Opción A: hacer el badge menos intrusivo (recomendado)

Este enfoque mantiene el badge visible (cumple la política) y reduce su impacto visual. Añade el CSS al personalizador o a tu hoja de estilos del tema hijo.

.grecaptcha-badge {
  right: 12px !important       / posición desde la derecha /
  bottom: 12px !important      / posición desde abajo /
  transform: scale(0.85) !important / reducir tamaño ligeramente /
  transform-origin: bottom right !important
  opacity: 0.95 !important     / hacerlo menos llamativo pero visible /
  z-index: 9999 !important
  transition: opacity 0.2s ease
}
.grecaptcha-badge:hover {
  opacity: 1 !important
}

Paso 3 — Opción B: ocultar el badge respetando la política (AVISO OBLIGATORIO)

Si decides ocultarlo visualmente, debes añadir un aviso visible en la/s página/s donde existan formularios protegidos. El aviso tiene que identificar que la página está protegida por reCAPTCHA y enlazar a la Política de Privacidad de Google y a los Términos de Servicio de Google. Sólo después de añadir ese aviso podrás aplicar CSS para ocultar el badge.

Ejemplo de aviso (añádelo en el footer o cerca del formulario):

Este sitio está protegido por reCAPTCHA y se aplican la Política de Privacidad y los Términos de Servicio de Google.

Ejemplo de CSS para ocultar el badge (sólo si ya has añadido el aviso visible):

/ Oculta el badge visualmente. Sólo usar si has implementado el aviso requerido. /
.grecaptcha-badge {
  position: absolute !important
  left: -9999px !important    / lo saca de la vista /
  visibility: hidden !important
}

Paso 4 — Cómo añadir el aviso o el CSS en WordPress

Para CSS rápido: Apariencia → Personalizar → CSS adicional y pega el bloque CSS (opción A o B según tu decisión).
Para una solución más controlada: crea un pequeño snippet en el tema hijo para encolar el CSS o imprimir el aviso en el footer.

Ejemplo de cómo encolar un CSS inline desde functions.php de tu tema hijo:

function mi_tema_child_enqueue_recaptcha_style() {
  css = 
  .grecaptcha-badge {
    right: 12px !important
    bottom: 12px !important
    transform: scale(0.85) !important
    transform-origin: bottom right !important
    opacity: 0.95 !important
    z-index: 9999 !important
  }
  wp_add_inline_style(wp-block-library, css)
}
add_action(wp_enqueue_scripts, mi_tema_child_enqueue_recaptcha_style, 20)

Ejemplo de cómo insertar el aviso en el footer mediante un hook (functions.php):

function insertar_aviso_recaptcha_footer() {
  echo Este sitio está protegido por reCAPTCHA y se aplican la Política de Privacidad y los Términos de Servicio de Google.
}
add_action(wp_footer, insertar_aviso_recaptcha_footer, 10)

Verificación después de los cambios

Comprueba que los formularios protegidos siguen validando correctamente: envía un formulario y asegúrate de que reCAPTCHA responde y la entrega se procesa.
Usa las herramientas de desarrollador del navegador para comprobar que el script de Google reCAPTCHA sigue cargando (revisa las peticiones a google.com/recaptcha/ o a www.google.com/recaptcha/).
Confirma que el aviso es visible y localizable por los usuarios donde sea necesario.
Revisa la Consola de Google (reCAPTCHA Admin) por si hay advertencias o bloqueos en el uso de la clave.

Recomendaciones finales

La opción más segura y soportada es mantener el badge visible y solo atenuarlo visualmente (Opción A). Evita esconderlo salvo que tengas claro el cumplimiento legal y las exigencias de Google.
Si ocultas el badge, documenta en tu sitio el aviso requerido y conserva evidencias de cumplimiento en caso de requerimientos externos.
Mantén las claves y la integración actualizadas y revisa periódicamente la documentación oficial de reCAPTCHA, ya que las políticas o requisitos pueden cambiar con el tiempo.

SushiHost