Cómo implementar reCAPTCHA v2 en WordPress con un formulario personalizado

La seguridad es clave en cualquier sitio web, y Google reCAPTCHA es una excelente herramienta para evitar spam y accesos automatizados. En este artículo, aprenderás cómo implementar reCAPTCHA v2 en WordPress con un simple formulario personalizado, utilizando únicamente programación.

Obtener las claves de reCAPTCHA

1. Ve a Google reCAPTCHA V2.
2. Registra tu sitio y selecciona la opción reCAPTCHA v2.
3. Obtén las claves de Sitio y Secreta. Guárdalas, ya que las usarás más adelante.

Crear el formulario básico

Comencemos creando un formulario simple que incluya el reCAPTCHA. Usa el siguiente snippet para generar un formulario con un shortcode.

    

        

            Nombre
            
        
        

            Correo Electrónico
            
        
        

        

            
        
    
    
Agrega este shortcode [custom_recaptcha_form]en cualquier página para mostrar el formulario.

Cargar el script de reCAPTCHA

Es necesario incluir el script de reCAPTCHA en la página. Usa este snippet para hacerlo:

 
Validar reCAPTCHA en el servidor
Para verificar que el usuario no es un robot, debes enviar el token generado por reCAPTCHA al servidor y validarlo con la clave secreta. Usa el siguiente código:



 [
                'secret'   => $secretKey,
                'response' => $recaptchaResponse,
                'remoteip' => $remoteIp,
            ],
        ]);

        $responseBody = json_decode( wp_remote_retrieve_body( $response ), true );

        if ( ! $responseBody['success'] ) {
            wp_die('La verificación de reCAPTCHA falló. Por favor, intenta de nuevo.');
        }

        // Procesar datos del formulario si la validación es exitosa
        echo '
¡Formulario enviado con éxito!
';
    }
}
add_action('init', 'validate_recaptcha_submission');

 
 
Personalizar la validación y el diseño (opcional)
Puedes añadir estilos personalizados para mejorar la apariencia del formulario. Por ejemplo:




        form#customForm {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        form#customForm p {
            margin-bottom: 15px;
        }
        form#customForm input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    ';
}
add_action('wp_head', 'custom_form_styles');

 
En resumen

Inserta el shortcode [custom_recaptcha_form] en una página para visualizar el formulario.
Envía el formulario para verificar si reCAPTCHA bloquea correctamente las solicitudes automatizadas.
Si necesitas deshabilitar el formulario en ciertas páginas, envuelve el shortcode en una condición dentro del código.






Related posts:
No related posts.