Cómo añadir reCaptcha en el formulario de contacto de WordPress sin necesidad de plugins
Veamos cómo podemos añadir reCaptcha a un formulario personalizado de WordPress sin plugins, es decir, en un desarrollo de sitio web personalizado. Para instalar la última versión de google reCaptcha (el “no soy un robot”), es necesario tener una cuenta de google y acceder a Google reCaptcha.
Una vez registrado, se accede al panel de administración del sitio, donde se muestran tres opciones:
Claves: clave del sitio y clave secreta
Paso 1: Migración del lado del cliente
Paso 2: Migración del lado del servidor
Vamos a crear un sencillo formulario con un campo Nombre para mostrar en un ejemplo práctico cómo añadir Google reCaptcha:
<form id="contact-form" name="contact-form" action="<?php echo get_permalink();?>#contact-form" method="post">
<?php //Comprobamos si el formulario ha sido enviado
if (isset( $_POST['btn-submit'] )) {
//Crear una variable para almacenar los errores
global $reg_errors;
$reg_errors = new WP_Error;
// Recogemos en las variables los datos enviados en el formulario y los saneamos.
// Si detectamos algún error, podemos rellenar los campos del formulario con los datos enviados, para no tener que empezar el formulario desde cero
$f_name = sanitize_text_field($_POST['f_name']);
//El campo Nombre es obligatorio, comprobamos que no esté vacío y si no, creamos un registro de error
if ( empty( $f_name ) ) {
$reg_errors->add("nombre-vacío", "El campo nombre es obligatorio")
}
// Comprobar el recaptcha
$response = wp_remote_post( "https://www.google.com/recaptcha/api/siteverify", array(
'method' => 'POST',
'timeout' => 45,
'redirección' => 5,
'httpversion' => '1.0',
'bloqueo' => true,
'headers' => array(),
'body' => array(
'secret' => "su clave secreta",
'response' => esc_attr($_POST['g-recaptcha-response'])),
'cookies' => array()
)
);
//Verificamos se há algum tipo de erro na conexão com o google
if ( is_wp_error( $response ) ) {
$reg_errors->add( "invalid-captcha", "Ocorreu um erro ao verificar o captcha" );
} else {
//Si nos conectamos con éxito a google, comprobamos si la respuesta es verdadera o falsa
$g_response = json_decode($response["body"]);
if ($g_response->success == false) {
$reg_errors->add( "invalid-captcha", "Se ha producido un error al comprobar el captcha" );
}
}
}?>
<div class="form-group">
<label for="f_name">Nome <span class="asterisk">*</span></label>
<input type="text" id="f_name" name="f_name" class="form-control" value="<?php echo $f_name;?>" placeholder="Escriba su nombre completo" required aria-required="true">
<?php //Comprobamos errores en la validación del campo Nombre
if ( is_wp_error( $reg_errors ) ) {
if ($reg_errors->get_error_message("empty-name")) {?>
<br class="clearfix" />
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p><?php echo $reg_errors->get_error_message("empty-name");?></p>
</div>
<?php }
}?>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="sua-chave-secreta-do-site"></div>
</div>
<button type="submit" id="btn-submit" name="btn-submit" class="btn btn-default">Enviar</button>
</form>Después de añadir el JS a la API, para cambiar el color del botón, sólo hay que pegar el fragmento con la clave del sitio (esta información se puede obtener en el paso 1 del panel reCaptcha):
Con esto, ya podemos visualizar el código reCaptcha en nuestro formulario. Para procesar los datos en el servidor, necesitamos hacer una petición a https://www.google.com/recaptcha/api/siteverify y enviar nuestra respuesta por POST para validarla.
Como vemos en el código, nos conectamos a google usando la función wp_remote_post () y POST la variable g-recaptcha-response, es decir, la respuesta que elegimos en el recaptcha. En primer lugar, validamos si la respuesta con google es correcta o no y si es así, comprobamos la respuesta en google. Devolverá un json con dos datos: códigos de éxito y de error. El éxito es verdadero o falso, por lo que sabremos si el reCaptcha que hemos introducido es bueno o no. También obtendremos un código de error si alguno de los parámetros de configuración es incorrecto, lo cual puede ser:
Missing-input-secret: parámetro de clave secreta no encontrado
Invalid-input-secret: el parámetro de la clave secreta es incorrecto
missing-input-response: no se ha encontrado el parámetro de respuesta
invalid-input-response: el parámetro de respuesta es incorrecto
