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

¿Quieres mostrar un mapa en el formulario de contacto de tu web?

Puede usar la geolocalización para completar previamente la dirección del usuario y proporcionar la ubicación del usuario fijando el mapa. Esto hace que completar el formulario sea más fácil y rápido, lo que resulta en una mejor tasa de finalización.

En este artículo, le mostraremos cómo incrustar un mapa de Google con un pin de mapa en formularios de contacto.

¿Por qué incrustar Google Map en su formulario de contacto?

Cuando creó su sitio web de WordPress, probablemente agregó un formulario de contacto para que los visitantes pudieran contactarlo fácilmente sobre sus productos y servicios.

Y si su empresa tiene una ubicación física, es probable queAgregue un mapa de Google a su propia ubicación para alentar a las personas a visitar su tienda.

Lo que muchos dueños de negocios no saben es que puede usar la geolocalización para completar automáticamente el campo de dirección en su formulario de contacto y mostrar la ubicación del usuario en un mapa. Esto mejora la experiencia general del usuario y ayuda a reducir el abandono de formularios.

Si conoce las ubicaciones de sus usuarios, también puede utilizar la orientación por geolocalización para mostrar contenido personalizado y aumentar su tasa de conversión.

Veamos cómo incrustar Google Map en formularios de contacto.

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

Para este tutorial usaremos WPForms, el mejor complemento de formulario de contacto para WordPress. Puede crear fácilmente cualquier tipo de formulario con un simple diseñador de formularios de arrastrar y soltar.

Hay versión gratuita de WPForms disponible con todas las funciones que necesita para crear un formulario de contacto simple. Sin embargo, para este tutorial usaremos Formularios WP Pro ya que incluye el complemento de mapas de Google.

Primero debes instalarlo y activarlo WPForms enchufar. Consulte nuestra guía paso a paso para instalar el complemento de WordPress para obtener más detalles.

Después de la activación, debe visitar WPForms »Configuración para ingresar su clave de licencia. Puede encontrar esta información en el área de su cuenta de WPForms. Asegúrese de hacer clic en el botón Verificar clave para activar su licencia.

Entonces necesitas navegar WPForms »Complementos y encuentra el complemento de geolocalización. Puede usar la opción de búsqueda en la parte superior de la pantalla o simplemente explorar los complementos disponibles.

Una vez que lo encuentre, debe instalar el complemento haciendo clic en el botón "Agregar complemento".

Ahora que el complemento de geolocalización está activado, debe configurar sus ajustes. Para hacer esto, vaya a WPForms »Configuración y haga clic en la pestaña Geolocalización.

Esta página requiere que seleccione un proveedor de geolocalización. Para este artículo, elegimos la API de Google Places.

También debe marcar la casilla Ubicación actual. Esto reconocerá y completará automáticamente la dirección cuando los usuarios completen el formulario de contacto, ahorrando tiempo y mejorando la precisión.

Luego, debe desplazarse hacia abajo hasta la configuración de la API de Google Places. Se le pedirá que ingrese su clave API de Google. Puede obtener su clave de Google y luego ponerla en la caja. Le mostraremos cómo hacer esto en la siguiente sección.

Generar una clave API de Google Places

Puede obtener la clave API de Google Places yendo a Consola de la nube de Google sitio web.

Se le pedirá que seleccione su país del menú desplegable y acepte los Términos y condiciones. En algunos países puedes ser tú ofreció la oportunidad de registrarse en una lista de correo.

Cuando esté listo para continuar con el siguiente paso, haga clic en Aceptar y continuar.

Luego, debe seleccionar un proyecto para la clave API. Simplemente haga clic en "Seleccionar proyecto" y haga clic en el proyecto que desea usar de la lista.

Si aún no ha creado un proyecto, o es un sitio nuevo que aún no ha agregado a Google, deberá hacer clic en Nuevo proyecto para configurarlo.

Ahora debería estar en la página API y servicios, donde puede habilitar las API requeridas para mostrar Google Maps en su sitio web. Debe hacer clic en el botón "+ Habilitar API y servicios" en la parte superior de la página.

Esto lo llevará a la biblioteca de API de Google, donde debe activar tres API de mapeo diferentes.

Puede encontrarlos usando la función de búsqueda en la parte superior de la página o haciendo clic en el enlace "Ver todo" al lado de la sección "Mapas".

Primero debe encontrar y activar la API de Places. Una vez que lo encuentre, debe hacer clic en él. En la página siguiente, debe hacer clic en el botón "Activar".

Luego, debe hacer lo mismo para la API de JavaScript de Maps y la API de codificación geográfica.

Después de activar las tres API, puede crear una clave de API.

En el menú de la izquierda tienes que navegar API y servicios »Certificados.

Desde aquí, puede hacer clic en el botón "+ Crear credenciales" en la parte superior de la pantalla y luego seleccionar la opción "Clave API".

Su clave API se generará y se mostrará en una ventana emergente.

Más adelante en este tutorial, debe copiar esta clave a la configuración de WPForm. Primero, veamos cómo puede restringir el uso de la clave API.

Restrinja su clave API de Google Places

El uso excesivo de la clave API puede sacarlo del plan gratuito y costarle más de lo que espera. Le recomendamos que limite la clave para evitar el uso no autorizado o inesperado.

Para hacer esto, debe hacer clic en el enlace Restringir claves en la parte inferior de la ventana emergente Clave API creada en la captura de pantalla anterior.

En la página siguiente puede establecer una serie de restricciones diferentes. El primero es "Aplicación". Límites". En esta sección, debe hacer clic en la opción "HTTP Referrer (Sitios web)". Entonces la clave solo se usa en sitios web.

Luego, debe asegurarse de que solo se use en su propio sitio web. Para hacer esto, desplácese hacia abajo hasta la sección Restricciones del sitio web y luego haga clic en el botón Agregar elemento.

Ahora debe ingresar el nombre de dominio de su sitio web en el campo Nuevo elemento usando la plantilla *example.com/*.

Si usa Google Maps en más de un sitio web, puede hacer clic en el botón Agregar elemento y agregar tantos dominios como necesite.

Ahora que ha limitado la clave API a sus propios sitios web, también puede restringirla para que funcione solo con las API de Google agregadas anteriormente.

Debe desplazarse hacia abajo hasta la sección Restricciones API de la página y seleccionar la opción Restringir claves. Aparecerá un menú desplegable en el que deberá marcar las casillas en la API para geocaching, API para Maps JavaScript y API en lugares.

Después de hacer esto, debe hacer clic en el enlace "Aceptar" para guardar la configuración. Finalmente, asegúrese de hacer clic en el botón "Guardar" en la parte inferior de la página para activar cualquier restricción que haya seleccionado.

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

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

Ahora verá la clave API junto con todas las demás que tiene disponibles. Debe hacer clic en el icono de copia para poder agregar la clave a la página de configuración de geolocalización de WPForms.

Tenga en cuenta que si alguna vez necesita cambiar cualquiera de las configuraciones o restricciones de la API, puede hacer clic en el ícono Editar a la derecha

Ahora debe volver a su sitio web, en el que aún debería estar WPForms »Configuración» Geolocalización Remover.

Desde allí, coloque la clave en el campo API de Google Places en la configuración de WPForms. Una vez que haya hecho eso, asegúrese de hacer clic en el botón "Guardar configuración".

Cree un formulario de contacto con un mapa de Google incorporado en WordPress

Después de configurar WPForms y Google Places, puede crear un formulario de contacto en WordPress. Puede comenzar siguiendo nuestra guía para crear un formulario de contacto de WordPress.

Después de crear un formulario básico, debe agregar un campo de dirección. Puede utilizar un bloque de direcciones o un cuadro de texto de una sola línea. Usaremos un cuadro de texto de una sola línea para este tutorial.

Simplemente arrastre el bloque de texto de una sola línea al formulario.

Luego ajustemos la configuración del campo. Para hacer esto, debe hacer clic en el cuadro para mostrar la configuración de texto en una línea.

Primero, debe cambiar la etiqueta en el campo "Dirección". Esto dejará en claro a sus usuarios qué escribir en el cuadro.

Luego, debe cambiar la configuración del campo para que muestre un mapa en el formulario. Para hacer esto, debe hacer clic en la pestaña Avanzado.

A partir de ahí, debe buscar la opción "Habilitar autocompletar" en la parte inferior de la configuración y cambiarla a "Activado". Luego verás otra opción, "Mostrar mapa", que también debes marcar. Puede elegir mostrar el mapa encima o debajo del campo.

Agrega el formulario de contacto a tu sitio web

La forma más fácil de agregar un formulario de contacto a su sitio web es hacer clic en el botón de inserción. Lo encontrarás junto a el botón "Guardar" en la parte superior del editor de formularios.

Se le preguntará si desea 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.

Luego debe nombrar la página y luego hacer clic en ¡Vamos! Botón.

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

Todo lo que tienes que hacer es hacer clic en el botón publicar para activar el formulario.

Mostrar el mapa de Google en el formulario de contacto

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

Cuando hacen clic en el botón Permitir, su ubicación actual se ingresa en el campo de dirección y se agrega un pin para esa ubicación al mapa.

Esta función de autocompletar ahorra tiempo a los visitantes al hacer que sea más rápido y fácil ingresar sus direcciones.

Si necesitan cambiar la dirección, simplemente pueden ingresar una nueva o arrastrar el marcador a otra parte del mapa.

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

Una vez que habilite la geolocalización, WPForms también registrará la ubicación de cada usuario a medida que complete su formulario. Conocer la ubicación de tus usuarios puede ayudarte a encontrar mejores clientes potenciales.

tienes que navegar WPForms »Entradas y luego haga clic en su formulario de contacto.

Ahora verá una lista de las entradas que han completado sus usuarios para este formulario.

Para ver una entrada específica, simplemente haga clic en el enlace Examinar. A la derecha.

Ahora verá los datos del formulario completados por el usuario, como el nombre, la dirección de correo electrónico comercial, el número de teléfono comercial y cierta información de ubicación.

Esto incluye un pin de Google Maps, ubicación del usuario, código postal y país, y latitud y longitud aproximadas.

Eso sí, si el usuario no ha dado permiso al formulario para conocer su ubicación, no se mostrarán los datos de ubicación.

Eso es todo, ha agregado con éxito Google Map a su formulario de contacto. También puede usar WPForms para crear encuestas en WordPress, crear un formulario de pago para aceptar pagos en línea y más.

Esperamos que este tutorial te haya ayudado a insertar un mapa de Google en tus formularios de contacto. Es posible que también desee aprender a realizar un sorteo o concurso, o explorar nuestra selección experta de los mejores complementos de WordPress para cualquier sitio web comercial.