Cómo crear un formulario de correo electrónico Bootstrap con ReCaptcha y PHP en 30 minutos

En este tutorial, le mostraré cómo agregar fácil y rápidamente un captcha a su formulario Bootstrap para evitar el spam . Usaremos ReCaptcha de Google , la solución Captcha más popular en la actualidad.

Como base, usaré un formulario de contacto HTML con el backend de PHP de uno de mis tutoriales anteriores. Y ou puede utilizarlo con cualquier otra forma de Bootstrap que tiene.

Nuestro formulario utilizará sintaxis HTML5 salpicada con algunos andamios de Bootstrap y un validador de JavaScript .

Lo enviaremos a través de AJAX (la página no se recargará) y luego procesaremos los valores del formulario con PHP.

Y finalmente, enviaremos un correo electrónico con PHP y devolveremos una respuesta a la página original que se mostrará en un mensaje de estado encima del formulario.

Como mencioné antes, me centraré principalmente en trabajar con ReCaptcha hoy y no demasiado en el formulario Bootstrap. Entonces, en caso de que se lo haya perdido, eche al menos un vistazo rápido a mi tutorial de formulario Bootstrap.

Demo y enlaces

  • Ver la demo
  • o descargue los archivos para el tutorial

¡Bien, hagámoslo!

1. Registre su sitio

Para poder utilizar ReCaptcha, primero deberá registrar su sitio web en el sitio web de ReCaptcha.

Después de un registro exitoso, obtendrá un par de claves para usar con su ReCaptcha. Deje la página abierta o copie las claves en un archivo de texto, las necesitaremos pronto.

2. HTML

Usaremos la plantilla del formulario de contacto del tutorial anterior + agregaremos un elemento reCAPTCHA y una entrada oculta al lado para ayudarnos con la validación de JavaScript.

Expliquemos un poco el código HTML:

  • tenemos un formulario de contacto HTML listo escrito con el marcado Bootstrap
  • Los principales scripts y hojas de estilo de terceros que se utilizarán son: jQuery, Bootstrap 4, CSS y JavaScript.

Para agregar un ReCaptcha a su formulario, solo necesita:

  • para incluirlo en un lugar que lo necesite en su formulario (reemplace la clave del sitio con su propia clave desde el primer paso)
  • Incluya ReCaptcha JS para inicializar ReCaptcha en la página - <; / script>
  • También uso atributos data-callbacky data-expired-callbacken el g-recaptchadiv; estos son opcionales y los usaré para hacer que ReCaptcha coopere con el validador

Aquí está el código completo del formulario.

3. PHP

En PHP, usaremos la biblioteca cliente de Google que se encargará de la verificación.

Puedes usar Composer para instalarlo en tu proyecto, descargarlo de GitHub o simplemente usar la versión que incluí en el paquete de descarga.

La mayor parte del código también es de mi tutorial anterior, así que intentaré resumirlo brevemente.

Pongamos un nombre al archivo contact.phpy veamos qué haremos con él:

  • al principio, necesitamos requerir la biblioteca PHP ReCaptcha - require('recaptcha-master/src/autoload.php');
  • y hacer algunas cosas de configuración, por ejemplo, ingresar su clave secreta - $recaptchaSecret = 'YOUR_SECRET_KEY';
  • También configuramos las variables adicionales como los correos electrónicos para enviar el correo electrónico, el asunto y los mensajes de éxito / error.
  • luego, necesitará inicializar la clase con su clave secreta - $recaptcha = new \ReCaptcha\ReCaptcha($recaptchaSecret);
  • enviar una llamada para validar el ReCaptcha - $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
  • lanzar una excepción si la validación falla - if (!$response->isSuccess()) {...}
  • el script luego redacta el mensaje de correo electrónico, lo envía y devuelve una respuesta JSON. (El formulario lo envía AJAX de forma predeterminada).

4. JavaScript

Nuestro archivo JavaScript contact.jsse encargará de:

  • validando las entradas con el validador Bootstrap
  • manejando las devoluciones de llamada JS de ReCaptcha (completaremos lo oculto en input[data-recaptcha]función de la respuesta de ReCaptcha. Si tiene éxito, completamos esta entrada = el validador considerará que el formulario es válido).
  • AJAX enviando el formulario
  • y por último, mostrar el mensaje de éxito o error y también vaciar el formulario.

Aquí está el código:

5. Resultado

¡Eso es todo!

Debería tener un formulario de contacto Bootstrap de contacto que funcione con ReCaptcha y antecedentes de PHP ahora.

Gracias por el 50 aplauso? si te ha gustado este artículo! Un lso, echa un vistazo a mis otros tutoriales Bootstrap o mis plantillas de archivos de inicio.

Publicado originalmente en el blog Bootstrapious.

Sobre el Autor

Ondrej Svestka es un entusiasta de Bootstrap y front-end y fundador de Boostrapious.