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.
2. Resultados del registro de nuestro dominio
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
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.
DESCARGAS
{«type»:»error»,»text»:»Captcha, Validacion Requerida!»}
me marca ese error, alguna idea ?
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?
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.
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?
que estafa pensè que era gratis Dislike
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