Cómo mostrar un mapa con tu formulario de contacto de WordPress

¿Quieres añadir un mapa a tu formulario de contacto de WordPress para que los visitantes puedan encontrar fácilmente la ubicación de tu negocio? Añadir un mapa a tu formulario ayuda a los visitantes a saber exactamente dónde te encuentras antes de que se pongan en contacto.

Es especialmente útil si tienes una tienda física, una oficina o un área de servicio que los clientes necesitan visitar. Pero los mapas en los formularios de contacto pueden hacer más que solo mostrar tu ubicación.

Con la configuración adecuada, también puedes ayudar a los visitantes a rellenar los campos de dirección más rápido con autocompletado, o incluso mostrar varias ubicaciones si tienes varias oficinas o tiendas.

En este tutorial, te mostraré dos formas de añadir mapas a tus formularios de contacto en WordPress. Ambos métodos utilizan WPForms y su complemento Geolocation. ¡Empecemos!

Crea tu formulario de WordPress ahora

¿Por qué añadir un mapa en un formulario de contacto?

Claro, no es ningún secreto que la mayoría de los propietarios de pequeñas empresas con sitios web saben por qué necesitas un formulario de contacto. Pero, puede que te preguntes por qué añadirías un mapa a ese formulario de contacto.

Si tienes un negocio local, añadir un mapa a tu formulario de contacto deja clara su ubicación al instante. Esta puede ser una gran idea por varias razones:

• Si los clientes necesitan visitar tu negocio en persona, un mapa elimina cualquier duda. Pueden ver exactamente dónde te encuentras antes de contactarte, lo que reduce las preguntas de "¿dónde estás ubicado?" en tu bandeja de entrada.
• Cuando activas el autocompletado de direcciones, los visitantes pueden escribir unas pocas letras y seleccionar su dirección completa en un menú desplegable. Esto acelera la cumplimentación del formulario y reduce los errores tipográficos que podrían causar problemas de comunicación.
• ¿Tienes más de una oficina o tienda? Puedes incrustar un mapa interactivo que muestre todas tus ubicaciones y permita a los visitantes seleccionar cuál quieren contactar o visitar. Esto dirige las consultas al equipo correcto automáticamente.
• Un mapa en tu página de contacto indica que eres un negocio real con presencia física. Esto es especialmente importante para servicios locales, tiendas minoristas u oficinas profesionales.

¿La mejor parte? En lugar de tener que codificar un mapa en tu sitio web tú mismo o pagar a un desarrollador web, puedes hacerlo fácilmente con WPForms Pro. ¡Es uno de los mejores plugins de mapas para WordPress!

Cómo añadir un mapa a tu formulario de contacto de WordPress

Con WPForms Pro y el complemento Geolocation, puedes añadir funciones de mapa a tus formularios de contacto en muy poco tiempo. Sigue estas sencillas instrucciones paso a paso para empezar:

Paso 1: Descarga el plugin WPForms

WPForms es un potente creador de formularios que facilita la creación de formularios de contacto, formularios de registro y mucho más. Tiene más de 2.100 plantillas de formularios de WordPress que puedes usar.

Lo que más me gusta de WPForms es cómo combina la creación de formularios con herramientas de geolocalización integradas. No necesitas juntar varios plugins ni escribir código personalizado para añadir mapas a tus formularios.

Para añadir mapas a tus formularios de contacto, necesitarás WPForms Pro, que incluye el complemento Geolocation y todas las funciones de mapas que cubriremos en este tutorial.

Para empezar, compra una licencia de WPForms Pro. Luego, instala y activa WPForms en tu sitio web. Si necesitas ayuda con la instalación, sigue esta guía paso a paso sobre cómo instalar un plugin de WordPress.

¡Actualiza a WPForms Pro ahora! :)

Paso 2: Instala y activa el complemento Geolocation

Ahora que WPForms Pro está instalado, necesitas activar el complemento Geolocation. Esto es lo que potencia todas las funciones de mapa en tus formularios de contacto.

En el panel de WordPress, ve a WPForms » Addons. Usa la barra de búsqueda para localizar el addon Geolocation y, a continuación, haz clic en Instalar Addon. Una vez que se instale (normalmente solo unos segundos), haz clic en Activar.

Con el addon activado, ahora tienes acceso a tres formas de usar mapas en tus formularios:

• Mostrar las ubicaciones de tu negocio: Muestra a los visitantes exactamente dónde se encuentra tu negocio con un mapa incrustado en tu formulario. Esto funciona muy bien para negocios locales, oficinas o tiendas donde los clientes visitan en persona.
• Habilitar autocompletado de direcciones: Los visitantes pueden completar los campos de dirección más rápido con sugerencias de autocompletado. A medida que escriben, su dirección completa aparece en un menú desplegable, lo que reduce los errores y acelera la finalización del formulario.

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 de Geolocalización.

Una vez que hayas añadido tu clave API y guardado los ajustes, ya está todo listo. El Complemento de Geolocalización está ahora listo para usarse y puedes empezar a añadir mapas interactivos a tus formularios.

Paso 3: Crea tu formulario de contacto

Con el complemento de Geolocalización configurado, estás listo para crear tu formulario de contacto. Esto lleva unos 5 minutos. Ve a WPForms » Añadir nuevo en tu panel de WordPress para abrir el constructor de formularios.

Dale un nombre a tu formulario en el campo Nombre de tu formulario. Algo como “Ponerse en contacto” funciona bien. Verás algunas opciones aquí. Si quieres ahorrar tiempo, puedes elegir entre nuestras más de 2100 plantillas de formularios de WordPress.

Recomiendo elegir la Plantilla de formulario de contacto simple. Esto te proporciona un formulario de contacto listo para usar con los campos esenciales ya añadidos.

La plantilla incluye un campo de Nombre, un campo de Correo electrónico y un campo de Comentario o Mensaje. Puedes personalizar estos campos, añadir otros nuevos o eliminar los que no necesites. El constructor de formularios utiliza arrastrar y soltar, por lo que reorganizar los campos es sencillo.

Ahora, probablemente haya algunas cosas más, otros ajustes del formulario que quizás quieras configurar, como notificaciones y confirmaciones. Si es así (y lo recomiendo encarecidamente), consulta nuestra guía detallada sobre cómo crear tu primer formulario.

¡Prueba el Creador IA de WPForms! :)

Paso 4: Añade un mapa a tu formulario de contacto

Ahora llega la parte importante de añadir un mapa a tu formulario de contacto. WPForms te ofrece dos maneras de hacerlo, dependiendo de lo que quieras conseguir:

• Opción 1: Mostrar la ubicación de tu negocio (Campo de Mapa)
• Opción 2: Añadir autocompletado de direcciones para los visitantes (Campo de Texto de una sola línea o Dirección)

Vamos a repasar ambas opciones para que puedas elegir la que mejor se adapte a tus necesidades.

Opción 1: Mostrar tu ubicación con el campo de Mapa

Usa esta opción si quieres mostrar a los visitantes dónde se encuentra tu negocio. Esto incrusta un mapa interactivo directamente en tu formulario de contacto.

En el constructor de formularios, desplázate por el panel izquierdo hasta Campos Fancy y verás el campo Mapa listado allí. Arrástralo a la vista previa de tu formulario a la derecha.

Dónde lo coloques depende de tus preferencias. A algunas personas les gusta ponerlo en la parte superior para que sea visible de inmediato. Otras lo prefieren más abajo. Elige lo que te parezca natural para el diseño de tu formulario.

Después de añadir el campo Mapa, selecciónalo para que aparezcan sus opciones de configuración a la izquierda. Busca la sección Ubicaciones, ya que aquí es donde introducirás las direcciones de tu negocio.

Haz clic en el cuadro Dirección y empieza a introducir tu ubicación. Notarás que aparecen sugerencias de autocompletado a medida que escribes. Elige la opción correcta para fijar las coordenadas exactas del mapa.

Ahora añade un Nombre para este lugar. Usa algo descriptivo como "Sucursal Oeste" o "Sede Central". Los visitantes verán esta etiqueta cuando interactúen con el marcador, por lo que la claridad es importante.

También hay un campo de Descripción si deseas añadir información complementaria como horarios de apertura, detalles de contacto específicos o notas sobre la ubicación.

Opci ildeon 2: A tildeadir autocompletado de direcciones para visitantes

Usa esta opci ildeon si necesitas que los visitantes rellenen un campo de direcci ildeon en tu formulario de contacto (como para solicitudes de presupuesto, reservas de servicios o consultas de env ildeio). El mapa les ayuda a introducir su direcci ildeon con precisi ildeon.

En el constructor de formularios, a tildeade un campo de Texto de una sola l ildeinea o un campo de Direcci ildeon a tu formulario. Puedes hacer clic en el nombre del campo o arrastrarlo a tu formulario.

Haz clic en el campo que acabas de a tildeadir para abrir su configuraci ildeon. Cambia la etiqueta a "Tu direcci ildeon" o algo similar. Luego haz clic en la pesta tildea Avanzado en la configuraci ildeon del campo.

Despl ildeazate hacia abajo y activa Habilitar autocompletado de direcciones. Esto permite a los visitantes empezar a escribir su direcci ildeon y seleccionarla de una lista desplegable.

A continuaci ildeon, activa Mostrar mapa. Puedes elegir si el mapa aparece encima o debajo del campo de entrada usando el men ildeu desplegable.

Ahora, cuando los visitantes rellenen este campo, ver ildean un mapa que se actualiza mientras escriben. Tambi ildeen pueden arrastrar el pin del mapa para ajustar su ubicaci ildeon exacta.

Esta opci ildeon funciona muy bien para negocios de servicios, formularios de entrega o cualquier situaci ildeon en la que necesites la direcci ildeon del visitante. Una vez que hayas a tildeadido tu mapa usando cualquiera de las opciones, haz clic en Guardar en la esquina superior derecha.

Paso 5: Publica el mapa de tu formulario de contacto

extquoterightListo para publicar tu formulario de contacto con un mapa? Con tu plugin WPForms Pro, es muy f ildeacil incrustar tu formulario en tu sitio. Con el formulario a ildeun abierto en el constructor, haz clic en el bot ildeon Incrustar en la esquina superior derecha.

Aqu ildei, puedes seleccionar cualquier p ildeagina de WordPress que desees, ya sea una p ildeagina existente o una nueva. En este tutorial, har ildee clic en Crear nueva p ildeagina.

Dale un t ildeitulo a tu p ildeagina. Algo como "Contacto" o "Ponerse en contacto", lo que prefieras y se ajuste a tus necesidades, y luego haz clic en el bot ildeon extquoterightVamos!.

WPForms inserta autom ildeaticamente tu formulario en la p ildeagina. Ver ildeas tu formulario de contacto con el mapa ya en su lugar. Desde aqu ildei, puedes a tildeadir texto introductorio encima del formulario, ajustar el dise tildeo de la p ildeagina o estilizar un poco tu formulario.

Para ajustar el aspecto de tu formulario de contacto, haz clic en cualquier lugar alrededor del formulario en el editor de páginas. Esto abrirá el panel de estilos en el lado derecho, donde puedes personalizar la apariencia del formulario.

Para un estilo rápido, elige un diseño predefinido del menú desplegable Tema del formulario. Opciones como Moderno, Clásico o Minimalista le dan a tu formulario un aspecto profesional instantáneo que coincide con el diseño de tu sitio.

Si deseas un mayor control, el panel también te permite personalizar elementos individuales como colores, fuentes, espaciado y estilos de botones.

Una vez que todo se vea bien y el mapa muestre tu ubicación correctamente, haz clic en Publicar. Tu formulario de contacto con mapa ya está en línea. Aquí tienes una idea de cómo se verá:

Preguntas frecuentes sobre cómo añadir un formulario de contacto con mapa en WordPress

¿Tienes preguntas sobre cómo añadir mapas a tus formularios de contacto de WordPress? Aquí tienes respuestas a las preguntas más comunes que escuchamos:

¿Necesito una clave API de Google Maps para usar mapas en WPForms?

Sí, necesitas una clave API de Google Maps o una clave API de Mapbox para usar las funciones de mapa en WPForms. El complemento Geolocation requiere una de estas para conectarse al servicio de mapas.

¡No te preocupes! WPForms proporciona instrucciones paso a paso para obtener tu clave API en la documentación del complemento Geolocation. La configuración suele tardar unos 10 minutos.

¿Cuál es la diferencia entre el campo de Mapa y la autocompletación de direcciones con mapa?

• El campo de Mapa muestra tu(s) ubicación(es) de negocio a los visitantes. Les muestra dónde estás. Usa esto cuando quieras que la gente vea tu oficina, tienda o área de servicio en tu formulario de contacto.
• La autocompletación de direcciones con mapa ayuda a los visitantes a rellenar su dirección más rápido. A medida que escriben, se sugiere su dirección y se muestra en un mapa. Usa esto cuando necesites recopilar la ubicación del visitante.

¿Puedo mostrar varias ubicaciones de negocio en un solo mapa?

Sí. El campo de Mapa te permite añadir tantas ubicaciones como necesites, como oficinas, tiendas, sucursales o centros de servicio.

Cada ubicación obtiene su propio marcador en el mapa, y puedes personalizar los iconos y colores de los marcadores. Los visitantes pueden hacer clic en cada marcador para ver el nombre y los detalles de la ubicación.

Para obtener instrucciones paso a paso, consulta la documentación del campo de Mapa.

¿Funcionará el mapa en dispositivos móviles?

Absolutamente. Los mapas creados con WPForms son totalmente responsivos y funcionan perfectamente en teléfonos inteligentes y tabletas.

Los visitantes pueden hacer zoom, desplazarse e interactuar con el mapa igual que lo harían en un escritorio. La función de autocompletación de direcciones también funciona sin problemas en dispositivos móviles.

¿Añadir un mapa ralentiza mi formulario de contacto?

No. WPForms carga los mapas de manera eficiente para que no ralenticen tu página. El mapa solo se carga cuando es necesario y no afecta el rendimiento de tu formulario.

WPForms está optimizado para mantener tu sitio rápido, incluso con funciones interactivas como los mapas.

¿Puedo personalizar el aspecto del mapa en mi formulario?

Sí. Con el campo de Mapa, puedes personalizar los iconos y colores de los marcadores para que coincidan con tu marca.

También puedes controlar qué controles del mapa aparecen (zoom, pantalla completa, tipo de mapa, etc.) y ajustar el nivel de zoom inicial.

Para los mapas de autocompletado de direcciones, puedes elegir si el mapa aparece encima o debajo del campo de entrada.

¿Veré en un mapa de dónde provienen los envíos del formulario?

Sí. Cuando el complemento Geolocation está activo, WPForms captura automáticamente datos de ubicación (con permiso del visitante) para cada envío de formulario.

Puedes ver estos datos en un mapa en tu panel de WordPress cuando miras las entradas individuales del formulario. Esto te ayuda a comprender de dónde provienen geográficamente tus clientes potenciales y clientes.

A continuación, consulta otras funciones de WPForms Pro

Obtén WPForms Pro hoy mismo para acceder al complemento Geolocation que te permite agregar estos impresionantes mapas.

También tendrás acceso a un montón de otras funciones útiles.

• Un creador fácil de usar: crea tus propios formularios en minutos sin escribir una sola línea de código.
• Encuestas: recopila datos a través de encuestas y sondeos y visualízalos en informes atractivos. También puedes agregar una función de guardar y continuar a encuestas largas para que los usuarios puedan pausar y completar sus formularios más tarde.
• Páginas de formulario: haz que más personas completen tus formularios creando páginas de formulario sin distracciones en un solo clic.
• Formularios de pedido: integra Stripe (todos los planes), Square (Pro) y PayPal (Pro) directamente en tus formularios y acepta pagos en línea.
• Informes de viaje del usuario : ve dónde estaban las personas en tu sitio antes de completar tu formulario.
• Formularios seguros: protege los formularios con opciones anti-spam como captcha personalizado, hCaptcha o Google reCAPTCHA v2 o v3.
• Formularios conversacionales: observa cómo se disparan las tasas de conversión con formularios modernos y muy atractivos.
• Más de 2100 plantillas: nunca más crees un formulario desde cero con plantillas prediseñadas de los tipos de formularios más populares que existen.
• Soporte Premium: accede a un equipo amigable y experto que te guiará en la dirección correcta si necesitas ayuda con los formularios de tu sitio web.
• ...y mucho más.

De hecho, si miras WPForms Lite vs Pro, verás que hay muchas razones por las que Pro es tan popular.

Crea tu formulario de WordPress ahora

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