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.

<?php
// Crear el formulario con reCAPTCHA v2
function custom_recaptcha_form() {
    $siteKey = 'TU_CLAVE_DE_SITIO'; // Reemplaza con tu clave de sitio

    ob_start(); ?>
    <form id="customForm" method="post" action="">
        <p>
            <label for="name">Nombre</label>
            <input type="text" name="name" id="name" required>
        </p>
        <p>
            <label for="email">Correo Electrónico</label>
            <input type="email" name="email" id="email" required>
        </p>
        <div class="g-recaptcha" data-sitekey="<?php echo esc_attr( $siteKey ); ?>"></div>
        <p>
            <input type="submit" name="submit" value="Enviar">
        </p>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('custom_recaptcha_form', 'custom_recaptcha_form');

Cargar el script de reCAPTCHA

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

<?php
// Incluir el script de reCAPTCHA en el frontend
function load_recaptcha_script() {
    wp_enqueue_script(
        'google-recaptcha',
        'https://www.google.com/recaptcha/api.js',
        [],
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'load_recaptcha_script');

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:

<?php
// Validar reCAPTCHA al enviar el formulario
function validate_recaptcha_submission() {
    if ( isset( $_POST['submit'] ) ) {
        $secretKey = 'TU_CLAVE_SECRETA'; // Reemplaza con tu clave secreta
        $recaptchaResponse = sanitize_text_field( $_POST['g-recaptcha-response'] );
        $remoteIp = $_SERVER['REMOTE_ADDR'];

        $response = wp_remote_post( 'https://www.google.com/recaptcha/api/siteverify', [
            'body' => [
                '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 '<p>¡Formulario enviado con éxito!</p>';
    }
}
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:

<?php
// Estilos para el formulario
function custom_form_styles() {
    echo '<style>
        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;
        }
    </style>';
}
add_action('wp_head', 'custom_form_styles');

En resumen

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

Related posts:

Cómo Construir un Endpoint Personalizado en WordPress Crear un admin AJAX personalizado y más ligero en WordPress How to add reCaptcha V2 in a custom form in WordPress