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

Hemos completado nuestra buena parte de formularios en línea y a menudo nos encontramos reescribiendo constantemente la misma dirección.

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 detalle pequeño, pero puede tener un gran impacto. En nuestra experiencia con WPForms, puede ayudar a aumentar las tasas de finalización de formularios y brindar 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 configuras tu sitio de WordPress, probablemente agregaste un formulario de contacto para que los visitantes puedan comunicarse contigo sobre tus productos o servicios. Y si tienes una tienda física, probablemente agregaste un Mapa de Google para ayudar a las personas a encontrar tu ubicación fácilmente.

Lo que muchos dueños de negocios no saben es que puedes usar la geolocalización para completar automáticamente el campo de dirección en tu formulario de contacto y mostrar la ubicación del visitante 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 del usuario en general y puede ayudar a reducir el abandono de formularios.

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.

Ahora, veamos cómo incrustar un Mapa de Google en tus formularios de contacto. Aquí tienes un resumen de todos los temas que cubriremos en este artículo:

• How to Embed a Google Map in a Contact Form
  • Generar una clave API de Google Places
  • Restringir tu clave de API de Google Places
  • Agregar la clave de API de Google a la configuración de WPForms
  • Crear un formulario de contacto con un mapa de Google incrustado en WordPress
  • Agregar el formulario de contacto a tu sitio web
  • Visualización del mapa de Google en el formulario de contacto
• Cómo ver los datos de ubicación del usuario en un formulario
• Tutorial en video: Incrustar un Mapa de Google en formularios de contacto
• 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. Hemos tenido una gran experiencia con él, y puedes obtener más información en nuestra reseña detallada de WPForms.

Lo primero que necesitas hacer es crear una cuenta de WPForms. En el sitio web de WPForms, haz clic en ‘Obtener WPForms Ahora’ y luego completa el proceso de registro.

Una vez hecho esto, accederás al panel de tu cuenta de WPForms, donde podrás descargar tu archivo ZIP de WPForms Pro y tu clave de licencia.

A continuación, puedes instalar y activar el plugin de WPForms.

Desde tu área de administración de WordPress, puedes ir a Plugins » Añadir Nuevo Plugin.

Luego, procede a usar la barra de búsqueda para encontrar rápidamente el plugin de WPForms.

En los resultados de búsqueda, simplemente haz clic en el botón ‘Instalar Ahora’ y luego en ‘Activar’ para empezar a usarlo en tu sitio de WordPress.

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, procede a hacer 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 tutorial, elegiremos la ‘API de Google Places’.

También deberías hacer clic en la casilla ‘Ubicación Actual’. Esto solicita al navegador del usuario su ubicación para pre-rellenar automáticamente el campo de dirección. Esto ahorra tiempo y ayuda a mejorar la precisión.

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

Aquí, WPForms 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.

Primero, simplemente selecciona tu país de un menú desplegable y acepta 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 activar tres APIs de mapas:

• API de Google Places: permite que tu formulario obtenga direcciones sugeridas a medida que los usuarios escriben.
• API de JavaScript de Mapas: muestra el mapa interactivo en tu sitio.
• API de geocodificación: convierte una dirección en coordenadas exactas para que el mapa pueda colocar el marcador correctamente.

Puedes encontrarlos usando la barra de búsqueda en la parte superior o haciendo clic en el botón ‘Ver todo’ en la sección Mapas.

Desde aquí, busquemos y activemos la API de Places. Una vez que la localices, deberás hacer clic en ella.

En la siguiente página, haz 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.

Y una vez que hayas 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 WPForms. 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 nivel 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, deberías hacer clic en la opción ‘Referenciadores HTTP (sitios web)’. Entonces, 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 geocodificación’, ‘API de JavaScript de mapas’ y ‘API de Places’.

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 junto a cualquier otra que tengas disponible. Deberías hacer clic en el icono ‘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 Google Places’ en la configuración de WPForms. Y 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 varias maneras diferentes de 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.

Por último, puedes seleccionar entre más de 2,000 plantillas de formularios predefinidas. 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 una sola línea.

Para este tutorial, usaremos un campo de 'Texto de una sola línea'. Así que, simplemente arrastra el bloque 'Texto de una sola línea' 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 una página existente o crear una nueva.

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 poner la página en línea.

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 ingresar 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 envíen 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 enviados 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, el código postal y el país. Ten en cuenta que la precisión depende del dispositivo del usuario; los datos GPS de los teléfonos móviles suelen ser muy precisos, mientras que la ubicación basada en IP de las computadoras de escritorio puede ser aproximada.

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. Ha agregado exitosamente un Mapa de Google a su formulario de contacto en WordPress. También puede usar WPForms para crear encuestas en WordPress, crear un formulario de pago para aceptar pagos en línea, y más.

Tutorial en video: Incrustar un Mapa de Google en formularios de contacto

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