Buscador interactivo de clubes de golf y flujo de inscripción
Una campaña estacional necesitaba un único flujo de inscripción para varios clubes, cada uno con reglas de disponibilidad fijadas por el cliente, de modo que cada lead llegara al club correcto con el siguiente paso correcto.
- Periodo
- 2024
- Contexto
- Trabajo profesional
- Cliente
- No revelado
Contexto
Una campaña estacional de captación necesitaba un único flujo de inscripción para varios clubes de golf participantes. Los usuarios tenían que poder encontrar un club adecuado, enviar sus datos y entender los siguientes pasos para concertar su primera clase.
Los clubes participantes no funcionaban todos igual. Algunos ofrecían días y horas predefinidos, otros ofrecían horarios flexibles y otros necesitaban contactar directamente con el usuario después del envío. La experiencia tenía por tanto que adaptarse a cada club sin dejar de ser coherente para el usuario.
El cliente definía esas reglas de horarios y la disponibilidad de cada club, y fijaba otras nuevas a medida que avanzaban las campañas. Mi parte consistió en implementar esa lógica y adaptar el flujo a las reglas conforme cambiaban.
- Plataforma
- WordPress · Gravity Forms
- Flujo
- Inscripción en dos pasos
- Selección
- Mapa interactivo
- Horarios
- Estados por club
El reto
El principal reto era mantener sincronizados la selección en el mapa, el estado de Gravity Forms, la disponibilidad propia de cada club y el comportamiento de las notificaciones.
Elegir un club podía cambiar qué controles de horario aparecían, qué información se guardaba con el envío y qué vía de confirmación recibía el usuario. El flujo también tenía que seguir siendo utilizable cuando un club tenía disponibilidad fija, horarios flexibles, ambas opciones o ningún horario predefinido.
Mi responsabilidad
Experiencia del formulario
- Construí el formulario de inscripción en dos pasos en Gravity Forms, con la interfaz, el comportamiento responsive y versiones separadas en español y catalán.
Buscador de clubes interactivo
- Integré la API de JavaScript de Google Maps con navegación por provincias, marcadores de clubes, ventanas de información y selección de club desde el mapa.
Horarios dinámicos
- Conecté cada club seleccionado con su configuración de disponibilidad para que el formulario pudiera mostrar horarios fijos, horarios flexibles o un estado de contacto directo.
Notificaciones y entrega
- Configuré notificaciones condicionales de Gravity Forms para usuarios y clubes seleccionados, y puse en marcha el envío de correo autenticado mediante WP Mail SMTP.
Solución
Construí la experiencia desde cero en WordPress con Gravity Forms y la API de JavaScript de Google Maps.
El primer paso recoge los datos de contacto del usuario. En el segundo, los usuarios pueden filtrar los clubes participantes por provincia o navegar directamente por el mapa. Cada marcador ofrece información básica del club, y al seleccionar uno se conecta esa ubicación con el resto del formulario.
A partir de ahí, la interfaz se adapta al club seleccionado. Los clubes con disponibilidad predefinida muestran opciones de día y hora, los clubes flexibles permiten al usuario solicitar un horario alternativo y los clubes sin disponibilidad configurada recurren a un recorrido de contacto directo.
El club seleccionado y la información de horarios viajan después con el envío y determinan el flujo de notificaciones que se utiliza una vez completado el formulario.
Enfoque técnico
Recoger
Recoger los datos personales del usuario en el primer paso del recorrido de Gravity Forms.
Localizar
Permitir a los usuarios acotar el mapa por provincia sin perder la navegación directa por el mapa.
Seleccionar
Usar marcadores y ventanas de información de Google Maps para explorar los clubes y conectar la ubicación seleccionada con el formulario.
Resolver la disponibilidad
Leer la configuración del club seleccionado y determinar qué estado de horarios debe mostrarse.
Programar
Generar los días y horas disponibles cuando existen, ofrecer horarios flexibles donde se admiten o recurrir al contacto directo.
Notificar
Dirigir el envío al club seleccionado y mandar al usuario la confirmación adecuada según el recorrido de horarios completado.
El sistema
- Elige qué llega para ejecutarlo.
Los datos personales recogidos en el primer paso llevan a un filtro por provincia y a un mapa interactivo. Elegir un club en el mapa alimenta la lógica de disponibilidad, que lee la configuración de ese club y la resuelve en uno de tres estados de la interfaz. Un club con disponibilidad predefinida muestra días y horas; un club con horarios flexibles permite al usuario solicitar una alternativa; un club con ninguna de las dos opciones recurre a contactar con el usuario después del envío. Los tres caminos confluyen en el mismo envío, que después enruta las notificaciones adecuadas al club y al usuario.
Estados de la interfaz
El club que elige el usuario decide lo que le pregunta el resto del formulario. Aquí se muestran dos de los tres estados de horarios.
La misma lógica admite también clubes sin opciones de horario predefinidas, en los que la interfaz explica que el club contactará con el usuario después del envío.
Disponibilidad programadaFig. 2 — Los clubes con disponibilidad predefinida muestran directamente en el formulario los días y las franjas horarias disponibles. Disponibilidad flexibleFig. 3 — Los clubes con horarios flexibles permiten al usuario continuar sin comprometerse con una hora predefinida y acordar el horario final directamente con el club.
Flujo de notificaciones
Completar el formulario no desencadena una única confirmación genérica. El club seleccionado y el estado de horarios determinan lo que ocurre a continuación.
El club correspondiente recibe la información del lead enviado, mientras que el usuario recibe una confirmación adaptada al recorrido que ha completado. Esto incluye mensajes distintos para horarios predefinidos, horarios flexibles y clubes que acuerdan la disponibilidad después del envío.
También configuré WP Mail SMTP para que el proyecto pudiera enviar a través de una cuenta de correo autenticada en lugar de depender de la configuración de correo por defecto de WordPress.
Un envío completado se abre en dos rutas independientes. El club seleccionado determina qué notificación al club se envía y quién la recibe. Por separado, el estado de horarios que el usuario completó determina cuál de varias confirmaciones al usuario se envía, de modo que un horario predefinido, una solicitud flexible y un club que acuerda la disponibilidad después producen cada uno un mensaje distinto.
Resultado
El buscador de clubes y el flujo de inscripción se desplegaron en producción y se siguen usando en campañas estacionales.
La implementación sigue activa y se actualiza a medida que cambian los clubes participantes y su disponibilidad.
Lecciones aprendidas
Este proyecto fue mi primera experiencia práctica construyendo una integración interactiva con Google Maps. Aprendí a trabajar con coordenadas, marcadores y ventanas de información, y a conectar una interacción del mapa con el estado de un sistema de formularios independiente.
La lógica de horarios también me enseñó a diseñar un único recorrido en torno a configuraciones de fondo distintas. En lugar de obligar a todos los clubes a seguir el mismo camino, el formulario adapta su interfaz según la disponibilidad asociada a la ubicación seleccionada.
También adquirí experiencia con las notificaciones condicionales de Gravity Forms y el envío de correo en WordPress. Configurar un SMTP autenticado me resultó especialmente útil porque me hizo conocer los problemas de entregabilidad que pueden aparecer cuando los formularios en producción dependen de la configuración de correo por defecto de WordPress.
Tecnologías
Más de mi trabajo
Todos los proyectos- 01 · Trabajo para clientesDatos de reservas de varios hoteles, consolidados para informesLos datos de reservas de doce hoteles dependían de listas mensuales revisadas a mano, así que el workflow incorpora las reservas de forma continua y mantiene un único conjunto de datos coherente e histórico para los informes de clientes.Ver proyecto
- 02 · Trabajo para clientesFormulario en dos pasos e integración con una APIUn formulario en dos pasos tenía que comprobar la elegibilidad de un vehículo en un servicio externo, convertir cada respuesta en un estado de resultado claro y llevar la atribución de campaña hasta el envío.Ver proyecto
- 03 · Trabajo para clientesReconstrucción en WordPress y sistema de contenido estructuradoUn nuevo sitio WordPress construido para que un equipo no técnico pueda publicar artículos, ebooks y webinars mediante contenido estructurado, con formularios de captación conectados al CRM que el cliente ya usaba.Ver proyecto
Abierto a puestos de integración, automatización e implementación técnica.
CV
Un resumen de mi experiencia y mi trabajo.
Email
La mejor forma de escribirme sobre un puesto.
LinkedIn
Experiencia, trayectoria y novedades profesionales.
GitHub
Código seleccionado, experimentos y trabajo técnico.