Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
Google reCaptcha

Cómo agregar reCaptcha a un formulario de contacto personalizado en WordPress sin Plugins

Vamos a ver cómo podemos agregar reCaptcha a un formulario personalizado en WordPress sin plugins, es decir, en un desarrollo a medida. Para instalar la última versión de reCaptcha de google (la de “No soy un robot”) es necesario que tengas una cuenta en google y accedas a Google reCaptcha.

Lo primero que hay que hacer es registrar un sitio:

registro reCaptcha

Una vez dado de alta, accedes al panel de administración del sitio donde aparecen 3 opciones:

  • Claves: Clave del sitio y Clave secreta
  • Paso 1: migración en el lado del cliente
  • Paso 2: migración en el 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'] )) { //Creamos una variable para almacenar los errores global $reg_errors; $reg_errors = new WP_Error; //Recogemos en variables los datos enviados en el formulario y los sanitizamos. //Si detectamos algún error, podremos más abajo rellenar los campos del formulario con los datos enviados para no tener que empezar el formulario de cero $f_name = sanitize_text_field($_POST['f_name']); //El campo Nombre es obligatorio, comprobamos que no esté vacío y en caso contrario creamos un registro de error if ( empty( $f_name ) ) { $reg_errors->add("empty-name", "El campo nombre es obligatorio"); } //Comprobamos el recaptcha $response = wp_remote_post( "https://www.google.com/recaptcha/api/siteverify", array( 'method' => 'POST', 'timeout' => 45, 'redirection' => 5, 'httpversion' => '1.0', 'blocking' => true, 'headers' => array(), 'body' => array( 'secret' => "tu-clave-secreta", 'response' => esc_attr($_POST['g-recaptcha-response'])), 'cookies' => array() ) ); //Comprobamos si tenemos algún tipo de error en la conexión con google if ( is_wp_error( $response ) ) { $reg_errors->add( "invalid-captcha", "Se ha producido un error comprobando el captcha" ); } else { //Si hemos conectado correctamente con google, comprobamos si la respuesta es true o false $g_response = json_decode($response["body"]); if ($g_response->success == false) { $reg_errors->add( "invalid-captcha", "Se ha producido un error comprobando el captcha" ); } } }?> <div class="form-group"> <label for="f_name">Nombre <span class="asterisk">*</span></label> <input type="text" id="f_name" name="f_name" class="form-control" value="<?php echo $f_name;?>" placeholder="Introduce tu nombre" required aria-required="true"> <?php //Comprobamos si hay 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">&times;</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="tu-clave-del-stio"></div> </div> <button type="submit" id="btn-submit" name="btn-submit" class="btn btn-default">Enviar consulta</button> </form>

Cómo podréis ver en el código, es necesario añadir un script con la API de Google antes del cierre de la etiqueta </head>, aunque lo hayamos puesto en el ejemplo al final (Ésta info la podréis obtener en el paso 1 del panel de reCaptcha):

<script src='https://www.google.com/recaptcha/api.js'></script>

 

Una vez añadido el JS con la API, para pintar el botón sólo es necesario pegar el fragmento con tu clave del sitio (Ésta info la podréis obtener en el paso 1 del panel de reCaptcha):

<div class="g-recaptcha" data-sitekey="tu-clave-del-sitio"></div>

 

Con esto ya podremos visualizar el código reCaptcha en nuestro formulario. Para procesar los datos en el lado servidor es necesario 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, conectamos con google mediante la función wp_remote_post(), y pasamos por POST la variable g-recaptcha-response, es decir, la respuesta que hemos escogido en el recaptcha. Primero validamos si la respuesta con google es correcta o no, y en caso afirmativo, comprobamos la respuesta de google. Nos devolverá un json con dos datos: success y error-codes. Success es un true o false, con lo que sabremos si el reCaptcha que hemos introducido es bueno o no. También recibiremos un código de error si alguno de los parámetros de configuración es erróneo, que puede ser:

  • Missing-input-secret: El parámetro clave secreta no ha sido encontrado
  • Invalid-input-secret: El parámetro de clave secreta es incorrecto
  • missing-input-response: El parámetro response no ha sido encontrado
  • invalid-input-response: El parámetro de response es incorrecto

Puede que también te interese

Cómo desactivar Gutenberg cuando salga WordPress 5.0
Cómo desactivar Gutenberg cuando salga WordPress 5.0
La versión 5.0 de WordPress está a la vuelta de la esquina, prevista para finales de Agosto. Como ya sabrás a esta altura de la…
Cómo añadir un botón para donaciones en tu plugin
Cómo añadir un botón para donaciones en tu plugin
En el artículo anterior vimos cómo añadir un enlace para los ajustes en el listado de plugins. En esta entrada vamos a ver cómo añadir…
Mejora la puntuación de Google PageSpeed Insights: Eliminar el JavaScript que bloquea la visualización del contenido de la mitad superior de la página
Mejora la puntuación de Google PageSpeed Insights: Eliminar el JavaScript que bloquea la visualización del contenido de la mitad superior de la página
1. Optimizar imágenes 2. Minificar CSS y JS 3. Especificar caché de navegador 4. Habilita la compresión 5. Reducir el tiempo de respuesta del servidor…
Añade una barra de progreso a tus comandos WP-CLI
Añade una barra de progreso a tus comandos WP-CLI
En entradas anteriores vimos parte de lo que podemos hacer con WP-CLI. Una de sus mayores virtudes es poder crear tus propios comandos para realizar…