HowTo: Formulario de contacto responsive usando Bootstrap+Ajax+PHPMailer+Google reCaptcha+JSON

En este HowTo aprenderás a crear y construir un formulario de contacto responsive desde cero, usando diferentes tecnologías y técnicas web.

Antes de empezar a crear el formulario de contacto vamos a hacer un resumen de las diferentes tecnologías y técnicas web que vamos a necesitar.

  • Lenguaje de marcado HTML5.
  • CSS + frameworks  Bootstrap 4.1 y FontAwesome 5 para maquetar y estilar el formulario.
  • JavaScript y AJAX para enviar el formulario de forma asíncrona.
  • PHP 7> para recepcionar los datos y PHPMailer 5> Stable para realizar el envío del email.
  • JSON para intercambiar los datos de PHP a JavaScript.
  • Google reCaptcha para evitar spam del formulario.

Creando el formulario HTML

Vamos a empezar creando el fichero que contendrá nuestro formulario. Para ello primeramente crearemos la cabecera del documento que contendrá todos nuestros scripts, frameworks, etc ..

A continuación ya podremos incluir el formulario creado con Bootstrap 4>

  • Se compone de 4 campos (nombre, teléfono, email, observaciones), el botón de envío y un área donde mostraremos los mensajes de respuesta (errores, etc …)
  • Para la validación de los campos no vamos a complicarnos y usaremos la atributo required de HTML5
  • La llamada a google reCAPTCHA donde incluiremos la clave pública.

JavaScript y AJAX

Por supuesto el formulario no funcionará sin JavaScript y Ajax.

  • La función enviar() se encarga de enviar el formulario de contacto usando AJAX usando el objeto formData que nos permite recopilar los datos del formulario para luego poder transmitirlos usando el objeto XMLHttpRequest

Recepción y envío del formulario

Una vez que Ajax se comunica con el fichero PHP que le hallamos indicado, este empezará la transmisión de los datos al fichero enviar.php. Vamos a ver con detalle el contenido de este:

  • Lo primero que hacemos es comprobar el CAPTCHA introducido por el usuario. Es importante que lo tengamos bien configurado y que la clave pública coincida con la clave secreta.
  • Recepcionamos los datos del formulario y los validamos usando la función filter_input() de PHP
  • Una vez hecho esto ya podemos realizar una llamada a la clase PHPMailer donde configuramos la cuenta de correo que enviará los correos, la cuenta de destino y otros parámetros que necesitemos.
  • Sino se detectamos ningún error enviamos el correo.
  • Devolvemos los datos en formato JSON y que creemos necesarios para que los interprete JavaScript y así avisar al usuario si el envío ha sido satisfactorio o los errores que han sido encontrados.

Previa del formulario en JSFiddle

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.