Cómo añadir un selector de ubicación interactivo a cualquier formulario de WordPress

Imagínese esto: un colaborador visita el sitio web de una organización sin ánimo de lucro para donar abrigos de invierno. Está listo para entregarlos, pero el formulario solo muestra un menú desplegable con tres direcciones postales. No se incluye mapa ni contexto. Abre Google Maps en una nueva pestaña, pega cada dirección una por una, averigua cuál es la más cercana y luego vuelve para completar el formulario.

Algunos lo harán. La mayoría no…

Ahora imagine un mapa interactivo dentro del formulario. Los tres puntos de entrega están marcados con iconos personalizados, etiquetados como "Centro Comunitario Norte", "Biblioteca del Centro" e "Iglesia del Este". El usuario toca el más cercano, el marcador rebota para confirmar y su selección se registra de forma limpia en su entrada. Se hace en segundos y sin salir de la página.

¡Ese es el campo Mapa de WPForms en acción! Y aunque un formulario de reserva con selección de ubicación es probablemente el primer caso de uso que se le ocurra, está lejos de ser el único. Recogida en tienda, devoluciones de productos, registro de eventos, selección de área de servicio, inscripciones de voluntarios... cualquier formulario que implique la elección de una ubicación física mejora con él.

Permítame mostrarle cómo configurarlo, junto con múltiples formas de ponerlo en práctica.

Cómo añadir un selector de ubicación interactivo a cualquier formulario de WordPress

Lo que necesitarás

• WPForms Pro: el campo Mapa forma parte del complemento Geolocation, incluido en todos los planes Pro.
• Una clave API de Google Places: configuración gratuita; esta potencia el mapa y el autocompletado de direcciones.
• La última versión de WPForms instalada en su sitio de WordPress.

Si está en WPForms Lite, necesitará actualizar a Pro para acceder al complemento Geolocation. Si es nuevo en WPForms, Pro es el lugar para empezar.

Crea tu formulario de WordPress ahora

Paso 1: Instalar el complemento Geolocation

Desde su panel de WordPress, vaya a WPForms » Complementos, busque "Geolocation" y haga clic en Instalar complemento.

Una vez activo, diríjase a WPForms » Ajustes » Geolocation e introduzca su clave API de Google Places para conectarse a Google Maps.

Para un tutorial completo de configuración de la clave API, consulte la documentación del complemento Geolocation.

Paso 2: Añadir el campo Mapa a su formulario

Abra cualquier formulario en el constructor de WPForms, nuevo o existente. Busque el campo Mapa en Campos de fantasía en el panel izquierdo y arrástrelo.

Funciona en cualquier tipo de formulario: formularios de contacto, formularios de citas, formularios de registro, formularios de donaciones, el que sea.

Paso 3: Añadir sus ubicaciones

Haga clic en el campo Mapa para abrir la configuración de las opciones del campo. En la pestaña General, en Ubicaciones, empiece a escribir una dirección: el autocompletado de Google Places le sugerirá coincidencias.

Seleccione la correcta, luego asígnele un Nombre (como "Ubicación Calle Principal") y una Descripción opcional (horario, notas de aparcamiento, cualquier cosa útil para el visitante).

Haga clic en + para añadir más ubicaciones. No hay límite.

Habilita Mostrar lista de ubicaciones para mostrar nombres y direcciones de ubicaciones en una lista clara debajo del mapa.

Esto proporciona a los visitantes una referencia de texto junto con el mapa visual, lo cual es especialmente útil en dispositivos móviles, donde tocar pines pequeños puede ser complicado.

Paso 4: Habilitar la selección de ubicación

Con dos o más ubicaciones añadidas, activa Permitir selección de ubicación, debajo del selector de la Lista de ubicaciones. Esto añade botones de radio debajo del mapa, convirtiendo el campo de una visualización a una entrada de formulario en vivo.

Cuando un visitante hace clic en un pin o selecciona de la lista, el marcador rebota para confirmar. Su envío captura el nombre, la dirección y las coordenadas de la ubicación — más un enlace de Ver en el mapa — directamente en la entrada de tu formulario.

Nota: La selección de ubicación requiere tanto la opción Mostrar lista de ubicaciones como al menos dos ubicaciones configuradas.

Paso 5: Personalizar sus marcadores

Aquí es donde el campo Mapa se diferencia de una incrustación genérica de Google Maps. Junto a cada ubicación que hayas añadido, hay un menú desplegable de Icono.

Seleccionar Icono te da acceso a una gran biblioteca de iconos de Font Awesome. Opciones sencillas como pines de mapa o iconos de edificios suelen funcionar bien como marcadores, pero también hay opciones más específicas disponibles, como calendarios, corazones, etc.

Cada pin es totalmente personalizable:

• Icono — elige entre más de 2.000 iconos de Font Awesome. Una bolsa de compras para una ubicación comercial, un corazón para un sitio de donaciones, un símbolo de reciclaje para un punto de entrega de devoluciones.
• Imagen — sube tu propio logo o marcador de marca desde tu Biblioteca de medios.
• Color — usa el selector de color o pega un valor hexadecimal para que coincida exactamente con tu marca.
• Tamaño — establece los pines en Pequeño, Mediano o Grande. Los marcadores más grandes hacen que tus ubicaciones destaquen inmediatamente de los puntos de interés predeterminados de Google Maps.

Cada pin también puede mostrar un popup con el nombre y la descripción al hacer clic, para que los visitantes obtengan el contexto completo sin salir del formulario.

Paso 6: Ajustar la visualización

En la pestaña Avanzado, puedes limpiar la interfaz del mapa ocultando elementos que los visitantes no necesitan — el selector de pantalla completa, el selector de tipo de mapa (satélite/terreno), el control de Street View y las tarjetas de información de ubicación para otros negocios.

También puedes desactivar el arrastre o el zoom con la rueda del ratón para mantener el enfoque en tus ubicaciones marcadas.

Para las entradas, habilita Mostrar miniatura en la entrada para ver una vista previa del mapa directamente en la página de envío dentro de WPForms » Entradas.

Paso 7: Configurar notificaciones conscientes de la ubicación

Antes de publicar tu formulario de reserva de múltiples ubicaciones, vale la pena tomarse un momento para configurar las notificaciones y confirmaciones. En el constructor de formularios, ve a Ajustes » Notificaciones.

WPForms envía automáticamente una notificación al correo electrónico de tu administrador de WordPress cada vez que se envía el formulario. Desde esta pantalla, puedes ajustar la configuración predeterminada — cosas como la línea de asunto o las direcciones de correo electrónico del destinatario.

Con las Etiquetas inteligentes, también puedes configurar una notificación que vaya directamente a la persona que rellenó el formulario, acusando recibo e informándole de que alguien hará un seguimiento. Este es un paso particularmente útil para formularios de varias ubicaciones en WordPress. Para obtener una guía más detallada, consulta la documentación sobre cómo configurar notificaciones de formularios en WordPress.

Cuando eso esté hecho, dirígete a Confirmaciones en el menú de Configuración para decidir qué sucede después de un envío exitoso.

Hay tres opciones:

• Mensaje: Muestra un mensaje de agradecimiento en la misma página, ideal cuando la simplicidad es la prioridad.
• Mostrar página: Redirige al visitante a otra página de tu sitio, como una que describa los próximos pasos o proporcione detalles de contacto adicionales.
• Ir a URL (Redirección): Envía al visitante a una URL externa, lo que funciona bien cuando hay un sistema de reservas de terceros o una página de destino personalizada involucrada.

Elige la opción que mejor se adapte a tu configuración. Si eliges la opción Mensaje, el texto predeterminado se puede personalizar, por ejemplo: “¡Gracias por reservar con nosotros! Enviaremos un correo electrónico de confirmación a la dirección que proporcionaste en breve.”

Para obtener información sobre los otros tipos de confirmación, consulta la documentación sobre cómo configurar confirmaciones de formularios.

¿Campo de mapa frente a Autocompletado de direcciones: ¿Cuál es la diferencia?

Estas son dos funciones separadas del complemento de Geolocalización que hacen cosas opuestas y son fáciles de confundir:

	Campo de Mapa	Autocompletado de direcciones
Lo que muestra	Tus ubicaciones predefinidas	Sugerencias de escritura para cualquier dirección
Lo que captura	La ubicación que selecciona un visitante	La dirección que escribe un visitante
Mejor para	Elegir entre tus sucursales, sitios o locales	Recopilar una dirección de entrega, facturación o servicio

Puedes usar ambos en el mismo formulario. Un formulario de pedido de entrega de comida podría usar el campo de Mapa para permitir al cliente elegir una sucursal de restaurante y un campo de Dirección con autocompletado para recopilar su dirección de entrega.

Para habilitar el autocompletado de direcciones, abre cualquier campo de Dirección, ve a la pestaña Avanzado y activa Habilitar Autocompletado de Direcciones. Para un tutorial completo, consulta cómo crear un formulario de dirección con Autocompletado de Google Maps.

Visualización de datos de ubicación en tus entradas

Todos los datos de ubicación se encuentran en WPForms » Entradas.

Abre cualquier envío para ver el nombre, la dirección de la ubicación seleccionada y un enlace Ver en el mapa. Si habilitaste la miniatura del mapa en la configuración avanzada, verás una vista previa visual directamente en la página de la entrada.

Si exportas a Google Sheets, mapea los campos de ubicación seleccionados usando el complemento de Google Sheets; útil para crear listas de cumplimiento organizadas por ubicación de recogida o para rastrear recuentos de inscripciones de voluntarios por sitio.

¿Listo para empezar? El campo de Mapa está disponible en el creador de formularios de WPForms para todos los usuarios Pro. Si el complemento de Geolocalización ya está instalado, lo encontrarás en la sección Campos llamativos.

Crea tu formulario de WordPress ahora

Preguntas frecuentes sobre cómo añadir un selector de ubicación interactivo a cualquier formulario de WordPress

¿Funciona el campo de Mapa en dispositivos móviles?

Sí. El campo Mapa es totalmente adaptable. La lista de ubicaciones con botones de radio debajo del mapa facilita la selección en teléfonos; no es necesario tocar con precisión un pequeño marcador.

¿Necesito pagar extra por el complemento de geolocalización?

No. Está incluido en todos los planes de WPForms Pro sin coste adicional, junto con más de 2000 plantillas de formularios y todos los demás complementos Pro.

¿Qué sucede si solo agrego una ubicación?

Con una sola ubicación, el campo Mapa funciona como una visualización: tu marcador de marca en el mapa, sin necesidad de selección. La selección de ubicación solo se activa con dos o más ubicaciones y la opción Mostrar lista de ubicaciones habilitada.

¿Puedo usar lógica condicional según la ubicación que seleccione un visitante?

Sí. Usando la lógica condicional de WPForms, puedes mostrar u ocultar campos, dirigir notificaciones a diferentes destinatarios o activar diferentes mensajes de confirmación según la ubicación seleccionada.

¿Puedo subir mi propio logo como marcador del mapa?

Sí. En la sección Ubicaciones de las Opciones de Campo, elige Imagen en el menú desplegable de iconos y sube cualquier imagen de tu Biblioteca de Medios como marcador.

Profundiza con estos casos de uso

¿Quieres explorar más sobre un caso de uso específico? Creo que encontrarás útiles estas guías:

• Cómo crear un formulario de reservas de WordPress con varias ubicaciones: guía completa para negocios de servicios y programación de citas
• Cómo crear un formulario de pedidos en línea para restaurantes: añade selección de ubicación a un flujo completo de pedidos y pagos
• Cómo crear un formulario de varios pasos en WordPress: divide formularios complejos en páginas con la selección de ubicación como primer paso
• Cómo crear un formulario de dirección con autocompletado de Google Maps: complementa el campo Mapa con el autocompletado de direcciones del visitante

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

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.