7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. JavaScript

Cómo crear un formulario para reservas web con la secuencia de comandos Smart Forms

Scroll to top
Read Time: 10 mins

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Los formularios para reservas pueden servir para muchos propósitos en un sitio web. Puedes usarlos para permitir que tus visitantes reserven una habitación de hotel o boletos para un evento popular. También pueden ser usados para otras cosas, como reservas de citas con clientes.

Son una excelente manera para que las personas simplemente te den toda la información necesaria sobre su estadía o visita y para verificar la disponibilidad de una fecha en particular. Esto les ahorra muchas molestias a ti y a tus clientes.

Hay muchos complementos y secuencias de comandos disponibles para que agregues formularios de reservas a tu sitio web. La elección correcta para tu situación depende de las características que estés buscando, además de factores como su facilidad de uso y tu presupuesto. En este tutorial te mostraré cómo crear un formulario de reservas para tu sitio web usando la secuencia de comandos Smart Forms (Formularios inteligentes) de CodeCanyon.

¿Por qué usar Smart Forms?

Antes de que comencemos a profundizar en el tema, me gustaría explicar por qué elegí Smart Forms para esta tarea.

Una de las primeras cosas que notarás en la página de la descripción de Smart Forms es que ofrece muchas funciones y te permite crear todo tipo de formularios. Hay buenas probabilidades de que el sitio web que estás creando vaya a necesitar al menos un par de tipos diferentes de formularios, por ejemplo un formulario de contacto o uno de comentarios. Con Smart Forms podrás crear todo esto en muy poco tiempo.

También obtienes muchas opciones en cuanto a personalización y herramientas. La secuencia de comandos se actualiza periódicamente y sigue recibiendo nuevas funciones. También ofrece un gran número de plantillas de inicio con formularios diferentes en tres estilos y esquemas de colores únicos. De esta manera puedes estar seguro de que cualquier formulario que generes combinará perfectamente con el resto de tu página web.

Lo que estaremos creando

Generemos el front-end de un formulario de reservas usando Smart Forms. Crearemos un formulario para reservar habitaciones de hotel. Los mismos principios aplicarán para la creación de un formulario de reservas para un evento o cualquier otro tipo de formulario. Solo tienes que hacer los cambios apropiados en los campos de entrada.

Esto es lo que estaremos creando:

Room reservation formRoom reservation formRoom reservation form

Comenzando

Si aún no lo has hecho, el primer paso sería comprar la secuencia de comandos de CodeCanyon. Podrás descargar los archivos después de que compres la secuencia de comandos, y también tendrás derecho a recibir actualizaciones gratuitas de por vida y soporte durante 6 meses.

Después de extraer el archivo .zip descargado, notarás que ya contiene muchas plantillas para todo, desde comentarios simples y formularios de contacto hasta formularios de múltiples pasos. Simplemente puedes comenzar a usar cualquiera de estas plantillas en tus proyectos y estar listo en diez o quince minutos.

Para ayudarte a comprender todos los fundamentos, vamos a crear nuestro formulario de reservas desde cero.

Creando el formulario de reservas

El marcado de la página del formulario de reservas debería verse más o menos así al principio.

Smart Forms depende de Font Awesome para añadir todos los iconos al formulario, por lo que tienes que cargar ambos archivos CSS.

Ahora pasaremos al contenido de nuestro formulario de reservas. El framework Smart Forms divide el formulario en tres secciones: el encabezado, el cuerpo y el pie del formulario.

La sección del encabezado del formulario en la parte superior se usa para mostrar el título del formulario de manera presentable. Para un formulario de reserva puedes decir algo como Reserva una habitación en línea o Haz reservas en minutos.

El cuerpo del encabezado contendrá muchos elementos que los visitantes deben rellenar. Puedes solicitar cualquier información relevante aquí, como el número de huéspedes adultos y el número de niños que los acompañan. De manera similar, puedes solicitar su período de estadía, información de contacto y otros detalles necesarios.

La sección del pie del formulario contiene los botones para enviar o cancelar el formulario. Se muestra de manera prominente en la parte inferior del mismo.

Agrega el texto repetitivo de Smart Forms

Este es el marcado para el formulario que necesitamos añadir dentro del cuerpo de nuestra página web para mostrar nuestro formulario de reserva.

Con todo el marcado que hemos añadido a nuestra página hasta ahora, deberías obtener algo similar a lo que aparece en la siguiente imagen.

Booking Form Header and FooterBooking Form Header and FooterBooking Form Header and Footer

Construyendo los componentes del formulario

Ahora vamos a agregar los verdaderos elementos al formulario de reservas. Este es el marcado que necesitas para hacer eso. Irá dentro de la etiqueta div con la clase form-body.

Con todo el marcado añadido al formulario, ahora deberá verse como el de la imagen mostrada a continuación.

Complete Booking FormComplete Booking FormComplete Booking Form

Quizá parezca mucho código ahora, pero puedes copiar la mayor parte de diferentes plantillas de inicio. Después de eso, simplemente necesitas hacer pequeños cambios al marcado para personalizarlo. Por ejemplo, puedes cambiar fácilmente la clase de los iconos de Font Awesome para lograr una representación más precisa de los campos de entrada.

Es importante recordar que debes tener cuidado al realizar cambios en algunos de los atributos de los elementos del formulario, ya que esto afectará la apariencia o el comportamiento general del formulario. Por ejemplo, puedes cambiar el ancho de elementos diferentes cambiando las clases colm. Cuando dos elementos de entrada consecutivos tienen las clases colm8 y colm4 sus anchos estarían en la proporción 2:1. Si al sumar los dígitos no dan 12 como resultado, también verás un espacio en blanco en esa fila.

Cada vez que cambies el valor del atributo name de un campo en el front-end, asegúrate de cambiar los valores correspondientes en los archivos PHP del back-end. De esta manera no perderás información del formulario que haya sido introducida por los usuarios.

Agregando validación a nuestro formulario de reservas

El framework Smart Forms se basa en los fundamentos de jQuery y en muchos otros complementos relacionados con jQuery para proporcionarte diferentes funciones, como un selector de mes y hora o la capacidad de arrastrar y soltar archivos. Hay un total de 22 archivos JavaScript diferentes que puedes usar para mejorar la funcionalidad del formulario.

Asegúrate de incluir solamente los archivos necesarios para que tu formulario particular funcione. La función de cada uno de estos archivos se menciona en la documentación. En nuestro caso, vamos a necesitar incluir el archivo jQuery principal, el archivo jQuery de la interfaz de usuario y archivos para la validación de formularios.

Simplemente puedes añadir el siguiente código a tu página web para incluir todos los archivos JavaScript. Puedes colocarlo ya sea en el encabezado del documento o justo antes del final del cuerpo.

Una vez que hayas añadido los archivos, necesitas agregar un código que pueda comenzar el proceso de validación o agregar otros elementos como un selector de rango de fechas a la interfaz de usuario del formulario. Este es el código que necesitas añadir.

Deberás reemplazar booking-form con el id que has establecido para tu formulario y éste automáticamente comenzará a validar los campos. La siguiente imagen muestra la manera en la que aparecen los mensajes de error de forma predeterminada después de iniciar la validación.

Form validation error exampleForm validation error exampleForm validation error example

Puedes enviar un par de opciones al inicializar los selectores de fecha. Estos valores determinarán la interfaz de usuario del calendario, como la cantidad de meses que se mostrarán o la fecha a partir de la cual se desplegarán los calendarios. Por ejemplo, establecer el valor de defaultDate en +100w abrirá los calendarios 100 semanas en el futuro.

Una cosa más que vale la pena notar es que después de que hayas seleccionado una fecha, el calendario de registro de llegada establece la fecha mínima para el calendario de registro de salida usando el valor de la fecha seleccionada. Esto se hace mediante la función de devolución de llamada al evento onClose. El calendario de registro de salida hace algo similar, pero establece la fecha máxima del calendario de registro de llegada.

Date picker calendar UIDate picker calendar UIDate picker calendar UI

Consideraciones finales

En este tutorial aprendimos cómo crear un formulario para reservas con la secuencia de comandos Smart Forms disponible en CodeCanyon. Durante el proceso cubrimos algunos conceptos básicos para ayudarte a comenzar rápidamente y crear tus propios formularios únicos. Como puedes ver, es muy sencillo crear formularios atractivos con validación de entrada y otras mejoras utilizando Smart Forms.

Puedes crear mucho más que solo formularios de reserva con el framework Smart Forms. El proceso de creación del marcado y la adición de funcionalidad con JavaScript será similar a lo que hemos cubierto aquí. Si alguna vez te sientes estancado, la detallada documentación te será de ayuda. También obtienes acceso a soporte gratuito durante seis meses, por lo que será muy sencillo aprender a hacer que un formulario funcione.

Mi consejo sería que comenzaras haciendo pequeños cambios a las plantillas de inicio proporcionadas en el archivo de la descarga y luego comenzar a crear formularios personalizados desde cero.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.