Resumen de la IA
¿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 ponerse en contacto contigo.
Es especialmente útil si tienes una tienda física, una oficina o un área de servicio que los clientes deben visitar. Pero los mapas en los formularios de contacto pueden hacer mucho más que 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ápidamente con el 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!
Cree su formulario WordPress ahora
¿Por qué añadir un mapa en un formulario de contacto?
Por supuesto, no es ningún secreto que la mayoría de los propietarios de pequeñas empresas con sitios web saben por qué es necesario un formulario de contacto. Pero quizá se pregunte por qué añadir un mapa a ese formulario de contacto.
Si tienes un negocio local, añadir un mapa a tu formulario de contacto deja claro al instante dónde te encuentras. Esto 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 ponerse en contacto contigo, lo que reduce las preguntas del tipo «¿dónde estás?» en tu bandeja de entrada.
- Cuando habilitas el autocompletado de direcciones, los visitantes pueden escribir unas pocas letras y seleccionar su dirección completa en un menú desplegable. Esto agiliza la cumplimentación de formularios y reduce los errores tipográficos que podrían causar problemas de comunicación.
- ¿Tienes más de una oficina o tienda? Puedes insertar un mapa interactivo que muestre todas tus ubicaciones y permita a los visitantes seleccionar con cuál desean contactar o visitar. Esto dirige las consultas al equipo adecuado automáticamente.
- Un mapa en tu página de contacto indica que eres una empresa real con presencia física. Esto es especialmente importante para los servicios locales, las tiendas minoristas o las oficinas profesionales.
¿Lo mejor de todo? En lugar de tener que programar tú mismo un mapa en tu sitio web 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 un abrir y cerrar de ojos. Sigue estas sencillas instrucciones paso a paso para empezar:
Paso 1: Descargar 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. 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 la creación de formularios con herramientas de geolocalización integradas. No es necesario combinar varios plugins ni escribir código personalizado para añadir mapas a los 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 veremos en este tutorial.
Para empezar, compra una licencia de WPForms Pro. A continuación, 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.
Actualice ahora a WPForms Pro 🙂 ...
Paso 2: Instalar y activar el complemento de geolocalización
Ahora que WPForms Pro está instalado, debes activar el complemento Geolocation. Este es el que habilita todas las funciones de mapa en tus formularios de contacto.
En tu panel de control de WordPress, ve a WPForms » Complementos. Utiliza la barra de búsqueda para localizar el complemento Geolocalización y, a continuación, haz clic en Instalar complemento. Una vez instalado (normalmente solo tarda unos segundos), haz clic en Activar.
Con el complemento activado, ahora tienes acceso a tres formas de utilizar mapas en tus formularios:
- Muestra la ubicación de tu negocio: muestra a los visitantes exactamente dónde se encuentra tu negocio con un mapa integrado en tu formulario. Esto funciona muy bien para negocios locales, oficinas o tiendas que los clientes visitan en persona.
- Habilitar autocompletado de direcciones: los visitantes pueden rellenar los campos de dirección más rápidamente con las sugerencias de autocompletado. A medida que escriben, su dirección completa aparece en un menú desplegable, lo que reduce los errores y agiliza la cumplimentació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 Geolocation Addon.
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: Crea tu formulario de contacto
Una vez configurado el complemento de geolocalización, ya estás listo para crear tu formulario de contacto. Esto te llevará unos 5 minutos. Ve a WPForms » Añadir nuevo en tu panel de control de WordPress para abrir el creador de formularios.
Asigne un nombre a su formulario en el campo «Nombre del formulario ». Algo como «Contáctenos» sería adecuado. Aquí encontrará varias opciones. Si desea ahorrar tiempo, puede elegir cualquiera de nuestras más de 2100 plantillas de formularios para WordPress.
Recomiendo elegir la plantilla «Formulario de contacto simple». De este modo, dispondrás de un formulario de contacto ya preparado con los campos esenciales añadidos.
La plantilla incluye un campo Nombre, un campo Correo electrónico y un campo Comentario o Mensaje. Puede personalizar estos campos, añadir otros nuevos o eliminar los que no necesite. El creador de formularios utiliza la función de arrastrar y soltar, por lo que reorganizar los campos es muy sencillo.
Ahora bien, probablemente haya algunas cosas más que quieras configurar en el formulario, como las notificaciones y las confirmaciones. Si es así (y te lo recomiendo encarecidamente), echa un vistazo a nuestra guía detallada sobre cómo crear tu primer formulario.
Consejo profesional
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.
¡Prueba el generador de IA de WPForms! 🙂
Paso 4: Añade un mapa a tu formulario de contacto
Ahora viene la parte importante de añadir un mapa a tu formulario de contacto. WPForms te ofrece dos formas de hacerlo, dependiendo de lo que quieras conseguir:
- Opción 1: Mostrar la ubicación de tu negocio (campo Mapa)
- Opción 2: Añadir autocompletado de direcciones para visitantes (campo de texto de una sola línea o campo de dirección)
Veamos ambas opciones para que puedas elegir la que mejor se adapte a tus necesidades.
Opción 1: Mostrar su ubicación con el campo Mapa
Utiliza esta opción si deseas mostrar a los visitantes dónde se encuentra tu negocio. Esto incrusta un mapa interactivo directamente en tu formulario de contacto.
En el generador de formularios, desplázate hacia abajo en el panel izquierdo hasta Fancy Fields y verás el campo Mapa en la lista. Arrástralo a la vista previa del formulario a la derecha.
El lugar donde lo coloques depende de tus preferencias. A algunas personas les gusta colocarlo en la parte superior para que sea visible de inmediato. Otras prefieren colocarlo más abajo. Elige lo que te resulte más 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 es ahí donde introducirás las direcciones de tu negocio.
Haga clic en el cuadro Dirección y comience a escribir su ubicación. Verá que aparecen sugerencias de autocompletado a medida que escribe. Elija la opción correcta para fijar las coordenadas precisas en el mapa.
Ahora añada un nombre para este lugar. Utilice algo descriptivo como «Sucursal oeste» o «Sede corporativa». Los visitantes verán esta etiqueta cuando interactúen con el marcador, por lo que es importante que sea clara.
También hay un campo Descripción si desea añadir información complementaria, como el horario de atención, datos de contacto específicos o notas específicas sobre la ubicación.
¿Listo para añadir otra ubicación?
Haga clic en el botón más (+) debajo de la entrada actual. Aparecerá un nuevo conjunto de campos de entrada. Siga los mismos pasos: introduzca la dirección, espere a que se complete automáticamente, seleccione la coincidencia, asígnele un nombre y, si lo desea, descríbala.
Cuando haya terminado, el mapa se rellenará automáticamente con marcadores para cada dirección que haya introducido. Los visitantes pueden interactuar con estos marcadores para ver los nombres y las descripciones que haya proporcionado.
Ahora que ha configurado su mapa con varias ubicaciones, puede elegir entre mostrar las ubicaciones o incluso hacerlas seleccionables (ideal principalmente para formularios de reserva).
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. Ahora los visitantes pueden hacer clic en cualquier ubicación para seleccionarla como su lugar preferido para realizar la reserva.
Opción 2: Añadir autocompletado de direcciones para visitantes
Utiliza esta opción si necesitas que los visitantes rellenen un campo de dirección en tu formulario de contacto (por ejemplo, para solicitudes de presupuesto, reservas de servicios o consultas sobre envíos). El mapa les ayuda a introducir su dirección con precisión.
En el generador de formularios, añade un campo de texto de una sola línea o un campo de dirección a tu formulario. Puedes hacer clic en el nombre del campo o arrastrarlo a tu formulario.
Haga clic en el campo que acaba de añadir para abrir su configuración. Cambie la etiqueta a «Su dirección» o algo similar. A continuación, haga clic en la pestaña Avanzado en la configuración del campo.
Desplázate hacia abajo y activa la opción «Habilitar autocompletado de direcciones». Esto permite a los visitantes empezar a escribir su dirección y seleccionarla en un menú desplegable.
A continuación, activa la opción Mostrar mapa. Puedes elegir si el mapa aparece encima o debajo del campo de entrada utilizando el menú desplegable.
Ahora, cuando los visitantes rellenen este campo, verán un mapa que se actualiza a medida que escriben. También pueden arrastrar el marcador del mapa para ajustar su ubicación exacta.
Esta opción funciona muy bien para empresas de servicios, formularios de entrega o cualquier situación en la que necesites la dirección del visitante. Una vez que hayas añadido tu mapa utilizando cualquiera de las dos opciones, haz clic en Guardar en la esquina superior derecha.
Paso 5: Publica tu mapa del formulario de contacto
¿Listo para publicar tu formulario de contacto con un mapa? Con tu plugin WPForms Pro, es muy fácil incrustar tu formulario en tu sitio web. Con el formulario aún abierto en el constructor, haz clic en el botón «Incrustar» en la esquina superior derecha.
Aquí puedes seleccionar cualquier página de WordPress que desees, ya sea una página existente o una nueva. En este tutorial, haré clic en Crear nueva página.
Ponle un título a tu página. Algo como «Contáctanos» o «Ponte en contacto con nosotros», lo que prefieras y se adapte a tus necesidades, y luego haz clic en el botón «¡Vamos! ».
WPForms inserta automáticamente tu formulario en la página. Verás tu formulario de contacto con el mapa ya colocado. 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.
Para ajustar el aspecto de tu formulario de contacto, haz clic en cualquier lugar alrededor del formulario en el editor de páginas. Se abrirá el panel de estilo en la parte derecha, donde podrás personalizar el aspecto del formulario.
Para un diseño rápido, elige un diseño predeterminado en el menú desplegable «Tema del formulario ». Opciones como «Moderno», «Clásico» o «Minimalista» le dan a tu formulario un aspecto profesional instantáneo que combina con el diseño de tu sitio web.
Si desea tener más control, el panel también le 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á activo. 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 las respuestas a las preguntas más frecuentes que nos hacen:
¿Necesito una clave API de Google Maps para utilizar mapas en WPForms?
Sí, necesitas una clave API de Google Maps o una clave API de Mapbox para utilizar las funciones de mapas en WPForms. El complemento de geolocalización requiere una de estas claves 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 Mapa y el autocompletado de direcciones con un mapa?
- El campo Mapa muestra a los visitantes la ubicación de tu negocio. Les muestra dónde estás. Utilízalo cuando quieras que la gente vea tu oficina, tienda o área de servicio en tu formulario de contacto.
- La función de autocompletar direcciones con un mapa ayuda a los visitantes a rellenar su dirección más rápidamente. A medida que escriben, les sugiere su dirección y la muestra en un mapa. Utiliza esta función cuando necesites recopilar la ubicación del visitante.
¿Puedo mostrar varias ubicaciones comerciales en un solo mapa?
Sí. El campo Mapa le permite añadir tantas ubicaciones como necesite, como varias oficinas, tiendas, sucursales o centros de servicio.
Cada ubicación tiene 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 Mapa.
¿El mapa funcionará en dispositivos móviles?
Por supuesto. Los mapas creados con WPForms son totalmente responsivos y funcionan perfectamente en smartphones y tabletas.
Los visitantes pueden ampliar, desplazar e interactuar con el mapa tal y como lo harían en un ordenador. La función de autocompletar direcciones también funciona a la perfección en dispositivos móviles.
¿Añadir un mapa ralentiza mi formulario de contacto?
No. WPForms carga los mapas de forma eficiente para que no ralenticen tu página. El mapa solo se carga cuando es necesario y no afecta al rendimiento de tu formulario.
WPForms está optimizado para mantener la velocidad de tu sitio web incluso con funciones interactivas como mapas.
¿Puedo personalizar el aspecto del mapa en mi formulario?
Sí. Con el campo 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.
En el caso de los mapas con autocompletado de direcciones, puedes elegir si el mapa aparece encima o debajo del campo de entrada.
¿Podré ver en un mapa de dónde proceden los envíos de formularios?
Sí. Cuando el complemento de geolocalización está activo, WPForms captura automáticamente los datos de ubicación (con el permiso del visitante) para cada envío de formulario.
Puede ver estos datos en un mapa en su panel de control de WordPress cuando consulta las entradas individuales del formulario. Esto le ayuda a comprender de dónde proceden geográficamente sus clientes potenciales y actuales.
A continuación, echa un vistazo a otras funciones de WPForms Pro.
Consigue WPForms Pro hoy mismo para acceder al complemento de geolocalización que te permite añadir estos increíbles mapas.
También tendrás acceso a un montón de otras funciones útiles.
- Un constructor fácil de usar: cree sus propios formularios en cuestión de minutos sin escribir una sola línea de código.
- Encuestas - Recopila datos a través de encuestas y sondeos y visualízalos en bonitos informes. También puedes añadir la función Guardar y continuar a las encuestas largas para que los usuarios puedan pausar y completar sus formularios más tarde.
- Páginas de formularios - Consiga que más gente termine sus formularios creando páginas de formularios sin distracciones con un solo clic.
- Formularios de pedido: integre Stripe (todos los planes), Square (Pro) y PayPal (Pro) directamente en sus formularios y acepte dinero en línea.
- Informes del recorrido del usuario : vea en qué parte de su sitio se encontraban los usuarios antes de rellenar el formulario.
- Formularios seguros: proteja los formularios con opciones antispam como captcha personalizado, hCaptcha o Google reCAPTCHA v2 o v3.
- Formularios conversacionales: vea cómo se disparan las tasas de conversión con formularios atractivos y de aspecto moderno.
- Más de 2100 plantillas: nunca más tendrás que crear un formulario desde cero gracias a las plantillas prediseñadas de los tipos de formularios más populares que existen.
- Asistencia Premium - Acceda a un equipo amable y experto que le guiará en la dirección correcta si necesita ayuda con los formularios de su sitio web.
- ...y mucho más.
De hecho, si miras WPForms Lite vs Pro, verás que hay un montón de razones por las que Pro es tan popular.
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.
Hola,
¿Es posible utilizar un mapa personalizado como referencia base para comprobar si la dirección introducida por el usuario se encuentra dentro de una zona determinada o no?
Hola Elia - Actualmente no tenemos la opción de utilizar el mapa personalizado como referencia para ver si la dirección introducida por el usuario cae en una zona. Estoy de acuerdo en que esto sería útil, y voy a añadir esto en nuestro rastreador de peticiones de características para que esté en el radar de nuestros desarrolladores.