Agregar Captcha de Google a Formulario de Bootstrap

Los Captcha son comprobaciones que agregamos a nuestro formulario para que no se envien formularios de contacto por “Robot”, así evitamos el spam y posibles inyecciones de virus a nuestro sitio web.

Ahora si a las instrucciones

Primero nos tenemos que ir a la página oficial de Google: https://www.google.com/recaptcha

Accedimos con una cuenta de Gmail y nos aparece la siguiente ventana.

  • En el apartado de etiqueta, describimos a qué pertenece nuestro captcha, seleccionamos reCAPTCHA V2.
  • Se nos abrirá nuevas opciones donde tenemos que agregar el dominio donde está instalado nuestro formulario de contacto.
  • En mi caso es www.ignaciogutierrez.cl  (ojo que si tu sitio web está en un subdominio, solo tienes que agregar el dominio principal)
  • Aceptamos los términos y le damos al botón azul “Registro”.

Ahora comienza lo divertido.

Se te generará un clave del sitio y una clave secreta. Además no indica que tenemos que agregar el Captcha en dos pasos.

Primero:

Pega este fragmento antes de la etiqueta </head> de cierre en la plantilla HTML:

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

Pega este fragmento al final del elemento <form> donde quieras que aparezca el widget de reCAPTCHA:

<div class="g-recaptcha" data-sitekey="___clave del sitio____"></div>

Genial! esto era lo fácil… ahora vamos a lo complicado…

Tenemos que agregar unas cuantas lineas PHP a nuestro formulario, por lo cual, donde tengas tu archivo php de envío de formulario tendrás que pegar las siguientes líneas:

    function post_captcha($user_response) {
        $fields_string = '';
        $fields = array(
            'secret' => '___________clave secreta______________',
            'response' => $user_response
        );
        foreach($fields as $key=>$value)
        $fields_string .= $key . '=' . $value . '&';
        $fields_string = rtrim($fields_string, '&');

        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, 'https://www.google.com/recaptcha/api/siteverify');
        curl_setopt($ch, CURLOPT_POST, count($fields));
        curl_setopt($ch, CURLOPT_POSTFIELDS, $fields_string);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, True);

        $result = curl_exec($ch);
        curl_close($ch);

        return json_decode($result, true);
    }

    // Agregarmos una variable CaptCha
    $res = post_captcha($_POST['g-recaptcha-response']);
    // Fin Agregarmos una variable CaptCha

Recuerda llenar el campo donde está la clave secreta y ahora… donde tengas tu comprobación de envió agrega los siguientes parámetros:

// Comprobamos que el Captcha esté completo
        if (!$res['success']) {
        
        $errorCap = '<div class="alert alert-danger" role="alert"><p><strong>Completa el Captcha!</div>';
        }
        // Fin de comprobación Catpcha

Finalmente donde deseas que aparezca el mensaje de error (si el usuario no llenó el Captcha), agrega las siguientes líneas:

<div><? echo $errorCap; ?></div>

Uff, con esto ya tendrías todo implementado en tu formulario de contacto.

Ojo que esto lo estoy colocando de ejemplo en un formulario implementado con Bootstrap 4. Si tienes dudas de cómo hacer un formulario de contacto, puedes revisar el siguientes video: https://youtu.be/0hdqxhooQYg

Saludos y recuerda que cualquier duda la puedes dejar en los comentarios del video.

Los códigos implementados en su mayoría fueron utilizados del video: https://youtu.be/rFccSL76SeY