Portada » Lenguaje PHP » Sistema de contacto con Google reCAPTCHA

Sistema de contacto con Google reCAPTCHA

Sistema de contacto con Google reCAPTCHA. En esta publicación nos enfocaremos en crear un formulario de contacto para nuestros usuarios y/o clientes de nuestra web. Ahora, el formulario de contacto tendrá la validación de sus campos con el lenguaje jQuery y lo más importante el código captcha puede ser muy útil para validar quien está delante del formulario. Si es un usuario humano o caso contrario un robot.

Sistema de contacto con Google reCAPTCHA

En este tutorial, vamos a integrar y configurar a nuestro formulario de contacto el código de Google reCAPTCHA. Por lo tanto para mayor seguridad usaremos el reCAPTCHA de Google. Implementando este servicio gratuito podemos validar a los usuarios humanos y proteger los formularios de los bots.

¿Cómo usar este servicio gratuito de Google reCAPTCHA?

Básicamente este servicio carga automáticamente las dependencias de la biblioteca de códigos reCAPTCHA de Google. Sin embargo, para usar esta biblioteca gratuita, necesitamos obtener las claves de API desde google, registrando nuestra página web obligatoriamente.

Después de obtener las claves de API que nos proporciona google, hay que configurar el fichero «configuracion.php», usando las variables estas claves para integrar el código de Google reCAPTCHA.

<?php
//reCAPTCHA Configuracion 
// Ir a  Google y obtener las llaves necesarias para el correcto funcionamiento
// http://www.google.com/recaptcha/admin

define('SITE_KEY',"6LeB42AUAAAAAMNQkBNyzlyAU0waHbUcPYXYQeum"); 
define('SECRET_KEY',"6LeB42AUAAAAAK6elYoNInEa20ygDy9JoiNOwbtT")
?>

Librerías necesarias para el funcionamiento del formulario

<script src="assets/jquery-1.12.4-jquery.min.js"></script> 
<script src="assets/jquery.validate.min.js"></script> 
<script src="assets/ValidarRegistro.js"></script>

Formulario de contacto con Google reCAPTCHA

Este código mostrara el formulario de contacto al usuario con el código reCAPTCHA de Google.

     <form id="frmContact" action="" method="POST" novalidate="novalidate">
        <div class="form-group">
            <label for="nombres">Nombres:</label>
            <input type="text" id="nombres" name="nombres" placeholder="Ingrese su nombre" title="Por favor ingrese su nombre" class="form-control" aria-required="true" required>
        </div>
        <div class="form-group">    
            <label for="Email">Email:</label>
            <input type="text" id="email" name="email" placeholder="Ingrese su Email" title="Por favor ingrese su Email" class="form-control" aria-required="true" required>
        </div>
        <div class="form-group">
            <label for="Numero Telefono">Numero Telefono:</label>        
            <input type="text" id="telefono" name="telefono" placeholder="Su numero telefonico" title="Por favor ingrese su numero telefonico" class="form-control" aria-required="true" required>
        </div>
        
        <div class="form-group">
            <label for="Comentarios">Comentarios:</label>  
            <textarea class="form-control" id="comment-content" name="contenido" placeholder="Ingrese su comentario"></textarea>            
        </div>
        
            <div class="g-recaptcha" data-sitekey="<?php echo SITE_KEY; ?>"></div>            
            <div id="mail-status"></div>            
            <button class="btn btn-primary" type="Submit" id="send-message" style="clear:both;">Enviar Mensaje</button>
        </form>

Para el correcto funcionamiento el usuario tiene que resolver las preguntas del reCAPTCHA, se devolverá el token de respuesta. Se creará dinámicamente un nuevo elemento HTML g-recaptcha-response para almacenar el token de respuesta del usuario. Este token se publicará en el código PHP al enviar el formulario de contacto.

¿Cómo obtener el código de reCAPTCHA?

1. Primero ir a la página de Google

https://www.google.com/recaptcha/admin

Luego configurar los datos de nuestra página web

a) En etiqueta colocar un nombre representativo a nuestra página web
b) En los botones de opción tenemos que elegir reCAPTCHA v2
c) Colocar nuestro dominio web, tal como se muestra en la imagen
d) Aceptar los términos y condiciones del servicio
e) Solamente presionar el botón registrar.

Creando key para reCAPTCHA en Google.com
Creando key para reCAPTCHA en Google.com

2. Resultados del registro de nuestro dominio

Key generadas reCAPTCHA en Google
Key generadas reCAPTCHA en Google

No enfocamos en la sección Claves, como podemos observar nos mostrara dos claves

a) Clave del sitio
b) Clave secreta

Estas claves tenemos que implementar en el fichero «configuracion.php»,  que lo solicita para que nuestro dominio este habilitado y con ello funcionara nuestro formulario de contacto.

Mostrando nuestro formulario como resultado final

Descargar formulario de contacto con reCAPTCHA Google
Descargar formulario de contacto con reCAPTCHA Google

CONCLUSIÓN

La utilización de este servicio es muy recomendable para implementar en formularios, inicios de sesión, etc. Por lo tanto, este servicio tiene beneficios porque los ficheros que necesita lo brinda google a través de su CDN.

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

Miles de páginas en internet lo usan para validar que sea una persona quien está delante del computador y no un robot.
Espero que esta breve explicación les ayude para implementar este servicio gratuito de la compañía google.

Sistema de contacto con Google reCAPTCHA
Sistema de contacto con Google reCAPTCHA

DESCARGAS

 

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

6 comentarios en “Sistema de contacto con Google reCAPTCHA”

  1. Hola amigo, muy buena guia lo instale y esta todo perfecto, pero tengo un detalle luego de poner las claves, al momento de llenar todo y tambien validar el capcha sigue diciendo que falta validar y no me envia el formulario, que puede ser amigo?

  2. hola consulta e implementado el proyecto, pero al enviar solo carga la imagen de load pero no lo envía y el el archivo de contacto.php dice require(‘constant.php’); pero ese archivo no viene en el proyecto.

  3. Hola Nestor agradezco tu ayuda

    hace tiempo yo bajé este formulario, hice los cambios necesarios en las claves y funcionaba perfectamente, de un momento a otro dejó de funcionar, puse inclusive claves nuevas y me sigue diciendo que requiere validación de recaptcha.
    no se que hacer.
    podrás ayudarme?

    1. Hola,

      La descarga de este artículo (Sistema de contacto con Google reCAPTCHA) es gratis, siempre ha sido gratis y lo será siendo.

      Quizá has visto el anuncio de los (156 sistemas PHP & MySQL), ese producto si es de pago.

      Espero que la confusión este aclarada, saludos a la distancia

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad