Cómo crear un formulario de reserva de WordPress para múltiples ubicaciones

Gestionar reservas en múltiples ubicaciones puede ser una pesadilla sin las herramientas adecuadas, especialmente cuando los clientes necesitan ver dónde se encuentra antes de reservar.

Con WPForms y el complemento Geolocation Addon, puedes crear un formulario de reserva para múltiples ubicaciones en WordPress que muestre todas tus ubicaciones en un mapa interactivo y permita a los visitantes elegir su lugar preferido.

Esta guía le muestra cómo crear un formulario de reserva que muestre varias oficinas, centros de servicio o lugares de eventos en un solo mapa, lo que facilita a los clientes encontrar y reservar en su ubicación más cercana.

¡Crea ahora tu formulario WordPress para múltiples ubicaciones! 🙂

Cómo crear un formulario de reserva de WordPress para múltiples ubicaciones

Para crear un formulario de reserva con múltiples ubicaciones en WordPress, necesitarás un plugin que realmente pueda hacer el trabajo pesado, y WPForms es el que siempre recomiendo. Sigue los pasos que se indican a continuación para empezar:

Paso 1: Instale el plugin WPForms Pro

WPForms es una excelente herramienta para crear formularios, como formularios de contacto y formularios de reserva. Cuenta con más de 2100 plantillas de formularios de WordPress que puedes utilizar.

Lo que más me gusta de WPForms es cómo combina potentes funciones de formularios con herramientas de geolocalización integradas. No tienes que perder el tiempo combinando varios plugins o escribiendo código personalizado.

Para crear un formulario de reserva con múltiples ubicaciones en WordPress, necesitarás WPForms Pro, que incluye el complemento Geolocation Addon y el campo Map Field que necesitarás para este tutorial.

Para empezar, compre la licencia Pro. Luego, instale WPForms en su sitio web. Si necesitas ayuda, sigue estas instrucciones sobre cómo añadir un plugin a WordPress.

Actualice ahora a WPForms Pro 🙂 ...

Paso 2: Activar el complemento de geolocalización

Antes de poder añadir un mapa interactivo a tu formulario de reserva, tendrás que instalar el complemento de geolocalización. Este es el que activa el campo Mapa.

Para empezar, dirígete a WPForms » Complementos en tu panel de control de WordPress. En la barra de búsqueda, escribe «Geolocalización» para encontrar rápidamente el complemento.

Una vez que aparezca, haz clic en «Instalar complemento». La instalación suele tardar solo unos segundos. Después, haz clic en «Activar» para habilitarlo en tu sitio web.

Ahora bien, aquí viene la parte que a veces confunde a la gente: el complemento de geolocalización requiere una clave API de Google Places o Mapbox para que el campo Mapa funcione correctamente.

Sé que suena técnico, pero WPForms tiene una guía paso a paso que lo hace mucho más fácil de lo que parece. Para obtener instrucciones completas de configuración, consulta la documentación del complemento Geolocation Addon.

Te guía a través del proceso de habilitar las API necesarias para Google Places o Mapbox y, a continuación, introducir esa clave en WPForms » Ajustes » Geolocalización.

Una vez que hayas añadido tu clave API y guardado la configuración, ya está todo listo. El complemento de geolocalización ya está listo para usar y puedes empezar a añadir mapas interactivos a tus formularios.

Paso 3: Crear un nuevo formulario de reserva

Ahora que el complemento de geolocalización está activo, es hora de crear el formulario de reserva. Dirígete a WPForms » Añadir nuevo en tu panel de control de WordPress para abrir el creador de formularios.

Aquí verás varias opciones. Si quieres ahorrar tiempo, puedes elegir cualquiera de nuestras más de 2100 plantillas de formularios de WordPress, como la plantilla de formulario de reserva de citas, y hacer clic en «Usar plantilla».

Estas plantillas ya incluyen campos comunes para reservas, por lo que no tendrás que empezar desde cero. Sin embargo, si prefieres crear un formulario desde cero, elige Formulario en blanco.

Otra opción si no quieres configurar manualmente cada campo pero tienes requisitos personalizados es dejar que el generador de formularios con IA de WPForms lo haga por ti.

Simplemente pasa el cursor sobre el botón morado Generar con IA y haz clic en Generar formulario. Accederás a la pantalla del generador de formularios con IA. Aquí es donde describes qué tipo de formulario deseas.

Puedes escribir tu propio mensaje o elegir entre las sugerencias que aparecen a la izquierda. Una vez que pulses «Generar», la IA tardará unos segundos en crear tu formulario.

Desde allí, puede cambiar el diseño del formulario, añadir o eliminar campos nuevos y realizar otras personalizaciones. Una vez que esté satisfecho con su formulario, simplemente pulse el botón Guardar.

Paso 4: Añade el campo Mapa a tu formulario

Ahora viene la parte divertida: añadir el mapa interactivo para que los visitantes puedan ver todas tus ubicaciones de un vistazo y elegir la que más les convenga.

En el generador de formularios, desplázate hacia abajo hasta la sección Campos avanzados, situada en la parte izquierda. Allí verás el campo Mapa. Arrástralo a la vista previa del formulario, situada a la derecha.

Normalmente coloco el mapa cerca de la parte superior del formulario para que los usuarios puedan ver sus opciones de inmediato, pero puedes colocarlo en cualquier lugar que se adapte a tu flujo.

Una vez que el campo Mapa esté en su lugar, haz clic en él para abrir el panel Opciones de campo a la izquierda. Desplázate hacia abajo hasta que veas la sección Ubicaciones. Aquí es donde añadirás todas tus oficinas, centros de servicio o lugares de citas.

En el campo Dirección, empieza a escribir la dirección de tu primera ubicación. A medida que escribas, aparecerán sugerencias de autocompletado. Haz clic en la correcta para seleccionarla. Esto garantiza que la ubicación se fije con precisión en el mapa.

A continuación, asigna un nombre personalizado a esta ubicación. Algo como «Oficina del centro» o «Centro de servicios principal» sería adecuado. Este nombre aparecerá cuando los visitantes hagan clic en el marcador del mapa, así que procura que sea claro y reconocible.

También puede añadir una descripción si desea incluir detalles adicionales, como el horario de atención, la información de contacto o notas especiales. Esto me ha resultado útil cuando las ubicaciones tienen diferentes servicios u horarios.

Para añadir más ubicaciones, haz clic en el icono más (+) situado justo debajo de tu primera ubicación. Aparecerá un nuevo conjunto de campos. Repite el mismo proceso: escribe la dirección, selecciónala en el autocompletado, añade un nombre y rellena la descripción si es necesario.

Sigue añadiendo ubicaciones hasta que hayas incluido todas las oficinas o centros de servicio que deseas en el mapa. No hay ningún límite estricto, por lo que tanto si tienes cinco ubicaciones como quince, puedes añadirlas todas.

Una vez que hayas terminado, tu mapa mostrará automáticamente todas las ubicaciones con marcadores individuales. Los visitantes podrán hacer clic en cada uno de ellos para ver el nombre y la descripción que hayas añadido.

Personalizar marcadores de mapa para cada ubicación

Ahora que ya has añadido tus ubicaciones, puedes hacer que cada una destaque personalizando los marcadores del mapa. Aquí es donde puedes añadir personalidad a tu mapa y ayudar a los visitantes a distinguir tus ubicaciones de un vistazo.

En la sección Ubicaciones, dentro de Opciones de campo, verás un menú desplegable de iconos junto a cada ubicación que hayas añadido. Haz clic en el menú desplegable y verás dos opciones: Icono o Imagen.

Si seleccionas Icon, podrás elegir entre cientos de iconos de Font Awesome. Yo suelo optar por marcadores sencillos, como chinchetas de mapa o iconos de edificios, pero hay opciones como tazas de café, hospitales o maletines si buscas algo más específico.

Justo al lado del campo del icono, verás un selector de color. Haz clic en él para cambiar el color del marcador. Esto me resulta especialmente útil cuando hay diferentes tipos de ubicaciones. Por ejemplo, podrías usar el azul para las oficinas, el verde para las tiendas minoristas y el rojo para los recintos de eventos.

Si prefieres utilizar tu propio gráfico, selecciona Imagen y sube un marcador personalizado. Esto funciona muy bien si quieres que coincida con tu marca o utilizar algo que realmente represente a tu negocio.

También puedes ajustar el tamaño del marcador utilizando el menú desplegable Tamaño. Normalmente lo configuro en Mediano o Grande para que sean fáciles de localizar en el mapa, especialmente si se muestran muchas ubicaciones a la vez.

Una vez que hayas personalizado todos tus marcadores, tu mapa tendrá un aspecto impecable y será fácil de navegar. Los visitantes podrán ver exactamente dónde se encuentra cada ubicación y qué tipo de servicio o instalación representa.

Habilitar la selección de ubicación para las reservas

Ahora que ya ha configurado su mapa con varias ubicaciones, es el momento de hacer que esas ubicaciones sean seleccionables para que los visitantes puedan elegir dónde quieren reservar.

En el panel de opciones del campo Mapa, busca la opción Mostrar lista de ubicaciones y actívala. Esto mostrará todas tus direcciones de ubicación en una lista ordenada justo debajo del mapa.

Inmediatamente verás que debajo aparece algo útil: la opción Permitir selección de ubicación. (Esto solo aparece una vez que hayas añadido dos o más ubicaciones a tu mapa). Continúa y activa esa opción también.

Después de realizar estos cambios, esto es lo que ocurre en la interfaz. Ahora aparecen botones de radio junto a cada ubicación en la lista situada debajo del mapa.

Los visitantes pueden hacer clic en cualquier ubicación para seleccionarla como su lugar de reserva preferido. El mapa se actualiza para resaltar su elección, dejando muy claro hacia dónde se dirigirán.

Ahora, cuando alguien envía el formulario, la ubicación seleccionada se captura junto con todos los demás detalles de la reserva. Podrás ver exactamente qué oficina, centro de servicios o lugar han elegido.

Configurar los ajustes de visualización del mapa

Ahora vamos a perfeccionar el aspecto y el comportamiento de tu mapa. Este paso te permite controlar qué controles del mapa aparecen y cómo pueden interactuar con él los visitantes.

Para empezar, haz clic en la pestaña Avanzado en las opciones del campo Mapa. Aquí es donde realmente puedes personalizar la experiencia. En Configuración de presentación, verás botones para diferentes controles del mapa.

Si desea una interfaz más limpia, puede ocultar elementos como los controles de pantalla completa, tipo de mapa o Street View. A continuación, desplácese hacia abajo hasta Configuración interactiva. Aquí es donde decide cuánto control tienen los visitantes sobre el mapa.

Si quieres mantener las cosas sencillas y evitar desplazamientos o arrastres accidentales, puedes desactivar las opciones «Draggable» (Arrastrable) o «Scroll to Zoom» (Desplazarse para ampliar). Esto me ha resultado útil en formularios en los que no quieres que los usuarios se distraigan desplazándose por la pantalla.

Antes de continuar, asegúrate de habilitar la opción Mostrar miniatura en la entrada. Esto añade una pequeña vista previa del mapa a las entradas de tu formulario en el panel de control de WordPress, lo que facilita enormemente ver qué ubicación ha seleccionado alguien sin tener que abrir la entrada completa.

Paso 5: Configurar notificaciones y confirmaciones

Una vez que tu formulario de reserva para múltiples ubicaciones esté listo, dedica unos minutos a configurar las notificaciones y confirmaciones antes de publicarlo. Empieza por dirigirte a Configuración » Notificaciones en el generador de formularios.

De forma predeterminada, WPForms envía una notificación al correo electrónico de administrador de WordPress cada vez que alguien envía el formulario. Desde aquí puede editar la configuración predeterminada de las notificaciones, como el asunto, o cambiar los correos electrónicos de los destinatarios según sea necesario.

Siutiliza etiquetas inteligentes, también puede notificar a la dirección de correo electrónico del usuario cuando envíe un formulario, informándole de que lo ha recibido y de que se pondrá en contacto con él en breve.

Esto es especialmente cierto en el caso de los formularios con múltiples ubicaciones en WordPress. Si necesitas ayuda con este paso, consulta nuestra documentación sobrecómo configurar las notificaciones de formularios en WordPress.

Una vez hecho esto, simplemente navega aConfirmacionesen el menúConfiguraciónpara configurar las respuestas para los envíos de formularios exitosos. Aquí tienes tres opciones:

• Mensaje: muestra un sencillo mensaje de agradecimiento en la misma página. Lo utilizo cuando quiero que todo sea rápido y sencillo.
• Mostrar página: redirige a los visitantes a una página específica de tu sitio, como una página de confirmación detallada con los siguientes pasos o la información de contacto.
• Ir a URL (redireccionamiento): los envía a una URL externa, lo que resulta útil si utiliza un sistema de reservas de terceros o una página de destino personalizada.

Elige la que mejor se adapte a tu flujo de trabajo. Si eliges la opción de mensaje, puedes editar el texto predeterminado para que sea más específico, por ejemplo: «¡Gracias por reservar con nosotros! En breve te enviaremos un correo electrónico de confirmación a la dirección que nos has facilitado».

Para obtener ayuda con otros tipos de confirmación, consulte nuestra documentación sobrecómo configurar las confirmaciones de formularios.

Paso 6: Publica tu formulario de reserva para múltiples ubicaciones

Una vez que tu formulario de reserva para múltiples ubicaciones esté listo, es hora de colocarlo en tu sitio web para que los visitantes puedan utilizarlo. WPForms te permite añadir tus formularios en múltiples lugares de tu sitio web, incluyendo tus páginas, entradas de blog ywidgets de la barra lateral.

Haga clic en el botón Insertar situado en la parte superior del generador de formularios. Aparecerá una ventana emergente con dos opciones: puede crear una nueva página o añadir el formulario a una página existente.

Si estás creando una página dedicada a las reservas, haz clic en Crear nueva página. Dale a tu página un título como «Reservar una cita» o «Programar una visita» y, a continuación, haz clic en ¡Vamos!

WPForms abrirá el editor de bloques de WordPress con tu formulario ya integrado. Desde aquí, puedes añadir un texto introductorio encima del formulario, ajustar el diseño de la página o modificar un poco el estilo del formulario.

Simplemente haga clic en el área alrededor del formulario incrustado en el editor de páginas para abrir un nuevo panel a la derecha. Aquí encontrarás todas las opciones de estilo básicas y avanzadas para WPForms.

Para diseñar rápidamente tu formulario, puedes seleccionar un tema prediseñado en la sección Tema del formulario. En este ejemplo, estoy utilizando el tema Tranquil (que es uno de mis favoritos).

No dudes en probar otros temas; tienes muchas opciones. Si te gusta experimentar directamente, también puedes personalizar manualmente distintos elementos del formulario de forma más precisa.

Si el mapa se ve bien y los campos del formulario funcionan como se espera, publique la página. Su formulario de reserva para múltiples ubicaciones ya está activo y listo para comenzar a recopilar citas.

Preguntas frecuentes sobre cómo crear un formulario de reserva de WordPress para varias ubicaciones

Si estás configurando un formulario de reservas para varias ubicaciones en WordPress, es probable que tengas algunas preguntas. A continuación, respondo a las más habituales para ayudarte a que todo funcione correctamente.

¿Qué es un formulario de reserva para múltiples ubicaciones en WordPress?

Un formulario de reserva para múltiples ubicaciones permite a los visitantes elegir entre varias ubicaciones físicas a la hora de programar una cita o hacer una reserva. En lugar de crear formularios separados para cada oficina o lugar, puede utilizar un único formulario con un mapa interactivo que muestra todas sus ubicaciones a la vez.

Esto resulta especialmente útil si gestionas un negocio con múltiples centros de servicio, espacios para eventos o lugares de citas. Los visitantes pueden ver dónde se encuentra cada ubicación, elegir la que les resulte más conveniente y reservar en ese mismo momento.

¿Cómo ayuda el campo «Mapa» con los formularios de reserva?

El campo Mapa de WPForms muestra todas tus ubicaciones en un mapa interactivo dentro de tu formulario. Los visitantes pueden ampliar, desplazar y hacer clic en los marcadores para ver detalles sobre cada ubicación.

Una vez que seleccionan una ubicación, esa elección queda registrada en el formulario enviado. Puedes utilizarla para dirigir las reservas al equipo adecuado, enviar correos electrónicos de confirmación específicos para cada ubicación o simplemente mantener tus registros organizados.

¿Puedo personalizar los marcadores del mapa para cada ubicación?

Sí, puedes. Cuando añades ubicaciones al campo Mapa, cada una obtiene su propio marcador en el mapa.

Puede personalizar el título, la dirección y la descripción de cada marcador. Esto ayuda a los visitantes a comprender qué diferencia a cada ubicación (como la disponibilidad de estacionamiento, el horario o los servicios que ofrece).

¿Puedo enviar diferentes notificaciones en función de la ubicación seleccionada?

Por supuesto. Puedes configurar la lógica condicional en los ajustes de notificación de tu formulario para enviar diferentes correos electrónicos en función de la ubicación que seleccione el visitante.

Por ejemplo, si alguien reserva en tu oficina del centro, la notificación se envía a tu equipo del centro. Si elige la ubicación de la zona alta, se envía a ese equipo.

¿Pueden los clientes seleccionar varias ubicaciones en una sola reserva?

No con un solo campo Mapa. El campo Mapa está diseñado para que los visitantes elijan una ubicación por envío. Si su modelo de negocio requiere reservar varias ubicaciones a la vez, deberá utilizar campos desplegables o botones de opción independientes para cada selección.

¿Funciona el campo Mapa en dispositivos móviles?

Sí, funciona muy bien en dispositivos móviles. El mapa es totalmente responsivo, por lo que los visitantes pueden tocar, ampliar e interactuar con él igual que lo harían en un ordenador.

Lo he probado en teléfonos y tabletas, y la experiencia sigue siendo fluida. Tus visitantes no tendrán ningún problema para elegir una ubicación, independientemente del dispositivo que utilicen.

¿Puedo utilizar el campo Mapa con los formularios de pago?

Sí, puedes. El campo Mapa funciona junto con campos de pago como Stripe o PayPal Commerce.

Si cobras diferentes importes en función de la ubicación, puedes utilizar la lógica condicional para ajustar el total.

Por ejemplo, las citas en un lugar pueden ser más caras debido a que las instalaciones son de primera o los tiempos de servicio son más largos.

A continuación, características ocultas de WPForms que no conocías.

WPForms está repleto de herramientas y opciones que no son inmediatamente obvias pero que pueden mejorar significativamente su flujo de trabajo y los formularios que crea.

Echa un vistazo a nuestra guía para descubrir algunas de estas joyas ocultas y funciones que quizá hayan pasado desapercibidas para ti, pero que tienen el potencial de llevar tus formularios de WordPress al siguiente nivel.

Cree su formulario WordPress ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin más sencillo para crear formularios en WordPress. WPForms Pro incluye un montón de plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha ayudado, síguenos en Facebook y Twitter para más tutoriales y guías gratuitas sobre WordPress.