Cómo incrustar un mapa de Google en formularios de contacto (con marcador)

Hemos completado una buena cantidad de formularios en línea y a menudo nos hemos encontrado reescribiendo la misma dirección constantemente. Fue entonces cuando empezamos a desear que hubiera una forma más sencilla.

Imagina esto en su lugar: un visitante llega a tu página de contacto, ve su dirección autocompletada y un marcador ya colocado en el mapa. Es rápido, personal y les ahorra tiempo.

Agregar un Mapa de Google con un marcador de ubicación a tu formulario de contacto de WordPress puede parecer un pequeño detalle, pero puede tener un gran impacto. En nuestra experiencia con WPForms, ayuda a aumentar las tasas de finalización de formularios y brinda a los usuarios una experiencia más fluida y satisfactoria.

En esta guía paso a paso, te mostraremos cómo incrustar un Mapa de Google interactivo directamente en tu formulario de contacto de WordPress, sin necesidad de código. 🗺️

¿Por qué incrustar un Mapa de Google en tu formulario de contacto?

Cuando creaste tu sitio web de WordPress, es probable que hayas agregado un formulario de contacto para que los visitantes puedan ponerse en contacto fácilmente contigo sobre tus productos y servicios.

Y si tu negocio tiene una ubicación física, entonces probablemente también agregaste un Mapa de Google de tu propia ubicación para animar a la gente a visitar tu tienda.

Lo que muchos dueños de negocios no saben es que puedes usar la geolocalización para autocompletar automáticamente el campo de dirección en tu formulario de contacto y mostrar la ubicación del usuario en un mapa. Luego, pueden verificar fácilmente si su dirección es correcta o arrastrar el marcador para cambiarla si es necesario.

Esto mejora la experiencia general del usuario y ayuda a reducir el abandono del formulario.

Conocer la ubicación de tus usuarios también te permite usar la geolocalización para mostrar contenido personalizado y aumentar las tasas de conversión.

Dicho esto, te mostraremos cómo incrustar un mapa de Google en formularios de contacto. Aquí tienes un resumen de todos los temas que cubriremos en este artículo:

• Cómo incrustar un mapa de Google en un formulario de contacto
• Cómo ver los datos de ubicación del usuario en un formulario
• Tutorial en video
• Recursos adicionales 🔗: Las mejores guías sobre el uso de mapas en WordPress

¡Empecemos!

Cómo incrustar un mapa de Google en un formulario de contacto

Para este tutorial, utilizaremos WPForms, el mejor plugin de formularios de contacto para WordPress. Te permite crear fácilmente cualquier tipo de formulario con un sencillo constructor de formularios de arrastrar y soltar.

Existe una versión gratuita de WPForms disponible con todas las funciones que necesitas para crear un formulario de contacto básico. Sin embargo, para este tutorial, usaremos WPForms Pro, ya que incluye el complemento de Google Maps.

ℹ️ ¿Sabías que? En WPBeginner, usamos WPForms para muchas cosas. Por ejemplo, potencia nuestro formulario de contacto y las encuestas anuales de satisfacción de lectores. Tenemos una gran experiencia con él, y puedes encontrar todo al respecto en nuestra reseña detallada de WPForms.

Lo primero que necesitas hacer es instalar y activar el plugin WPForms. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, debes visitar la página WPForms » Ajustes para introducir tu clave de licencia. Puedes encontrar esta información en el área de tu cuenta de WPForms. Asegúrate de hacer clic en el botón ‘Verificar clave’ para activar tu licencia.

A continuación, debes navegar a WPForms » Complementos y buscar el Complemento de Geolocalización.

Puedes usar la opción de búsqueda en la parte superior de la pantalla o simplemente desplazarte por los complementos disponibles.

Una vez que lo hayas encontrado, debes instalar el complemento haciendo clic en el botón ‘Instalar complemento’.

Ahora que el complemento de Geolocalización está activado, necesitarás configurar sus ajustes. Para ello, navega a WPForms » Ajustes y haz clic en la pestaña ‘Geolocalización’.

En esta página, necesitas seleccionar un proveedor de geolocalización. Para este artículo, elegiremos la API de Google Places.

También deberías marcar la casilla ‘Ubicación actual’. Esto detectará y autocompletará la dirección cuando los usuarios completen el formulario de contacto, ahorrando tiempo y mejorando la precisión.

A continuación, deberás desplazarte hacia abajo hasta la configuración de la API de Google Places.

Se te pedirá que ingreses tu clave API de Google. Puedes obtener tu clave de Google y luego pegarla en el campo de entrada. Te mostraremos cómo hacerlo en la siguiente sección.

Generar una clave API de Google Places

Puedes obtener una clave API para Google Places yendo al sitio web de la Consola de Google Cloud.

Se te pedirá que selecciones tu país en un menú desplegable y que aceptes los términos de servicio. En algunos países, también se te puede ofrecer la oportunidad de suscribirte a una lista de correo.

Cuando estés listo para pasar al siguiente paso, haz clic en ‘Aceptar y continuar’.

A continuación, deberás seleccionar un proyecto para la clave API. Simplemente haz clic en ‘Seleccionar un proyecto’ y haz clic en el proyecto que deseas usar de la lista.

Si no has creado un proyecto antes, o si este es un sitio web nuevo que aún no has agregado a Google, entonces deberías hacer clic en ‘Nuevo proyecto’ para configurar uno.

Ahora deberías estar en la página ‘APIs y servicios’, donde puedes habilitar las APIs necesarias para mostrar Google Maps en tu sitio de WordPress.

Deberás hacer clic en el botón ‘+ Habilitar APIs y servicios’ en la parte superior de la página.

Esto te llevará a la Biblioteca de API de Google, donde deberás habilitar tres API de mapas diferentes.

Puedes encontrarlas usando la función de búsqueda en la parte superior de la página o haciendo clic en el enlace ‘Ver todo’ junto a la sección de Mapas.

Primero, necesitas encontrar y habilitar la API de Lugares. Una vez que la localices, deberás hacer clic en ella. En la siguiente página, deberás hacer clic en el botón ‘Habilitar’.

Después de eso, deberás hacer lo mismo para la API de JavaScript de Mapas y la API de Geocodificación.

Ahora que has habilitado las tres API, puedes crear una clave de API.

En el menú de la izquierda, debes navegar a API y servicios » Credenciales.

Desde aquí, podrás hacer clic en el botón ‘+ Crear credenciales’ en la parte superior de la pantalla y luego seleccionar la opción ‘Clave de API’.

Tu clave de API se creará y se mostrará en una ventana emergente.

Más adelante en este tutorial, necesitarás copiar esa clave en la configuración de WPForm. Por ahora, veamos cómo aplicar algunas restricciones al uso de la clave de API.

Restringir tu clave de API de Google Places

El uso excesivo de la clave de API puede sacarte del plan gratuito y costar más de lo esperado. Te recomendamos que restrinjas la clave para evitar un uso no autorizado o inesperado.

Para hacerlo, debes hacer clic en el enlace ‘Restringir clave’ en la parte inferior de la ventana emergente ‘Clave de API creada’ en la captura de pantalla anterior.

En la siguiente página, puedes configurar varias restricciones diferentes. La primera de ellas es ‘Restricciones de aplicación’.

En esta sección, debes hacer clic en la opción ‘Referentes HTTP (sitios web)’. Luego, la clave solo se usará en sitios web.

A continuación, debes asegurarte de que solo se use en tu propio sitio web. Para hacerlo, debes desplazarte hacia abajo hasta la sección ‘Restricciones de sitio web’ y luego hacer clic en el botón ‘Agregar un elemento’.

Ahora, deberías escribir el nombre de dominio de tu sitio web en el campo ‘Nuevo elemento’ usando el patrón *example.com/*.

Si vas a usar Google Maps en más de un sitio web, entonces puedes hacer clic en el botón ‘Agregar un elemento’ y añadir tantos dominios como necesites.

Ahora que has restringido la clave de API solo a tus propios sitios web, también puedes restringirla para que funcione solo con las API de Google que agregaste anteriormente.

Necesitas desplazarte hacia abajo hasta la sección 'Restricciones de API' de la página y seleccionar la opción 'Restringir clave'. Esto mostrará un menú desplegable donde deberías marcar las casillas 'API de Geocaching', 'API de JavaScript de Mapas' y 'API de Lugares'.

Una vez que hayas hecho eso, deberías hacer clic en el enlace 'OK' para guardar tu configuración.

Finalmente, asegúrate de hacer clic en el botón 'Guardar' en la parte inferior de la página para activar todas las restricciones que hayas elegido.

Ten en cuenta que la configuración puede tardar hasta 5 minutos en surtir efecto.

Agregar la clave de API de Google a la configuración de WPForms

Ahora verás la clave de API listada con cualquier otra que tengas disponible. Deberías hacer clic en el ícono 'Copiar' para poder agregar la clave a la página de configuración de Geolocation de WPForms.

Ten en cuenta que si alguna vez necesitas cambiar la configuración o las restricciones de alguna de las API, puedes hacer clic en el ícono de Editar a la derecha.

Ahora necesitas regresar a tu sitio web, que aún debería estar en la página WPForms » Configuración » Geolocation.

Una vez allí, pega la clave en el campo API de Lugares de Google en la configuración de WPForms. Una vez que hayas hecho eso, asegúrate de hacer clic en el botón 'Guardar Configuración'.

Crear un formulario de contacto con un mapa de Google incrustado en WordPress

Ahora que has configurado WPForms y Google Places, estás listo para crear un formulario de contacto en WordPress.

Hay algunas maneras en las que puedes crear tus formularios de WordPress con WPForms. Primero, puedes empezar con un lienzo en blanco. Esto te da control total para agregar y organizar campos de formulario desde cero, lo que lo hace perfecto para diseños completamente personalizados.

Segundo, puedes usar el creador de formularios con IA para generar un formulario completo basado en una simple indicación de texto. Esto ahorra mucho tiempo si no estás seguro por dónde empezar.

Y por último, puedes seleccionar entre más de 2,000 plantillas de formularios prehechas. Ya sea que necesites un formulario de contacto, una encuesta, un formulario de reserva o algo más complejo, ¡probablemente haya una plantilla que se ajuste a tus necesidades!

Puedes empezar siguiendo nuestra guía sobre cómo crear un formulario de contacto en WordPress.

Una vez que hayas creado un formulario básico, necesitas agregar un campo de dirección. Puedes usar un bloque de Dirección o un campo de Texto de Línea Única. Para este tutorial, usaremos un campo de 'Texto de Línea Única'.

Simplemente arrastra el bloque 'Texto de Línea Única' al formulario.

A continuación, personalizaremos la configuración del campo.

Para hacerlo, necesitas hacer clic en el campo para mostrar la configuración de Texto de Línea Única.

Primero, deberías cambiar la etiqueta del campo a 'Dirección'. Esto dejará claro a tus usuarios qué deben escribir en el campo.

Después de eso, necesitas cambiar la configuración del campo para que muestre un mapa en el formulario de WordPress. Para hacerlo, tendrás que hacer clic en la pestaña Avanzado.

Una vez allí, deberías buscar la opción ‘Habilitar autocompletado de direcciones’ en la parte inferior de la configuración y activarla en la posición ‘Activado’.

Luego verás otra opción, ‘Mostrar mapa’, que también deberías habilitar. Puedes elegir mostrar el mapa encima o debajo del campo.

Agregar el formulario de contacto a tu sitio web

La forma más sencilla de agregar el formulario de contacto a tu sitio web es hacer clic en el botón ‘Incrustar’. Lo encontrarás junto al botón ‘Guardar’ en la parte superior de la pantalla del editor de formularios.

Se te preguntará si deseas agregar el formulario a un formulario existente o crear una nueva página.

Para este tutorial, haremos clic en el botón ‘Crear nueva página’.

A continuación, deberías darle un nombre a la página y luego hacer clic en el botón ‘¡Vamos!’.

Se creará una nueva página con ese nombre y tu formulario de contacto se agregará automáticamente.

Todo lo que necesitas hacer es hacer clic en el botón ‘Publicar’ para que el formulario esté activo.

Visualización del mapa de Google en el formulario de contacto

Cuando un usuario visite tu formulario de contacto, se le preguntará si desea permitir que tu sitio web acceda a su ubicación.

Si hacen clic en el botón ‘Permitir’, su ubicación actual se ingresará en el campo de dirección y se agregará un marcador de esa ubicación al mapa.

Esta función de autocompletado ahorrará tiempo a tus visitantes al hacer que sea más rápido y fácil escribir sus direcciones.

Si necesitan cambiar la dirección, simplemente pueden escribir una nueva o arrastrar el marcador a una ubicación diferente en el mapa.

Cómo ver los datos de ubicación del usuario en un formulario

Una vez que habilites la geolocalización, WPForms también registrará la ubicación de cada usuario cuando complete tu formulario. Conocer la ubicación de tus usuarios puede ayudarte a generar mejores leads.

Deberás navegar a WPForms » Entradas y luego hacer clic en tu formulario de contacto.

Ahora verás una lista de las entradas completadas por tus usuarios para ese formulario.

Para ver un envío de formulario en particular, simplemente haz clic en el enlace ‘Ver’ a la derecha.

Ahora verás los datos del formulario completados por el usuario, como su nombre, correo electrónico de negocios y número de teléfono de negocios, junto con algunos datos de ubicación.

Esto incluye un marcador en Google Maps, la ubicación del usuario, código postal y país, así como su latitud y longitud aproximadas.

Por supuesto, si el usuario no otorgó permiso para que el formulario conozca su ubicación, entonces no se mostrarán datos de ubicación.

Eso es todo. Has agregado exitosamente un Google Map a tu formulario de contacto. También puedes usar WPForms para crear encuestas en WordPress, crear un formulario de pago para aceptar pagos en línea, y más.

Tutorial en video

¿Quieres ver cómo funciona? Simplemente haz clic en el botón Reproducir ▶️ en el tutorial en video a continuación para aprender cómo incrustar un Google Map en tu formulario de contacto.

Suscríbete a WPBeginner

Recursos adicionales 🔗: Las mejores guías sobre el uso de mapas en WordPress

Esperamos que este tutorial te haya ayudado a aprender cómo incrustar un Google Map en formularios de contacto. A continuación, también puedes consultar algunas de nuestras otras guías sobre el uso de mapas en tu sitio web:

• Cómo agregar Google Maps en WordPress (La forma CORRECTA)
• Cómo Agregar un Localizador de Tiendas de Google Maps en WordPress
• Cómo incrustar Bing Maps en WordPress (paso a paso)
• Cómo agregar un mapa interactivo en WordPress
• Los Mejores Plugins de Google Maps para WordPress (La Mayoría Son Gratuitos)
• Los Mejores Plugins de Mapbox para WordPress
• Los Mejores Plugins de Geolocalización y GeoIP para WordPress

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.