Ir al contenido

Formulario clásico (formulario de reserva paso a paso)

Este artículo explica cómo personalizar el formulario de reserva clásico paso a paso.

Si no estás seguro de qué formulario de reserva usar, consulta Tipos de formulario de reserva / Elige un formulario de reserva.

Cómo personalizar el formulario de reserva clásico

Sección titulada «Cómo personalizar el formulario de reserva clásico»

Puedes personalizar el diseño, los colores, las etiquetas, los campos y los textos de cada paso de tu formulario de reserva. Para editar el formulario:

  1. Ve a Bookly > Apariencia.

  2. Elige Formulario paso a paso.

  3. Ajusta la configuración del formulario en las pestañas disponibles.

  4. Haz clic en Guardar.

Usa el selector de color para ajustar los colores principales del formulario de reserva clásico y que combine con el diseño de tu sitio web.

Después de actualizar los colores, haz clic en Guardar.

Sección de apariencia en Bookly PRO Sección de apariencia en Bookly

Editar textos y añadir detalles de la reserva

Sección titulada «Editar textos y añadir detalles de la reserva»

Puedes editar el texto que se muestra en cada paso de la reserva.

Haz clic en el texto subrayado para abrir la ventana de edición. Escribe tu texto y añade códigos como {service_name}, {staff_name} o {total_price} para mostrar los detalles de la reserva de forma dinámica.

Empieza a escribir { y elige un código entre las sugerencias disponibles en el editor. Haz clic en Aplicar y luego en Guardar.

Ejemplo:

Has elegido reservar {service_name} con {staff_name} el {service_date} a las {service_time}.
El precio del servicio es {service_price}.
Indica tus datos en el siguiente formulario para continuar con la reserva.

Para consultar las descripciones de los códigos, ve a Todos los marcadores de posición. No todos los códigos de esa lista están disponibles en la sección Apariencia; consulta las sugerencias del editor para comprobar cuáles puedes insertar.

Personalizar la plantilla del formulario de reserva Formulario de reserva de Bookly

Usa bloques condicionales para mostrar texto solo cuando exista determinada información de la reserva.

El siguiente ejemplo muestra los extras seleccionados solo cuando los hay. El código {extras} requiere Service Extras Add-on.

{#if extras} Artículos adicionales: {extras}{/if}
Personalizar la plantilla del formulario de reserva Formulario de reserva de Bookly

Si utilizas add-ons que permiten varias citas en una misma sesión de reserva, usa un bloque repetido para mostrar los detalles de cada cita de la reserva. El contenido del bloque se repite una vez por cada cita.

Ejemplo:

{#each appointments as appointment}
Servicio: {appointment.service_name}
Miembro del personal: {appointment.staff_name}
Fecha y hora: {appointment.appointment_date} a las {appointment.appointment_time}
{/each}

Sección de apariencia de Bookly – configuración del formulario de reserva paso a paso

Formulario de reserva paso a paso en el frontend – paso de detalles

Si modificas o traduces los títulos de los botones, comprueba también la versión móvil del formulario. Abre Apariencia de Bookly en vista móvil, actualiza los textos de los botones de cada paso y guarda los cambios.

Para ocultar campos como Categoría, Servicio o Empleado, ajusta la configuración del bloque del formulario de reserva o del shortcode al añadir el formulario a una página. Si ocultas un campo obligatorio, selecciona un valor predeterminado para él.

Ocultar un paso de la reserva depende del paso y de tu configuración de Bookly. Por ejemplo, para ocultar el paso Pago, desactiva todos los métodos de pago, incluido el pago sin conexión, en Bookly Configuración > Pagos. Consulta ¿Cómo elimino el paso de pago del formulario de reserva?.

Más información: Publicar el formulario de reserva

¿Cómo cambio el color o el tamaño de fuente de un mensaje de advertencia?

¿Cómo oculto los campos de categoría, servicio o empleado en el formulario de reserva?

¿Cómo cambio el color del texto en el formulario de reserva de Bookly?

¿Cómo elimino el paso de pago del formulario de reserva?

El botón Siguiente no funciona en el formulario de reserva