Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Imagine que un visitante llega a su página de contacto y encuentra su dirección ya rellenada en el formulario, con un alfiler que marca su ubicación en un mapa. Es una experiencia de usuario excelente.

Si añades un mapa de Google con un pin de ubicación a tu formulario de contacto de WordPress, será más fácil rellenarlo, lo que mejorará la tasa de cumplimentación del formulario y animará a tus visitantes a ponerse en contacto contigo.

Este artículo te guiará paso a paso para incrustar un mapa de Google con un pin de ubicación directamente en tus formularios de contacto, sin necesidad de código.

How to Embed a Google Map in Contact Forms (With Map Pin)

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

Cuando creó su sitio web en WordPress, lo más probable es que añadiera un formulario de contacto para que los visitantes puedan ponerse fácilmente en contacto con usted acerca de sus productos y servicios.

Y si su negocio tiene una ubicación física, es probable que también haya añadido un mapa de Google de su propia ubicación para animar a la gente a visitar su tienda.

Lo que muchos propietarios de empresas no saben es que se puede utilizar la geolocalización para rellenar automáticamente el campo de dirección del 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 del formulario.

Conocer la ubicación de sus usuarios también le permite utilizar la geolocalización para mostrar contenidos personalizados y aumentar las tasas de conversión.

Dicho esto, veamos cómo incrustar un mapa de Google en formularios de contacto.

Tutorial en vídeo

Subscribe to WPBeginner

Si prefiere instrucciones escritas, siga leyendo.

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

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

Existe una versión gratuita de W PForms con todas las características necesarias para crear un formulario de contacto básico. Para este tutorial, sin embargo, vamos a utilizar WPForms Pro ya que incluye la extensión de Google Map.

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

Tras la activación, debe visitar la página WPForms ” Ajustes para introducir su clave de licencia. Puede encontrar esta información en su área de cuenta WPForms. Asegúrese de hacer clic en el botón ‘Verificar clave’ para activar su licencia.

Visit the WPForms » Settings Page to Enter Your License Key

A continuación, debe navegar a WPForms ” Extensiones y encontrar la extensión Geolocalización. Puede utilizar la opción de búsqueda en la parte superior de la pantalla o simplemente desplazarse por las extensiones disponibles.

Una vez que lo hayas encontrado, debes instalar la extensión al hacer clic en el botón “Instalar extensión”.

Navigate to WPForms » Addons and Install the Geolocation Addon

Ahora que la extensión Geolocalización está activada, tendrá que configurar sus ajustes. Para ello, vaya a WPForms ” Ajustes y haga clic en la pestaña ‘Geolocalización’.

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

Select a Geolocation Provider

También debe hacer clic en la casilla de verificación “Ubicación actual”. Esto detectará y autocompletará la dirección cuando los usuarios rellenen el formulario de contacto, guardando o ahorrando tiempo y mejorando la precisión.

A continuación, debes desplazarte hasta los ajustes de la API de Google Places. Se te pedirá que introduzcas tu clave API de Google. Puedes obtener tu clave de Google y pegarla en el campo de entrada. Te mostraremos cómo hacerlo en la siguiente sección.

Scroll Down to the Google Places API Settings

Generación de una clave API de Google Places

Puedes obtener una clave API para Google Places en el sitio web de Google Cloud Console.

Se le pedirá que seleccione su país en un menú desplegable y que acepte las condiciones del servicio. En algunos países, también se le ofrecerá la posibilidad de inscribirse en una lista de correo.

Obtain an API Key for Google Places From the Google Cloud Console Website

Cuando esté listo para pasar al siguiente paso, haga clic en “Aceptar y continuar”.

A continuación, tendrás que seleccionar un proyecto para la clave API. Basta con hacer clic en “Seleccionar un proyecto” y seleccionar el proyecto que desea utilizar de la lista.

Select a Project or Create a New One

Si no has creado un proyecto anteriormente, o se trata de un sitio web nuevo que aún no has añadido a Google, debes hacer clic en “Nuevo proyecto” para establecer uno.

Nota: Google te exigirá que actives la facturación de ese proyecto para poder utilizar la API de Google Places. Ofrecen los primeros 300 $ de forma gratuita, lo que es suficiente para incrustar un mapa sencillo como el que estamos creando en este tutorial. Los sitios de menor tráfico no tendrán que pagar nada y te pedirán permiso para actualizar antes de cobrarte ninguna cuota.

Ahora deberías estar en la página “API y servicios”, donde puedes activar las API necesarias para mostrar Google Maps en tu sitio de WordPress.

Deberá hacer clic en el botón “+ Activar API y servicios” situado en la parte superior de la página.

Click the 'Enable APIs and Services' Button

Esto te llevará a la biblioteca de API de Google, donde tendrás que activar tres API de asignación diferentes.

Puede encontrarlos utilizando la función de búsqueda de la parte superior de la página o enlazando el enlace “Ver todos” situado junto a la sección Mapas.

You Need to Enable Three Mapping APIs

En primer lugar, tienes que encontrar y activar la API de Lugares. Una vez que la localices, deberás hacer clic en ella. En la página siguiente, deberás hacer clic en el botón “Activar”.

A continuación, haga lo mismo con la API JavaScript de mapas y la API de geocodificación.

Enable the Places API

Ahora que ha activado las tres API, puede crear una clave de API.

En el menú de la izquierda, debe ir a API y servicios ” Credenciales.

Desde aquí, podrá hacer clic en el botón “+ Crear credenciales” situado en la parte superior de la pantalla y, a continuación, seleccionar la opción “Clave API”.

Click the ‘+ Create Credentials’ Button

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

Más adelante en este tutorial, tendrás que copiar esa clave en los ajustes de WPForm. Por ahora, echemos un vistazo a cómo poner algunas restricciones en el uso de la clave API.

Your API Key Will Be Created and Displayed on a Popup Window

Restricción de la clave API de Google Places

El uso excesivo de la clave API puede sacarle del plan gratuito y costarle más de lo que espera. Te recomendamos que restrinjas la clave para evitar usos no autorizados o inesperados.

Para ello, haga clic en el enlace “Restringir clave” situado en la parte inferior de la ventana emergente “Clave API creada” de la captura de pantalla anterior.

En la página siguiente, puede establecer una serie de restricciones diferentes. La primera de ellas es “Restricciones de aplicación”.

En esta sección, debe hacer clic en la opción “Referencias HTTP (sitios web)”. Entonces, la clave solo se utilizará en sitios web.

Restrict to HTTP Referrers (Web Sites)

A continuación, debe asegurarse de que solo se utiliza en su propio sitio web. Para ello, desplácese hasta la sección “Restricciones del sitio web” y haga clic en el botón “Añadir un elemento”.

Ahora, debe escribir el nombre de dominio de su sitio web en el campo “Nuevo artículo” utilizando el patrón *ejemplo.com/*.

Type Your Website Domain Into the ‘New Item’ Field Using the Pattern *example.com/*

Si vas a utilizar Google Maps en más de un sitio web, puedes hacer clic en el botón “Añadir 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 has añadido anteriormente.

Desplácese hasta la sección “Restricciones de API” de la página y seleccione la opción “Restringir clave”. Aparecerá un menú desplegable en el que deberás marcar las casillas “API de geocaching”, “API JavaScript de mapas” y “API de lugares”.

Restrict the API Key to Specific APIs

Una vez hecho esto, haga clic en el enlace “Aceptar” para guardar los ajustes.

Por último, asegúrese de hacer clic en el botón “Guardar” de la parte inferior de la página para activar todas las restricciones que haya elegido.

Click the ‘Save’ Button to Activate the Restrictions You Have Chosen

Tenga en cuenta que los ajustes pueden tardar hasta 5 minutos en surtir efecto.

Añadir la clave de la API de Google a los ajustes de WPForms

Ahora verá la clave API listada con cualquier otra que tenga disponible. Debe hacer clic en el icono Copiar para poder añadir la clave a la página de ajustes de Geolocalización de WPForms.

Click the Copy Icon and Add the Key to WPForms

Tenga en cuenta que si alguna vez necesita cambiar alguno de los ajustes o restricciones de la API, puede hacer clic en el icono Editar de la derecha.

Ahora tiene que volver a su sitio web, que todavía debe estar en el WPForms ” Ajustes ” Geolocalización página.

Una vez allí, pega la clave en el campo API de Google Places en los ajustes de WPForms. Una vez hecho esto, asegúrate de hacer clic en el botón “Guardar ajustes”.

Scroll Down to the Google Places API Settings

Nota: Google Places requiere que dispongas de un certificado SSL para tu sitio. Para saber cómo conseguirlo, marca / comprueba nuestra guía para principiantes sobre cómo obtener un certificado SSL gratuito.

Creación de un formulario de contacto con Google Map incrustado en WordPress

Ahora que ya has configurado WPForms y Google Places, estás listo para crear un formulario de contacto en WordPress. Puedes empezar siguiendo nuestra guía sobre cómo crear un formulario de contacto en WordPress.

Una vez que haya creado un formulario básico, deberá añadir un campo de dirección. Puede utilizar un bloque de dirección o un campo de texto de una sola línea. Para este tutorial, utilizaremos un campo de texto de una sola línea.

Basta con arrastrar el bloque de texto unifilar al formulario.

Drag the Single Line Text Block Onto the Form

A continuación, personalizaremos los ajustes del campo. Para ello, debe hacer clic en el campo para mostrar los ajustes de Texto de línea única.

En primer lugar, debe cambiar la etiqueta del campo a “Dirección”. De este modo, los usuarios tendrán más claro qué deben escribir en el campo.

Rename the Field's Label to 'Address'

A continuación, deberá cambiar los ajustes del campo para que muestre un mapa en el formulario de WordPress. Para ello, tendrás que hacer clic en la pestaña Avanzado.

Una vez allí, busque la opción “Activar autocompletado de direcciones” en la parte inferior de los ajustes y conmútela a la posición “Activado”. A continuación verá otra opción, “Mostrar mapa”, que también debe activar. Puede asignar el mapa encima o debajo del campo.

Toggle the ‘Enable Address Autocomplete’ Option On

Cómo añadir el formulario de contacto a su sitio web

La forma más sencilla de añadir el formulario de contacto a tu sitio web es hacer clic en el botón “Incrustar”. Lo encontrarás a continuación del botón “Guardar”, en la parte superior de la pantalla del editor de formularios.

Se le preguntará si desea añadir el formulario a uno ya existente o crear una nueva página.

Click the 'Create New Page' Button

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

A continuación, dale un nombre a la página y haz clic en el botón “¡Adelante!

Give the Page a Name and Click the ‘Let’s Go!’ Button

Se creará una nueva página con ese nombre y su formulario de contacto se añadirá automáticamente.

Sólo tiene que hacer clic en el botón “Publicar” para poner en marcha el formulario.

Click the 'Publish' Button to Push the Page Live

Visualización del 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 web acceda a su ubicación.

The User Will Need to Give Permission for Your Website to Access Their Location

Si hace clic en el botón “Permitir”, se introducirá su dirección actual en el campo de dirección y se añadirá una chincheta de esa dirección al mapa.

Esta característica de autocompletar guardará o ahorrará tiempo a sus visitantes haciéndoles más fácil y rápido escribir sus direcciones.

Autocomplete Makes Typing an Address Faster and More Accurate

Si necesita cambiar la dirección, sólo tiene que escribir una nueva o arrastrar la chincheta a otro lugar del mapa.

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

Una vez que active la geolocalización, WPForms también registrará la ubicación de cada usuario cuando llene su formulario. Conocer la ubicación de sus usuarios puede ayudarle a encontrar mejores clientes potenciales.

Usted tendrá que navegar a WPForms ” Entradas y, a continuación, haga clic en su formulario de contacto.

Navigate to WPForms » Entries Then Click the Contact Form

Ahora verá un anuncio / catálogo / ficha de las entradas / registros rellenados por sus usuarios para ese formulario.

Para ver el envío de un formulario concreto, sólo tiene que hacer clic en el enlace “Ver” de la derecha.

Click the ‘View’ Link to View an Entry

Ahora verá los datos del formulario rellenado por el usuario, como su nombre, correo electrónico de la empresa y número de teléfono de la empresa, junto con algunos datos de localización.

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

You Will See a Pin on Google Maps With Their Location

Por supuesto, si el usuario no ha dado permiso para que el formulario conozca su ubicación, entonces no se mostrará ningún dato de ubicación.

Eso es todo. Has añadido correctamente un mapa de Google a tu formulario de contacto. También puede utilizar WPForms para crear encuestas en WordPress, crear un formulario de pago para aceptar pagos en línea, y mucho más.

Nuestras mejores guías sobre el uso de mapas en WordPress

Esperamos que este tutorial te haya ayudado a aprender a incrustar un mapa de Google en formularios de contacto. También puedes consultar otras guías sobre el uso de mapas en tu sitio web:

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

3 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk

    I use WP Forms and I’m considering integrating maps into the contact form to make the location visible at first glance. I must admit that before seeing this article, I didn’t even know that WP Forms could do this.

    • WPBeginner Support

      Glad we could share the functionality :)

      Administrador

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.