Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Bootstrap
Webdesign

Construyendo Contacto en Bootstrap usando PHP y AJAX

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by David Castrillón (you can also view the original English article)

Final product image
What You'll Be Creating

En este tutrial Voy a cobrir pasos para crear una forma de contactos, utilizando marcos frontalez de Bootstrap, en combinacion con AJAX y PHP Desde allí podemos explorar algunas características adicionales como una lujosa animación CSS con animate.css, validaciones posteriores en JavaScript y perfeccionar la experiencia del usuario con contenido asíncrono.

En el momento de escribir este artículo Bootstrap 3.3.5 es la  versión más actual y vale mencionar que estamos utilizando una estructura predeterminada de Bootstrap (con 12 columnas) para este tutorial. Al seguir este artículo asegúrate de que utilizas los últimos fragmentos y estructuras de código como se indica en la documentación de Bootstrap.

Estructura de carpeta y archivo

En primer lugar, queremos crear un directorio raíz e incluir los siguientes archivos y carpetas:

Necesitaremos incluir algunas librerías front-end que nos ayuden, así que vamos adelante y descarga (o referencia desde el exterior) las siguientes:

Incluye esas librerías, así la estructura de archivos se convierte en:

Construyendo las Bases del Formulario

Abre el archivo index.html, copie la siguiente estructura de base de HTML:

Esta es nuestra plantilla html básica en la que se basará el contenido para el formulario. Puedes ver que hemos ligado todos los archivos CSS y JavaScript necesarios (nota que realmente no necesitamos bootstrap.js para este ejemplo en particular). Hemos incluido una etiqueta de meta viewport para que ayuden con nuestras media queries dentro de Bootstrap. El JavaScript se ha colocado en la parte inferior del archivo para ofrecer el contenido principal primero.

Dentro de la etiqueta body, hemos incluido un div con una clase de col-sm-6 col-sm-offset-3. Esto básicamente significa dentro de nuestra ventana sm (small) y de un tamaño superior queremos mostrar una columna de ancho de 50% (hay un máximo de 12 columnas). La clase col-sm-offset-3 representa una margen izquierda del 25%, produciendo así un diseño que es la mitad la vista de pantalla disponible y centrado horizontalmente. Desde aquí hemos incluido unh3y hemos comenzado las bases de nuestro formulario. Asegúrate de aplicarle un identificador ID a este formulario de modo que podamos adjuntarle un evento de jQuery más adelante.

the offset will push our DIV 25 from the right

Sin tripas, no hay gloria.

Para construir las entrañas del formulario podemos copiar/pegar o escribir el siguiente código dentro de la etiqueta <form></form>

Estos son todos los campos de entrada y botones con los que el usuario interactuará. El div inicial con la clase asignada de row es la sintaxis clásica de Bootstrap, representando a una agrupación horizontal de elementos de la columna. Las columnas dentro de Bootstrap crean relleno o el padding – agregar una fila alrededor de éstos quita el padding a la izquierda y la derecha ayudándoles a encajar perfectamente dentro de su contenedor.

Hemos creado dos columnas con la clase col-sm-6 (50%) que vamos a utilizar para dividir el formulario. Dentro del primer col-sm-6 hemos creado una etiqueta y el campo para nombre, el segundo es para el correo electrónico. Cada uno de ellos incluye una etiqueta con un atributo for apropiado por lo que puede apuntar el campo asociado. Cada una de estas columnas incluye un form-group que semánticamente agrupa la etiqueta y el campo junto y aplica un pequeño margen en la parte inferior.

Displaying two fields inline

Tipografía

Bootstrap te permite utilizar clases de tipografía de H1-H6. Estos clases nos ayudan a estilizar elementos inline sin añadir márgenes adicionales o crear elementos de bloque. Hemos utilizado un H4 para rápidamente estilizar estas etiquetas haciéndolas grandes y claras.

La clase form-control aplicada a cada entrada le permite abarcar toda la longitud del contenedor (ancho 100%). También aplica varios estilos para ayudar a construir un elemento form fácil de leer (una altura más grande, borde plano,etc).

Después de estas columnas se incluye el cuerpo del mensaje. De nuevo, envolvemos esto dentro de form-group y aplicamos estilos similares a nuestra área de etiqueta y texto como lo hicimos antes.

La llamada a la acción

Finalmente incluimos el botón Enviar. Bootstrap tiene un número de clases para varios botones y tipografía de estados en colores. Hemos optado por utilizar el botón de "éxito" (btn-success) que es, por defecto, verde. Además tenemos que aplicar la clase btn base para restablecer las características básicas del botón (borde, padding, text-align, font-weight). Aplicamos una clase btn-lg es un gran botón y finalmente una clase pull-right que flota este botón a la derecha.

Después de nuestro botón hemos incluido un div con el id de #msgSubmit y hemos aplicado las siguientes clases: "h3 text-center hidden". El h3 ayuda a crear un encabezado más grande, text-center que (adivinaste) establece la alineación del texto al centro, y finalmente hemos creado la clase hidden que establece tanto que el atributo display sea none como que el atributo visibility sea hidden.

Completed Form

Añadiendo la funcionalidad al envío.

Como puedes ver en tu navegador favorito: hemos creado un formulario básico en Bootstrap.  Sin embargo aún no  hace nada realmente . Nuestro siguiente paso será crear la función que toma las entradas del usuario y las envía de forma asincrónica a nuestro correo PHP.

Abre el archivo scripts.js y copia el siguiente código:

Este pedacito de código es un fragmento de jQuery que escucha una función enviar en nuestro #contactForm id (configurado anteriormente). Sobre esta función pasamos una variable event que almacena la acción de enviar del formulario en la función. La función event.preventDeafult(); detiene que el formulario se envíe como lo haría normalmente, el cual recargaría la página como si no se hubiera configurado ninguna acción en el formulario. Finalmente, solicita una función submitForm();

submitForm();

A continuación construimos la función submitForm();  como sigue:

Las tres variables configuradas están tomando los valores de cada entrada del formulario y los asignan a una variable de JavaScript que utilizaremos más adelante.

Iniciamos un objeto AJAX en jQuery y establecemos los parámetros de tipo post, URL a la ubicación del archivo PHP, los datos que deseamos enviar y la función de devolución de llamada de éxito. Los datos incluyen los tres variables concatenadas con una etiqueta de identificación asociada. La función de llamada de éxito se llama cuando el objeto AJAX  recibe con éxito información desde el script PHP. La función toma el texto devuelto y comprueba si es igual a la cadena "success". Si es así, activa la función final de formSuccess.

La función formSuccess quita la clase oculta del div #msgSubmit que aplicamos antes, revelando así el texto.

Enganchándola en la función Mail de PHP

Por último, necesitamos escribir un script en PHP para recibir los datos y enviar el contenido a través de una función de correo php incorporado. Abre process.php e incluye el siguiente código:

Similar al fragmento de jQuery de antes, tenemos que recoger y almacenar las variables que deseamos utilizar. Desde la función post podemos recopilar las tres variables de entrada y asignarles nombres de variables similares dentro de PHP. La variable $EmailTo es una dirección de correo electrónico predefinida que se puede establecer en el script, para que te sea enviado un correo electrónico en el envío del formulario. $Subject es una cadena que quieres utilizar como el asunto del correo electrónico.

El cuerpo del correo electrónico se construye libremente alrededor de las tres variables establecidas. En primer lugar establecer un texto descriptivo como "nombre:", luego la variableluego una nueva línea determinada por /n (rotura de línea/línea nueva). Esto es repetido y concatenado a la variable $body.

Para finalmente enviar el correo electrónico que hemos adjuntado dentro de la función de correo. Asignando la variable $success incluimos la dirección de correo electrónico a la que se envía, el asunto y el cuerpo del correo electrónico.

Para iniciar el proceso de enviar el correo electrónico podemos llamarlo dentro de una instrucción if  Esto también ayuda a comprobar si fue exitoso o no. Si la función de correo devuelve "true" el script devolverá "success", si no devolverá "no válida".

Este resultado será devuelto al objeto AJAX y manejado en el lado del cliente. La belleza de AJAX es que todo esto se realiza asincrónicamente en el cliente, permitiendo al usuario seguir utilizando el sitio mientras se está enviando.

Escupir y pulir

Haber cubierto la estructura básica y la funcionalidad del formulario es la primera mitad de este tutorial, ahora nos sumergiremos en los detalles de ofrecer comentarios de los usuarios a través de varias características adicionales que podemos incluir. Específicamente, cubriremos el formulario de feedback  a través del manejo error tanto en el lado del cliente como del lado del servidor.

Una vez más, para ayudar con el proceso de validación de formularios, utilizaremos algunas herramientas. Estos incluyen:

Agrégalos en el proyecto como hicimos anteriormente con Bootstrap y jQuery. Estas herramientas le ayudará a proporcionar retroalimentación al usuario cuando envía el formulario. Hay un montón de herramientas de validación de formularios y frameworks por ahí (incluyendo validación de HTML5 nativo), pero he utilizado el "validador de Bootstrap" ya que se integra muy bien con nuestro formulario actual.

La estructura del proyecto debe ser ahora algo así:

Validando nuestro formulario

Vamos a comenzar por iniciar el validador para comprobar el formulario una vez que lo enviamos. Retomando nuestro archivo scripts.js tenemos que editar el primer pedazo de código que llama a la función submitForm() cuando el formulario es enviado.

Necesitamos actualizar al siguiente código:

Este nuevo pedacito de código comprueba si el validador de Bootstrap ha encontrado un problema y ha detenido el procesamiento. Si no, seguimos  normalmente. Todavía necesitamos evitar la acción predeterminada (recarga la página) en el envío exitoso del formulario, así que tenlo en cuenta.

Haciendo clic en enviar el formulario cuando no está totalmente lleno hará ahora que los campos vacíos resalten en rojo mostrando que necesitan que se introduzca información, es así de fácil!

Agregando esta validación hemos eliminado o prevenido que validaciones nativas de HTML5 tengan lugar. Podemos añadir contexto posterior a la validación mediante la inclusión de mensajes de error. El validador de Bootstrap tiene una característica ingeniosa para mensajes de error para cada entrada, que demuestra bastante perfección. Para agregar estos tenemos que añadir algo más de HTML para proporcionar un lugar para que se muestren.

Dentro de cada form-group bajo la entrada debemos colocar el siguiente código html:

Por ejemplo, aquí está el div extra que añade los campos nombre y correo electrónico:

Volver a enviar el formulario ahora ahora debe mostrar el mensaje de error predeterminado cuando los campos se dejan en blanco "por favor rellene este campo.". Mediante la adición de un data-attribute a la entrada llamada "data-error" se puede incluir un mensaje de error personalizado. Por ejemplo:

Hay un montón de otras características tales como patrones de expresiones regulares que el validador de Bootstrap puede aceptar. Puedes leer más en Github.

Añadir Animación en la Retroalimentación

Nuestra validación del lado del cliente se ve bien; tenemos algunos resaltos ingeniosos que se producen en los campos vacíos. Sin embargo, sería bueno agregar más animación al formulario y agregar más mensajes de manera que el usuario sabe lo que está ocurriendo. Actualmente contamos con un "mensaje enviado!" que es el mensaje que aparece al enviar el formulario exitosamente, pero qué si hay un error?

Para utilizar el código existente y hacer nuestros scripts más reutilizables modificaremos el mensaje de éxito existente para que acepte errores también.

Lo primero es lo primero, vamos a quitar el texto "mensaje enviado!" del código HTML y solo dejamos un div vacío:

Ahora necesitaremos crear una nueva función para manipular el estado del mensaje. Añade esta función a la parte inferior del scripts.js

Esta función toma dos argumentos. valid será una variable booleana: que será true si es un mensaje de éxito, o false si es un mensaje de error. msg será el mensaje que se mostrará en el div en pantalla.

En primer lugar la función comprueba si se trata de un mensaje de éxito o de error comprobando el valor a validar. En cualquier caso establece la variable de clase con las clases CSS correspondientes (tenemos que volver a incluir el h3 y el text-center ya que quitaremos luego estos por defecto en la función).

Nota: estamos utilizando algunas clases animate.css para la clase en el mensaje de éxito. Se reproducirá la animación tada en el éxito.

Finalmente, la función elimina todas las clases de #msgSubmit (evita el choque de las clases), luego añade las clases establecidas previamente y añade a continuación el texto del mensaje dentro del div.

Dentrode  la iniciación de nuestro validador que actualizamos al comienzo de esta sección, podemos agregar la siguiente llamada de función dentro del if cuando es igual a true.

Enviar el formulario con los campos vacíos ahora debe mostrar el mensaje de error "Rellenaste el formulario correctamente?"

Un último paso para esta nueva función de submitMSG es llamarlo para cuando el formulario es exitoso. Actualiza la función formSuccess() a lo siguiente:

En primer lugar queremos restablecer el formulario y borrar los valores de éxito, entonces llamamos a nuestra función de submitMSG como antes con un mensaje de éxito. Enviar con éxito el formulario debe mostrar ahora el mensaje de éxito con un efecto lujoso de animación de animate.css tada.

Sacúdelo

¿Qué es una animación más, de acuerdo? Vamos a agregar otra animación a todo el formulario en caso de error, una animación universal "sacudiendo" debe estar bien!

Crear una nueva función sólo después de formSuccess() y llámala formError()

Esta función utiliza un enfoque que se encuentra en la página demo de animate.css que nos permite añadir una animación a un elemento y luego re-llamarlo o agregarlo una y otra vez. Las animaciones CSS tienen algo molesto y es que una vez que funcionan una vez tienden a no funcionar de nuevo, incluso cuando la clase se quita y se vuelve a agregar. Esta función ayuda a restablecer las clases al final de la animación, lo que permite volver a agregarlos otra vez. Cuando el usuario hace clic en enviar en un formulario incompleto, queremos que la animación shake funcione. Y si se envía otra vez cuando todavía está mal necesita funcionar otra vez.

Podemos llamar a esta función  formError() sobre la función de submitMSG() que hemos creado para un mensaje de error. Por ejemplo:

Ahora cuando enviamos un formulario vacía se sacudirá para que el usuario sepa que algo ha ido mal.

Validación de Moar

Toda esta validación del lado del cliente es buena, sin embargo, cualquier usuario podría deshabilitar estas medidas y entregar el formulario con los campos vacíos editando el código en su navegador. Siempre es una buena medida hacer alguna validación del lado del servidor, para capturar todo lo que se desliza más allá.

Abriendo nuestro archivo process.php necesitamos hacerle algunos cambios para que compruebe si los campos están vacíos; Si no, para que devuelva un mensaje en el front-end. Creamos una variable llamada $errorMSG para capturar los mensajes de error y luego otros que incluyen la validación de $_POST.

Este PHP comprueba si están vacíos antes de configurarlos como la variable correspondiente (sustituye el código vigente ajustando las variables de $_POST). Si están vacías entonces establecemos un mensaje básico que se le envía al cliente. Podemos hacer mucho más que validar los campos contra estar vacíos (si es demasiado corto o largo cotejar con expresiones regulares, etc.) en PHP y JavaScript. Sin embargo, por simplicidad, sólo lo limitaremos a los campos vacíos por ahora.

Necesitamos devolver el mensaje de error para la llamada inicial de AJAX que se mostrará en el navegador. Editaremos la instrucción if  que creamos anteriormente en la parte inferior del archivo PHP.

En nuestra declaración if también comprobamos si el $errorMSG está en blanco ("") junto con el estado de la función de correo incorporada utilizada en la variable $success. En nuestra condición else hemos incluido un control más. Esto sólo comprueba si el error fue consecuencia de una falla en $success, si es así que enviamos de vuelta "Algo salió mal: (". Por otro lado nos mostrará el mensaje que se compiló cuando comprobamos los valores vacíos.

Un último paso es aceptar este nuevo mensaje en el AJAX y mostrarlo en el formulario. Tenemos que actualizar el objeto AJAX dentro del archivo scripts.js de la siguiente manera:

Acabamos de actualizar la condición else que comprueba para ver si text == success. En nuestro else hemos llamado la función formError() que se aplicará la animación de movimiento y hemos pedido a la función submitMSG() mostrar el texto devuelto desde el PHP. El texto devuelto o bien será "algo salió mal: (" o los campos que recibió vacíos.

Conclusión

Ve a Github para echar un vistazo al código en su totalidad, hemos hecho mucho!

Nuestro formulario ahora debe proporcionar al usuario información sobre qué campos son incorrectos a través de una validación sólida. Incluimos mensajes contextuales basados en el estado y el mensaje devuelto desde PHP y hemos aplicado una capa extra de validación del lado del servidor para coger aquellos que omiten la validación del front-end.

En general deberías tener ahora un formulario de contacto muy sólido listo para ser decorados e integrado en tu sitio web. Espero que hayas disfrutado este tutorial, no dudes en dejar tus preguntas o ideas en los comentarios!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.