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

Imagina lo siguiente: un colaborador visita la página web de una organización sin ánimo de lucro para donar unos abrigos de invierno. Está listo para entregarlos, pero el formulario solo muestra un menú desplegable con tres direcciones. No incluye ningún 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 sí. La mayoría no…

Ahora imagina un mapa interactivo integrado directamente en el formulario. Los tres puntos de entrega están marcados con iconos personalizados, etiquetados como «Centro comunitario del norte», «Biblioteca del centro» e «Iglesia del este». El usuario toca el que tiene más cerca, el marcador rebota para confirmar y su selección queda registrada claramente en tu registro. Se hace en cuestión de segundos y sin salir de la página.

¡Así es como funciona el campo «Mapa» de WPForms! Y aunque un formulario de reserva con selección de ubicación es probablemente el primer uso que se nos viene a la mente, no es ni mucho menos el único. Recogida en tienda, devoluciones de productos, registro en eventos, selección de área de servicio, inscripciones de voluntarios… cualquier formulario que implique elegir una ubicación física mejora con esta función.

Te voy a enseñar cómo configurarlo y varias formas de utilizarlo.

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

Qué necesitará

• WPForms Pro: el campo «Mapa» forma parte del complemento de geolocalización, incluido en todos los planes Pro
• Una clave de la API de Google Places —se puede crear de forma gratuita—; esta clave permite el autocompletado de mapas y direcciones
• La última versión de WPForms instalada en tu sitio de WordPress

Si utilizas WPForms Lite, tendrás que pasar a la versión Pro para poder acceder al complemento de geolocalización. Si eres nuevo en WPForms, lo mejor es empezar por la versión Pro.

Cree su formulario WordPress ahora

Paso 1: Instala el complemento de geolocalización

Desde el panel de control de WordPress, ve a WPForms » Complementos, busca «Geolocalización» y haz clic en «Instalar complemento».

Una vez activado, ve a WPForms » Ajustes » Geolocalización e introduce tu clave de la API de Google Places para conectarte a Google Maps.

Para obtener una guía detallada sobre la configuración de la clave de API, consulta la documentación del complemento de geolocalización.

Paso 2: Añade el campo «Mapa» a tu formulario

Abre cualquier formulario en el generador de WPForms, ya sea nuevo o ya existente. Busca el campo «Mapa» en la sección «Campos avanzados» del panel de la izquierda y arrástralo hasta el formulario.

Funciona con cualquier tipo de formulario: formularios de contacto, de citas, de inscripción, de donaciones... lo que se te ocurra.

Paso 3: Añade tus ubicaciones

Haz clic en el campo «Mapa» para abrir la configuración de opciones del campo. En la pestaña «General», en la sección «Ubicaciones», empieza a escribir una dirección: la función de autocompletado de Google Places te sugerirá resultados.

Selecciona la opción adecuada y, a continuación, asígnale un nombre (por ejemplo, «Local de la calle principal») y, si lo deseas, una descripción (horario, indicaciones sobre el aparcamiento o cualquier otra información útil para el visitante).

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

Activa la opción «Mostrar lista de ubicaciones» para que los nombres y las direcciones de las ubicaciones aparezcan en una lista ordenada debajo del mapa.

Esto ofrece a los visitantes una referencia textual junto al mapa visual, lo cual resulta especialmente útil en dispositivos móviles, donde pulsar sobre los pequeños marcadores puede resultar complicado.

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

Si se han añadido dos o más ubicaciones, activa la opción «Permitir selección de ubicación», situada debajo del botón de activación «Lista de ubicaciones». De este modo, aparecerán botones de opción debajo del mapa y el campo pasará de ser una representación visual a un campo de formulario activo.

Cuando un visitante hace clic en un marcador o selecciona una opción de la lista, el marcador rebota para confirmar la acción. Al enviar el formulario, se registran el nombre, la dirección y las coordenadas del lugar —además de un enlace «Ver en el mapa »— directamente en el campo del formulario.

Nota: Para seleccionar una ubicación, es necesario que la opción «Mostrar lista de ubicaciones» esté activada y que haya al menos dos ubicaciones configuradas.

Paso 5: Personaliza tus 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 iconos.

Al seleccionar «Icon», tendrás acceso a una amplia biblioteca de iconos de Font Awesome. Las opciones sencillas, como los marcadores de mapa o los iconos de edificios, suelen funcionar bien como marcadores, pero también hay disponibles opciones más específicas, como calendarios, corazones, etc.

Cada pin es totalmente personalizable:

• Icono: elige entre más de 2000 iconos de Font Awesome. Una bolsa de la compra para un establecimiento minorista, un corazón para una página de donaciones, un símbolo de reciclaje para un punto de recogida de devoluciones.
• Imagen: sube tu propio logotipo o marca de tu empresa desde tu biblioteca multimedia.
• Color: utiliza el selector de colores o introduce un valor hexadecimal para que coincida exactamente con tu marca.
• Tamaño: configura los marcadores en Pequeño, Mediano o Grande. Los marcadores más grandes hacen que tus ubicaciones destaquen inmediatamente entre los puntos de interés predeterminados de Google Maps.

Además, al hacer clic en cada marcador, se muestra una ventana emergente con el nombre y la descripción, de modo que los visitantes obtienen toda la información necesaria sin tener que salir del formulario.

Paso 6: Ajustar la pantalla

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

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

Para las entradas, activa la opción «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 las notificaciones basadas en la ubicación

Antes de publicar tu formulario de reserva para varias ubicaciones, vale la pena dedicar un momento a configurar las notificaciones y las confirmaciones. En el generador de formularios, ve a Ajustes » Notificaciones.

WPForms envía automáticamente una notificación al correo electrónico de administración de WordPress cada vez que se envía el formulario. Desde esta pantalla, puedes modificar la configuración predeterminada, como el asunto o las direcciones de correo electrónico de los destinatarios.

Con Smart Tags, también puedes configurar una notificación que se envíe directamente a la persona que ha rellenado el formulario, acusando recibo e informándole de que alguien se pondrá en contacto con ella. Este paso resulta especialmente útil para los formularios con varias ubicaciones en WordPress. Para obtener instrucciones más detalladas, consulta la documentación sobre cómo configurar las notificaciones de formularios en WordPress.

Una vez hecho esto, ve a «Confirmaciones» en el menú «Configuración» para decidir qué ocurre tras un envío correcto.

Hay tres opciones:

• Mensaje: Muestra un mensaje de agradecimiento en la misma página, lo cual resulta ideal cuando se da prioridad a la simplicidad.
• Mostrar página: redirige al visitante a otra página de tu sitio web, como una que describa los siguientes pasos o proporcione datos de contacto adicionales.
• Ir a la URL (redirección): redirige al visitante a una URL externa, lo que resulta muy útil cuando se utiliza un sistema de reservas de terceros o una página de destino personalizada.

Elige la opción que mejor se adapte a tu configuración. Si eliges la opción «Mensaje», puedes personalizar el texto predeterminado, 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 información sobre los demás tipos de confirmación, consulta la documentación sobre cómo configurar las confirmaciones de formularios.

Campo de mapa frente a autocompletado de direcciones: ¿cuál es la diferencia?

Se trata de dos funciones independientes del complemento de geolocalización que hacen cosas opuestas y con las que es fácil confundirse:

	Campo de mapa	Autocompletar dirección
Lo que muestra	Tus ubicaciones predefinidas	Sugerencias de autocompletado para cualquier dirección
Lo que capta	La ubicación que elija el visitante	La dirección que escribe un visitante
Lo mejor para	Seleccionar entre sus sucursales, centros o locales	Introducir una dirección de entrega, facturación o servicio

Puedes utilizar ambos en el mismo formulario. En un formulario de pedido de comida a domicilio, se podría utilizar el campo «Mapa» para que el cliente elija una sucursal del restaurante, y un campo «Dirección» con autocompletado para recabar su dirección de entrega.

Para activar el autocompletado de direcciones, abre cualquier campo de dirección, ve a la pestaña «Avanzado» y activa la opción «Habilitar autocompletado de direcciones». Para obtener una guía detallada, consulta cómo crear un formulario de autocompletado de direcciones con Google Maps.

Cómo consultar los datos de ubicación en tus entradas

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

Abre cualquier entrada para ver el nombre y la dirección del lugar seleccionado, así como el enlace «Ver en el mapa ». Si has activado la miniatura del mapa en la configuración avanzada, verás una vista previa directamente en la página de la entrada.

Si exportas a Google Sheets, asigna los campos de ubicación seleccionados mediante el complemento de Google Sheets; esto resulta útil para crear listas de gestión de pedidos organizadas por punto de recogida o para realizar un seguimiento del número de inscripciones de voluntarios por centro.

¿Listo para empezar? El campo «Mapa» está disponible en el generador de formularios de WPForms para todos los usuarios Pro. Si ya tienes instalado el complemento de geolocalización, lo encontrarás en la sección «Campos avanzados».

Cree su formulario WordPress ahora

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

¿Funciona el campo «Mapa» en dispositivos móviles?

Sí. El campo «Mapa» se adapta perfectamente a cualquier dispositivo. La lista de ubicaciones con botones de opción que aparece debajo del mapa facilita la selección en los teléfonos móviles: no es necesario pulsar con precisión sobre un pequeño marcador.

¿Tengo que pagar un suplemento 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 profesionales.

¿Qué pasa si solo añado una ubicación?

Si solo hay una ubicación, el campo «Mapa» funciona como elemento de visualización: se muestra un marcador con tu marca en el mapa, sin necesidad de seleccionar nada. La selección de ubicaciones solo se activa cuando hay dos o más ubicaciones y la opción «Mostrar lista de ubicaciones» está activada.

¿Puedo utilizar lógica condicional en función de la ubicación que seleccione el visitante?

Sí. Mediante la lógica condicional de WPForms, puedes mostrar u ocultar campos, enviar notificaciones a diferentes destinatarios o activar distintos mensajes de confirmación en función de la ubicación seleccionada.

¿Puedo subir mi propio logotipo como marcador en el mapa?

Sí. En la sección «Ubicaciones» de «Opciones de campo», selecciona «Imagen» en el menú desplegable de iconos y sube cualquier imagen de tu biblioteca multimedia para utilizarla como marcador.

Profundiza en el tema con estos casos prácticos

¿Quieres saber más sobre un caso de uso concreto? Creo que estas guías te resultarán útiles:

• Cómo crear un formulario de reservas de WordPress para varias ubicaciones: guía paso a paso para empresas de servicios y gestión de citas
• Cómo crear un formulario de pedidos online para un restaurante: cómo añadir la selección de la ubicación a un proceso completo de pedido y pago
• Cómo crear un formulario de varios pasos en WordPress: divide los formularios complejos en varias páginas, con la selección de la ubicación como primer paso
• Cómo crear un formulario de autocompletado de direcciones en Google Maps: añade la función de autocompletado de direcciones de los visitantes al campo «Mapa»

¿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.