Ir al contenido

Formularios de reserva modernos

Este artículo explica cómo crear, personalizar y publicar los formularios de reserva de búsqueda, servicios, personal y etiquetas de Bookly.

  • Formulario de búsqueda: los clientes eligen primero una fecha y luego ven los servicios y el personal disponibles. Ver demo.
  • Formulario de servicios: los clientes exploran los servicios en una vista de catálogo. Ver demo.
  • Formulario de personal: los clientes eligen primero un miembro del personal. Ver demo.
  • Formulario de etiquetas: los clientes filtran los servicios mediante etiquetas en uno o varios pasos de filtrado.

Para ayudarte a elegir un formulario, consulta Elegir un formulario de reserva. Para reservar mediante una conversación en el chat, consulta Formulario de reserva de AI Assistant.

Bookly también incluye un Formulario de cancelación para cancelar citas y un Formulario de pago para pagar mediante un enlace directo. Su configuración se explica por separado en Formulario de cancelación y Formulario de pago.

Configura tus servicios, asígnalos a empleados y configura sus horarios de trabajo. Estos ajustes determinan qué pueden reservar los clientes y cuándo.

Para un formulario de etiquetas, asigna también etiquetas a tus servicios en Bookly > Servicios. Consulta Formulario de etiquetas más abajo.

  1. Ve a Bookly > Apariencia.
  2. Elige Formulario de búsqueda, Formulario de servicios, Formulario de personal o Formulario de etiquetas y haz clic en Añadir nuevo formulario.
  3. Haz clic en un elemento de la vista previa para editar su texto o sus ajustes en el panel de la derecha. Usa las pestañas situadas encima de la vista previa para cambiar entre los pasos de reserva.
  4. Abre el menú de tres puntos del editor del formulario y elige Configuración para definir el título y la apariencia del formulario.
  5. Haz clic en Guardar. Puedes volver al editor más tarde para modificar los ajustes que se describen a continuación.

Elige un tipo de formulario en Bookly > Apariencia

  1. Después de guardar el formulario, haz clic en Anterior para volver a la lista de formularios.
  2. Busca la tarjeta de tu formulario y copia su shortcode desde el menú de la tarjeta.
  3. Añade el shortcode a una página o entrada de WordPress. En el editor de bloques de WordPress, usa un bloque Shortcode.
  4. Previsualiza la página y publícala o actualízala cuando el formulario esté listo.

Copia el shortcode de un formulario guardado desde su tarjeta en Bookly > Apariencia

Por ejemplo, un shortcode puede ser [bookly-search-form my-form] o [bookly-services-form my-form-413]. Copia el shortcode generado para tu formulario, en lugar de uno de estos ejemplos.

El Slug es el identificador del formulario, como my-form en el primer ejemplo. Puedes encontrarlo en Configuración del formulario después de guardarlo.

Puedes crear formularios separados para servicios o empleados concretos y colocarlos en distintas páginas. Todas las citas creadas mediante estos formularios aparecen en el mismo Calendario de Bookly.

Para conocer otras formas de añadir un formulario a una página, consulta Publicar el formulario de reserva.

Abre tu formulario en Bookly > Apariencia para personalizarlo. Los ejemplos siguientes muestran principalmente el formulario de búsqueda; los pasos y controles disponibles dependen del tipo de formulario.

Haz clic en el texto, campo u otro elemento que quieras cambiar en la vista previa y edita sus ajustes en el panel de la derecha.

Selecciona un texto en la vista previa del formulario para editarlo en el panel de la derecha

En un campo desplegable Servicio o Personal, puedes establecer un valor predeterminado y elegir si se muestra el campo. Para ocultarlo, elige un valor predeterminado y desmarca Mostrar.

Abre el menú de tres puntos del editor del formulario y selecciona Configuración. Aquí puedes editar el Título del formulario, elegir el Color principal y aplicar un tema predefinido. Para usar un tema, selecciónalo, personaliza los colores si lo necesitas y haz clic en Aplicar tema.

En todos los formularios de reserva modernos, los ajustes de apariencia también te permiten:

  • Activar una cuadrícula de tarjetas adaptable.
  • Hacer transparente el fondo del formulario.
  • Cambiar la posición de los filtros y el calendario.
  • Ajustar el redondeo de las esquinas y las sombras de las tarjetas.
  • Ocultar los bordes del formulario.

Título del formulario, slug, tema y ajustes de apariencia en el editor del formulario de búsqueda

Para personalizar más el estilo, abre el mismo menú de tres puntos y selecciona CSS personalizado.

Haz clic en Guardar después de realizar cambios.

En Configuración, usa Vista inicial para elegir cómo abren el formulario los clientes:

  • Formulario: el formulario se muestra directamente en la página.
  • Botón: el formulario se abre en una ventana modal cuando el cliente hace clic en un botón. Define el texto del botón en Título del botón.

Haz clic en el área del calendario de la vista previa para elegir cómo se muestran las fechas:

  • Mostrar fechas según programación: muestra los días laborables del personal, incluso si ya no quedan franjas horarias disponibles ese día.
  • Desactivar fechas sin franjas horarias disponibles: muestra en gris los días sin franjas horarias disponibles. En este modo, el tiempo de carga depende del número de citas, empleados, servicios y ubicaciones.

Ajustes de disponibilidad del calendario en el editor del formulario de búsqueda

Apariencia y contenido de las tarjetas de servicio

Sección titulada «Apariencia y contenido de las tarjetas de servicio»

En el formulario de búsqueda, haz clic en la tarjeta de un servicio en la vista previa para personalizarla:

  • Ancho: ajusta el ancho de la tarjeta con el control deslizante.
  • Altura del encabezado: ajusta la altura del área de la imagen del servicio.
  • Mostrar insignia: muestra el nombre del empleado en la parte superior de la tarjeta.
  • Contenido de tarjeta: elige qué propiedades mostrar y arrástralas para colocarlas en el orden que quieras.

Ajustes de tamaño, insignia y contenido de las tarjetas de servicio

En el formulario de búsqueda, haz clic en la tarjeta de un servicio y busca Servicios ocultos en el panel de la derecha. Selecciona los servicios que quieras ocultar en este formulario.

Servicios ocultos y Modo de visualización de tarjetas en el editor del formulario de búsqueda

En el mismo panel, Modo de visualización de tarjetas controla qué tarjetas muestra el formulario de búsqueda:

  • Mostrar tarjetas solo con franjas horarias: muestra solo las combinaciones de servicio, personal y ubicación que tienen franjas horarias disponibles para el día seleccionado.
  • Mostrar todas las tarjetas disponibles: también muestra tarjetas sin franjas horarias disponibles. En esas tarjetas, los clientes ven el mensaje «No hay franjas horarias disponibles».

En el último paso del proceso de reserva, activa Añadir al calendario para que los clientes puedan añadir sus citas a Google Calendar, Outlook, Apple Calendar o Yahoo Calendar.

Opción Añadir al calendario en el último paso de reserva

Formularios específicos por categoría, personal o servicio

Sección titulada «Formularios específicos por categoría, personal o servicio»

En los formularios de Servicios y Personal, puedes elegir qué categorías, servicios o empleados ven los clientes:

  1. Abre el formulario en Bookly > Apariencia.
  2. Selecciona el paso correspondiente y haz clic en una tarjeta de categoría, servicio o personal en la vista previa.
  3. En el panel de la derecha, selecciona Personalizado y elige los elementos que quieras mostrar.
  4. Haz clic en Guardar.

Selecciona Personalizado para mostrar solo las categorías elegidas en un formulario de servicios

Ocultar los pasos de Categorías o Servicios

Sección titulada «Ocultar los pasos de Categorías o Servicios»

En los formularios que tienen estos pasos, abre el menú de tres puntos y selecciona Configuración. Activa Ocultar paso de categorías u Ocultar paso de servicios, según necesites, y haz clic en Guardar.

Abre Configuración desde el menú del editor del formulario Ocultar paso de categorías y Ocultar paso de servicios en la configuración del formulario

Mira cómo configurar un formulario de servicios:

Un formulario de etiquetas permite a los clientes filtrar la lista de servicios mediante uno o varios pasos de filtrado. Asigna etiquetas a tus servicios en Bookly > Servicios y elige qué etiquetas ofrecer en cada paso del formulario.

Por ejemplo, puedes ofrecer Peluquería, Uñas y Masaje en el primer paso, y Completo y Exprés en el segundo. Si un cliente selecciona Masaje y Exprés, el formulario muestra solo los servicios que tienen ambas etiquetas.

Estos pasos de filtrado se basan en las etiquetas que asignas a los servicios; no necesitas crear una categoría para cada combinación.

Asigna etiquetas a los servicios en Bookly > Servicios

  1. En Bookly > Apariencia, elige Formulario de etiquetas y haz clic en Añadir nuevo formulario.
  2. En la pestaña Etiquetas, haz clic en Añadir subsección.
  3. Selecciona las etiquetas que quieras mostrar en este paso de filtrado.
  4. Añade más subsecciones si necesitas pasos de filtrado adicionales. Para quitar una etiqueta de un paso, haz clic en ella dentro de la subsección.
  5. Haz clic en Guardar.

Formulario de etiquetas con filtros separados para el tipo y la duración del servicio

Configura los siguientes ajustes para los pasos de selección de etiquetas:

  • Título de la sección: el texto que se muestra a los clientes en el paso.
  • Permitir omisión: permite a los clientes omitir el paso de selección de etiquetas.
  • Omitir título del botón: el texto del botón de omisión.
  • Ancho / Altura del encabezado / Peso corporal: el tamaño de las tarjetas de etiquetas.

Configura el título, la descripción y la imagen de cada etiqueta en Bookly > Servicios.

Cuando el formulario esté listo, guárdalo y añade su shortcode a una página.

Antes de compartir la página con los clientes:

  1. Ábrela como visitante y comprueba el formulario tanto en un ordenador como en un teléfono.
  2. Comprueba que se muestran los servicios y empleados previstos y que los campos ocultos usan los valores predeterminados esperados.
  3. Completa una reserva de prueba hasta el último paso.
  4. Comprueba que la cita aparece correctamente en el Calendario de Bookly.