Cómo crear un formulario de dirección con autocompletado de Google Maps

Los campos de dirección son frustrantes. Los usuarios escriben mal los nombres de las calles, olvidan los códigos postales, introducen direcciones incompletas o abandonan los formularios por completo porque escribir direcciones completas es tedioso.

La función de autocompletar de Google Maps lo soluciona sugiriendo direcciones completas y validadas a medida que los usuarios escriben. Después de escribir 3 o 4 caracteres, los usuarios ven un menú desplegable de direcciones reales para seleccionar.

¿Quieres configurarlo en tu formulario para eliminar errores tipográficos y acelerar la cumplimentación? En esta guía, te proporcionaré instrucciones paso a paso sobre cómo crear un formulario de dirección con autocompletar de Google Maps.

¿Cómo creo un formulario de dirección con autocompletar de Google Maps?

Con WPForms Pro y el complemento Geolocation, puedes añadir funciones de mapas a tus formularios en muy poco tiempo. Sigue estas sencillas instrucciones paso a paso para empezar:

Paso 1: Instalar el plugin WPForms

Lo primero que necesitarás hacer es instalar el plugin WPForms, que es un potente creador de formularios que facilita la creación de formularios de contacto, formularios de registro y mucho más.

Tiene más de 2100+ plantillas de formularios de WordPress que puedes usar y viene con herramientas de geolocalización integradas para facilitar mucho la visualización de mapas en tus 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 cubriremos en este tutorial.

Si eres nuevo en WordPress o tienes alguna dificultad durante el proceso de instalación del plugin, puedes consultar la guía paso a paso sobre cómo instalar un plugin de WordPress.

¡Actualiza a WPForms Pro ahora! :)

Paso 2: Habilitar el complemento Geolocation

Ahora que WPForms Pro está instalado, necesitas activar el complemento Geolocation. Esto es lo que potencia todas las funciones de mapas en tus formularios de contacto.

Para activar el complemento, dirígete a tu panel de WordPress y haz clic en WPForms » Complementos.

En la barra de búsqueda, escribe Geolocation. Luego haz clic en el botón Instalar complemento para que su estado cambie a Activo.

El complemento se instala automáticamente. No es necesario descargar archivos ni configurar nada todavía. A continuación, lo conectarás a Google Maps.

Paso 3: Configurar los ajustes de Geolocation

Una vez que hayas habilitado el complemento Geolocation, necesitas configurar sus ajustes. Para ello, haz clic en WPForms » Ajustes.

En la página de ajustes de WPForms, haz clic en Geolocation en las pestañas superiores para acceder a sus ajustes.

Aquí verás diferentes opciones para configurar el complemento Geolocation según diferentes necesidades y requisitos:

• Proveedor de lugares: Tienes la opción de elegir qué proveedor deseas para recibir tu información de geolocalización. Aquí seleccionaremos la API de Google Places como nuestro proveedor de lugares.

• Ubicación actual: Habilita esta opción para permitir que la ubicación de tu usuario se rellene previamente en el formulario.

• API de Google Places: Para habilitar la función de autocompletado de direcciones y mostrar Google Maps en tus formularios, necesitarás generar una clave de API y conectarla con WPForms.

Veamos el proceso completo para generar una clave de API.

Generar una clave de API desde la Consola de desarrolladores de Google

Ve a la Consola de desarrolladores de Google y selecciona el proyecto desde el menú Seleccionar un proyecto en la parte superior.

Si no tienes ningún proyecto creado previamente, haz clic en Crear proyecto para crear uno nuevo.

Una vez que hayas creado un proyecto nuevo con éxito, haz clic en Habilitar APIs y servicios.

Esto abrirá una Biblioteca de API de Google.

Desde aquí, deberás habilitar tres (3) APIs:

1. API de Geocodificación
2. API de JavaScript de Maps
3. API de Places

Esta biblioteca de API proporciona una opción de búsqueda sencilla; escribe el nombre de la API en el cuadro de búsqueda, ve a tu API y haz clic en el botón HABILITAR.

Una vez que hayas habilitado todas tus APIs, vuelve al panel de tu Consola de Google y navega a la pestaña Credenciales.

Haz clic en el botón Crear credenciales en la parte superior y selecciona la opción Clave de API.

Se abrirá una ventana emergente con una clave de API. Haz clic en la opción RESTRINGIR CLAVE en la esquina inferior derecha de la ventana emergente.

Se abrirá una nueva página, donde deberás configurar los siguientes ajustes:

• Restricciones de aplicación: Desde aquí, puedes seleccionar qué sitios web, direcciones IP o aplicaciones pueden usar la clave de API. Aquí deberás elegir la opción Referentes HTTP para permitir que tu clave se use dentro de tus sitios web.

• Restricciones de sitio web: Una vez que selecciones los Referentes HTTP, se mostrará una nueva opción, restricciones de sitio web. Aquí necesitas añadir el nombre de dominio de tu sitio web para restringir que la clave de API sea utilizada solo por los sitios web especificados.

• Restricciones de API: Después de restringir tu clave por Aplicación y Sitio web, deberás restringirla por API. Para hacer esto, haz clic en la opción Restringir clave.

Esto abrirá un menú desplegable con una opción de múltiples APIs. Selecciona las siguientes APIs del menú desplegable:

• API de Places
• API de JavaScript de Maps
• Geocoding API

Una vez que hayas terminado de seleccionar las APIs, haz clic en el botón Guardar para guardar tus ajustes, lo que te redirigirá de vuelta a la página de Credenciales. Copia tu clave de la página y vuelve a la configuración de WPForms.

En la configuración de WPForms, pega esto en el campo Clave de API bajo la API de Google Places y haz clic en el botón Guardar configuración.

Tu configuración de Geolocalización ya está configurada. A continuación, crearás un formulario con el autocompletado de direcciones habilitado.

Paso 4: Crear tu formulario de dirección con autocompletar

Con el complemento de Geolocalización configurado, estás listo para crear tu formulario de contacto. Esto lleva unos 5 minutos. Ve a WPForms » Añadir nuevo en tu panel de WordPress para abrir el constructor de formularios.

Dale un nombre a tu formulario en el campo Nombre de tu formulario. Algo como “Ponerse en contacto” funciona bien. Verás algunas opciones aquí. Si quieres ahorrar tiempo, puedes elegir entre nuestras más de 2100 plantillas de formularios de WordPress.

Recomiendo elegir la Plantilla de formulario de contacto simple. Esto te proporciona un formulario de contacto listo para usar con los campos esenciales ya añadidos.

La plantilla incluye un campo Nombre, un campo Correo electrónico y un campo Comentario o mensaje. Puedes personalizar estos campos, añadir otros nuevos o eliminar los que no necesites.

Ahora, probablemente haya algunas cosas más, otros ajustes del formulario que quizás quieras configurar, como notificaciones y confirmaciones. Si es así (y lo recomiendo encarecidamente), consulta nuestra guía detallada sobre cómo crear tu primer formulario.

¡Prueba el Creador IA de WPForms! :)

Paso 5: Añadir el campo de dirección a tu formulario

Ahora que tenemos nuestro formulario listo, solo necesitamos añadir el Campo de dirección. A la izquierda, arrastra el Campo de dirección de la sección Campos elegantes y colócalo en tu formulario.

El campo de dirección ya incluye un texto de etiqueta y subetiqueta para tu comodidad. Tienes la flexibilidad de personalizar el texto de la etiqueta, seleccionar el esquema de dirección, personalizar el tamaño del campo y ocultar las etiquetas y subetiquetas.

Ahora activarás la funcionalidad de autocompletar para tu campo de dirección. Es un simple interruptor que conecta el campo con tu API de Google Places.

Haz clic en el campo Dirección de tu formulario, luego haz clic en la pestaña Avanzado en la configuración del campo de la izquierda.

Desplázate hacia abajo hasta que veas la opción Habilitar autocompletar de dirección. Activa esta configuración para habilitar el autocompletar de dirección en tu formulario.

Permitir esto abrirá una función más: Mostrar mapa. Si quieres mostrar un mapa en tu formulario de contacto, activa también esta opción.

Usa el menú desplegable para especificar si quieres que el mapa aparezca encima o debajo de los subcampos de dirección.

Haz clic en el botón Guardar en la parte superior. Ahora que tu formulario de dirección con autocompletar está listo, es hora de añadirlo a tu sitio web.

Paso 7: Publicar tu formulario de dirección con autocompletar de Google Maps

WPForms te permite añadir tu formulario en múltiples ubicaciones, incluyendo páginas, entradas de blog e incluso widgets de barra lateral de tu sitio web.

Antes de incrustar tu formulario en una página, si quieres, puedes comprobar cómo se verá tu formulario en la página en vivo. Para previsualizar tu formulario, haz clic en el botón Vista previa en la parte superior.

Si está satisfecho con su formulario de dirección de autocompletado de Google Maps, está listo para agregarlo a su página. Haga clic en el icono “+” y agregue el bloque WPForms desde el editor de bloques.

Luego, seleccione su formulario en el menú desplegable del bloque. En este caso, seleccionaré el Formulario de autocompletado de direcciones que acabo de crear siguiendo los pasos anteriores.

Después de eso, todo lo que tiene que hacer es publicar la página y su formulario se publicará y estará listo para aceptar envíos. Así es como se ve el campo de dirección con el mapa interactivo en una página publicada. ¿No es increíble?

¡Excelente trabajo! Ha creado con éxito un formulario de dirección de autocompletado de Google Maps. Consulte esta guía para obtener más detalles sobre Líneas de dirección 1 y 2.

Preguntas frecuentes sobre cómo crear un formulario de dirección de autocompletado de Google Maps

El formulario de dirección de autocompletado es un tema popular de interés entre nuestros lectores. Aquí hay respuestas a algunas preguntas comunes al respecto:

¿Qué es la dirección de autocompletado en un formulario?

La dirección de autocompletado es una función que sugiere direcciones completas y validadas a medida que los usuarios escriben en un campo del formulario. Después de ingresar 3-4 caracteres, aparece un menú desplegable con direcciones coincidentes de la base de datos de Google.

Los usuarios seleccionan su dirección en lugar de escribir cada campo manualmente. Esto elimina errores tipográficos, acelera la finalización (especialmente en dispositivos móviles) y garantiza que las direcciones sean precisas y se puedan entregar.

¿Cómo agrego una dirección de autocompletado a mi formulario de WordPress?

Instale WPForms Pro o superior, active el complemento Geolocation, genere una clave API gratuita de Google Places desde Google Cloud Console, pegue la clave API en WPForms » Ajustes » Geolocation.

Después de eso, todo lo que necesita hacer es crear un formulario, agregar un campo de Dirección y activar "Habilitar autocompletado de direcciones" en la configuración avanzada del campo.

La configuración completa tarda entre 20 y 30 minutos y se explica paso a paso en esta guía. Una vez configurado, el autocompletado funciona en cualquier formulario con un campo de Dirección.

¿El autocompletado de direcciones de WPForms funciona con Google Maps?

Sí, WPForms utiliza la API de Google Places para el autocompletado de direcciones, que es la misma tecnología que impulsa la búsqueda de direcciones de Google Maps.

Necesita habilitar tres API de Google (Places API, Maps JavaScript API y Geocoding API) para una funcionalidad completa.

WPForms también puede mostrar un mapa interactivo de Google en su formulario que muestra la ubicación de la dirección seleccionada; active esto en la configuración avanzada del campo de Dirección en "Mostrar mapa".

¿Es gratuito el autocompletado de direcciones de Google Maps?

Google proporciona 28.000 solicitudes gratuitas de autocompletado de direcciones al mes. Después de eso, paga 2,83 $ por cada 1.000 solicitudes. La mayoría de los sitios web pequeños y medianos se mantienen dentro del nivel gratuito.

Una "solicitud" cuenta cada vez que un usuario escribe en su campo de dirección y aparecen sugerencias (no por cada pulsación de tecla, sino por sesión de búsqueda). Supervise el uso en su Google Cloud Console.

Si excede los límites con frecuencia, considere actualizar su plan de Google Cloud o restringir el autocompletado solo a formularios esenciales.

¿Cuál es la diferencia entre Google Places API y Mapbox para el autocompletado?

Google Places API ofrece una cobertura de direcciones mundial más completa (más de 200 países) y una mejor validación de direcciones, pero tiene un nivel gratuito de 28.000 al mes.

Mapbox tiene solicitudes de autocompletado gratuitas ilimitadas, pero datos de direcciones menos detallados en áreas rurales y algunas regiones internacionales.

WPForms soporta ambos. Elige Google Places para obtener precisión o Mapbox para uso ilimitado. Puedes cambiar de proveedor en WPForms » Ajustes » Geolocalización sin tener que reconstruir tus formularios.

¿Puedo usar el autocompletado de direcciones en los formularios de pago de WooCommerce?

El autocompletado de direcciones de WPForms solo funciona en formularios creados con WPForms, no en el pago nativo de WooCommerce. Sin embargo, puedes crear un formulario de pago personalizado con WPForms con integración de pagos y autocompletado de direcciones.

Alternativamente, instala un plugin de autocompletado de direcciones específico para WooCommerce que se integre directamente con los campos de pago de WooCommerce.

Si necesitas específicamente la integración con WooCommerce, consulta el directorio de plugins de WooCommerce para ver plugins de "autocompletado de direcciones" o "Google Places" diseñados para el pago.

¿Cuál es el mejor plugin de Google Maps para WordPress?

WPForms Pro es uno de los mejores plugins de mapas para WordPress. Incluye un potente complemento de Geolocalización que viene con una función de autocompletado de direcciones preconstruida que funciona con Google Maps o Mapbox.

Esta función autolocaliza y sugiere automáticamente las ubicaciones de tus usuarios mientras completan y escriben sus direcciones.

Además, con el complemento de Geolocalización, puedes añadir un mapa a tu formulario de contacto de WordPress y permitir que tus usuarios añadan una ubicación ajustando el marcador en el mapa.

¿Qué le sucede a mi formulario si supero el nivel gratuito de Google?

Si superas las 28.000 solicitudes de autocompletado al mes, Google te cobrará en tu cuenta de Cloud (si la facturación está habilitada) o dejará de proporcionar sugerencias de autocompletado (si la facturación no está habilitada).

Tu formulario sigue funcionando y el campo de Dirección se convierte simplemente en una entrada de texto normal sin sugerencias. Los usuarios aún pueden escribir direcciones manualmente.

Monitoriza tu uso en Google Cloud Console y configura alertas de facturación para evitar sorpresas. La mayoría de los sitios web se mantienen muy por debajo del límite gratuito, a menos que tengan un tráfico muy alto.

A continuación, mejora tus formularios con mapas interactivos

¡Excelente trabajo! Has creado con éxito un formulario de dirección con autocompletado de Google Maps que mejora la experiencia del usuario y garantiza datos de dirección precisos. Ahora que tienes el autocompletado de direcciones funcionando, lleva tus formularios al siguiente nivel con el Campo de Mapa de WPForms.

Esta función te permite incrustar mapas interactivos directamente en tus formularios donde los usuarios pueden hacer clic para seleccionar ubicaciones, ver múltiples ubicaciones de negocios con marcadores personalizados o elegir su área de servicio preferida en un mapa visual. El Campo de Mapa es perfecto para:

• Formularios de reserva multilocación: Permite a los clientes ver todas las ubicaciones en un mapa y seleccionar su sucursal preferida.
• Selección de área de servicio: Muestra tus zonas de cobertura visualmente para que los clientes sepan si das servicio en su área.
• Formularios de contacto con ubicaciones de oficinas: Ayuda a los visitantes a encontrar la oficina más cercana antes de que envíen el formulario.
• Registro de eventos: Muestra las ubicaciones de los lugares con indicaciones integradas en el formulario.

Consulta estas guías para explorar lo que es posible:

• Cómo mostrar un mapa con tu formulario de contacto de WordPress
• Cómo crear un formulario de reservas de WordPress para múltiples ubicaciones

¿Quieres hacer un seguimiento de qué formularios convierten mejor? Aprende cómo rastrear una fuente de clientes potenciales en WordPress para ver qué fuentes de tráfico te generan más envíos de formularios.

Crea tu formulario de WordPress ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.