Cuando desarrollamos un formulario personalizado en WordPress, uno de los problemas que debemos resolver es cómo protegerlo frente a envíos automáticos y bots. Una de las alternativas es integrar Google reCAPTCHA directamente en el formulario, sin depender de un plugin específico de formularios.
En este tutorial veremos un ejemplo práctico utilizando reCAPTCHA v2 con la casilla “No soy un robot”. Crearemos un pequeño formulario y validaremos la respuesta de reCAPTCHA desde WordPress mediante PHP.
¿Cuándo tiene sentido integrar reCAPTCHA manualmente?
Plugins como Contact Form 7, WPForms o similares ya disponen de mecanismos para integrar sistemas antispam. Sin embargo, cuando trabajamos con un formulario desarrollado específicamente para un proyecto, puede ser más interesante controlar directamente su funcionamiento.
Este tipo de integración es habitual en proyectos de desarrollo web con WordPress, especialmente cuando el formulario debe ejecutar procesos personalizados, conectarse con otros sistemas o registrar información de una forma determinada.
Crear las claves de Google reCAPTCHA
Antes de comenzar necesitamos registrar el dominio en Google reCAPTCHA y obtener dos credenciales:
- Site key: se utiliza en el frontend para mostrar reCAPTCHA.
- Secret key: se utiliza únicamente en el servidor para verificar la respuesta enviada por Google.
La clave secreta nunca debe mostrarse en el HTML público de la página.
Cargar el script de reCAPTCHA
Para mostrar el componente de reCAPTCHA debemos cargar su API JavaScript. En WordPress podemos hacerlo correctamente mediante wp_enqueue_script():
function hugocalixto_enqueue_recaptcha() {
wp_enqueue_script(
'google-recaptcha',
'https://www.google.com/recaptcha/api.js',
array(),
null,
true
);
}
add_action( 'wp_enqueue_scripts', 'hugocalixto_enqueue_recaptcha' );Crear el formulario personalizado
Para simplificar el ejemplo utilizaremos únicamente un campo para el nombre, el nonce de WordPress y el componente de reCAPTCHA.
<form method="post" id="contact-form">
<?php wp_nonce_field( 'hc_contact_form', 'hc_contact_nonce' ); ?>
<p>
<label for="f_name">Nombre</label>
<input
type="text"
id="f_name"
name="f_name"
required
>
</p>
<div
class="g-recaptcha"
data-sitekey="TU_SITE_KEY"
></div>
<p>
<button type="submit" name="btn-submit">
Enviar
</button>
</p>
</form>Sustituye TU_SITE_KEY por la clave pública correspondiente al dominio.
Validar el formulario y reCAPTCHA en WordPress
Mostrar reCAPTCHA en el navegador no es suficiente. La comprobación importante debe realizarse en el servidor antes de procesar los datos del formulario.
Podemos utilizar wp_remote_post() para enviar la respuesta recibida a Google y comprobar si la validación ha sido correcta:
if ( isset( $_POST['btn-submit'] ) ) {
if (
! isset( $_POST['hc_contact_nonce'] ) ||
! wp_verify_nonce(
sanitize_text_field(
wp_unslash( $_POST['hc_contact_nonce'] )
),
'hc_contact_form'
)
) {
return;
}
$name = isset( $_POST['f_name'] )
? sanitize_text_field( wp_unslash( $_POST['f_name'] ) )
: '';
$recaptcha_response = isset( $_POST['g-recaptcha-response'] )
? sanitize_text_field(
wp_unslash( $_POST['g-recaptcha-response'] )
)
: '';
if ( empty( $name ) ) {
echo '<p>El campo nombre es obligatorio.</p>';
return;
}
if ( empty( $recaptcha_response ) ) {
echo '<p>Debes completar la verificación reCAPTCHA.</p>';
return;
}
$response = wp_remote_post(
'https://www.google.com/recaptcha/api/siteverify',
array(
'timeout' => 15,
'body' => array(
'secret' => 'TU_SECRET_KEY',
'response' => $recaptcha_response,
),
)
);
if ( is_wp_error( $response ) ) {
echo '<p>No ha sido posible verificar reCAPTCHA.</p>';
return;
}
$body = json_decode(
wp_remote_retrieve_body( $response ),
true
);
if ( empty( $body['success'] ) ) {
echo '<p>La verificación reCAPTCHA no es válida.</p>';
return;
}
/*
* reCAPTCHA validado correctamente.
* Aquí puedes procesar el formulario:
* enviar un email, guardar información,
* generar un lead, llamar a una API, etc.
*/
}¿Qué ocurre durante la validación?
Cuando el usuario envía el formulario, reCAPTCHA proporciona una respuesta en el campo g-recaptcha-response. Nuestro servidor recibe ese valor y lo envía al endpoint de verificación junto con la clave secreta.
Google devuelve entonces una respuesta que indica si la comprobación ha sido válida. Solo después de obtener una respuesta satisfactoria deberíamos continuar con el procesamiento del formulario.
Errores habituales al integrar reCAPTCHA
Durante la integración podemos encontrarnos con diferentes códigos de error relacionados con las credenciales o con la respuesta recibida:
missing-input-secret: no se ha enviado la clave secreta.invalid-input-secret: la clave secreta no es válida.missing-input-response: no se ha recibido la respuesta de reCAPTCHA.invalid-input-response: la respuesta recibida no es válida.
reCAPTCHA es solo una parte de la seguridad del formulario
Añadir reCAPTCHA ayuda a reducir determinados envíos automatizados, pero no sustituye las medidas de seguridad que debe tener el propio formulario.
Los datos recibidos deben validarse y sanearse en el servidor, debemos proteger las acciones mediante mecanismos como los nonces de WordPress y nunca debemos confiar únicamente en las validaciones realizadas mediante JavaScript en el navegador.
Formularios personalizados en WordPress
Un formulario puede hacer mucho más que enviar un correo electrónico. Puede registrar una solicitud, crear un lead, identificar el origen de una conversión, comunicarse con una API, alimentar un CRM o ejecutar diferentes acciones según la información introducida por el usuario.
Cuando necesitas este tipo de comportamiento, puedes recurrir a un servicio de creación de formularios personalizados para WordPress y desarrollar el flujo específicamente alrededor de las necesidades del proyecto.
Conclusión
Integrar Google reCAPTCHA manualmente en WordPress nos permite proteger un formulario personalizado manteniendo el control sobre su lógica y procesamiento.
La parte fundamental no es únicamente mostrar la casilla “No soy un robot”, sino validar la respuesta en el servidor y procesar los datos solamente cuando todas las comprobaciones necesarias hayan sido superadas.
