Resumen de la IA
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 resuelve este problema 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 con direcciones reales entre las que pueden elegir.
¿Quieres configurar esto en tu formulario para eliminar errores tipográficos y acelerar la cumplimentación del formulario? En esta guía, te proporcionaré instrucciones paso a paso sobre cómo crear un formulario de direcciones con autocompletado de Google Maps.
¿Cómo puedo crear un formulario de autocompletar direcciones de Google Maps?
Con WPForms Pro y el complemento Geolocation, puedes añadir funciones de mapa a tus formularios en un abrir y cerrar de ojos. Sigue estas sencillas instrucciones paso a paso para empezar:
- Paso 1: Instalar el plugin WPForms
- Paso 2: Activar el complemento de geolocalización
- Paso 3: Configurar los ajustes de geolocalización
- Paso 4: Cree su formulario de direcciones con autocompletado
- Paso 5: Añade el campo de dirección a tu formulario
- Paso 7: Publica tu formulario de direcciones con autocompletado de Google Maps
- A continuación, mejora tus formularios con mapas interactivos.
Paso 1: Instalar el plugin WPForms
Lo primero que debes hacer es instalar el plugin WPForms, un potente creador de formularios que facilita la creación de formularios de contacto, formularios de registro y mucho más.
Cuenta con más de 2100 plantillas de formularios de WordPress que puedes utilizar y viene con herramientas de geolocalización integradas para facilitarte 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 veremos en este tutorial.
Si eres nuevo en WordPress o tienes alguna dificultad durante el proceso de instalación de un plugin, puedes consultar la guía paso a paso sobre cómo instalar un plugin de WordPress.
Actualice ahora a WPForms Pro 🙂 ...
Paso 2: Activar el complemento de geolocalización
Ahora que WPForms Pro está instalado, debes activar el complemento Geolocation. Este es el que habilita todas las funciones de mapa en tus formularios de contacto.
Para activar el complemento, diríjase a su panel de control de WordPress y haga clic en WPForms " Complementos.
En la barra de búsqueda, escribe «Geolocalización». A continuación, haz clic en el botón «Instalar complemento » para cambiar su estado 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 geolocalización
Una vez que haya habilitado el addon de Geolocalización, necesita configurar sus ajustes. Para ello, haga clic en WPForms " Configuración.
En la página de configuración de WPForms, haga clic en Geolocalización en las pestañas de la parte superior para acceder a su configuración.
Aquí verá diferentes opciones para configurar el complemento Geolocalización en función de diferentes necesidades y requisitos:
- Proveedor de lugares: Tienes la opción de elegir qué proveedor quieres que reciba tu información de geolocalización. Aquí seleccionaremos la API de Google Places como nuestro proveedor de lugares.
- Ubicación actual: Activa 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 autocompletar direcciones y mostrar Google Maps en tus formularios, necesitarás generar una clave API y conectarla con WPForms.
Veamos el proceso completo de generación de una clave API.
Generación de una clave API desde Google Developer Console
Accede a Google Developer Console y selecciona el proyecto en el menú Seleccionar un proyecto de la parte superior.
Si no tiene ningún proyecto creado anteriormente, haga clic en Nuevo proyecto para crear uno nuevo.
Una vez que haya creado correctamente un nuevo proyecto, haga clic en Activar API y servicios.
Se abrirá una biblioteca API de Google.
A partir de aquí, tendrás que habilitar tres 3 API:
- API de geocodificación
- API JavaScript de mapas
- API de lugares
Esta biblioteca de API ofrece una sencilla opción de búsqueda; escriba el nombre de la API en el cuadro de búsqueda, vaya a su API y pulse el botón HABILITAR.
Una vez que hayas habilitado todas las API, vuelve al panel de control de Google Console y accede a la pestaña Credenciales.
Haga clic en el botón Crear credenciales de la parte superior y seleccione la opción Clave API.
Se abrirá una ventana emergente con una clave API. Haga clic en la opción RESTRINGIR CLAVE en la esquina inferior derecha de la ventana emergente.
Se abrirá una nueva página en la que tendrás que configurar los siguientes parámetros:
- Restricciones de aplicación: Desde aquí, puede seleccionar qué sitios web, direcciones IP o aplicaciones pueden utilizar la clave API. Aquí tendrás que elegir la opción HTTP Referrers para permitir que tu Clave se utilice dentro de tus sitios web.
- Restricciones de sitios web: Una vez que seleccione los Remitentes HTTP, se mostrará una nueva opción, restricciones de sitios web. Aquí tiene que añadir el nombre de dominio de su sitio web para restringir la clave de API para ser utilizado sólo por los sitios web especificados.
- Restricciones API: Después de restringir tu Clave por Aplicación y Sitio Web, necesitarás restringir tu Clave por API. Para ello, haga clic en la opción Restringir clave.
Esto abrirá un desplegable con una opción de múltiples APIs. Seleccione las siguientes API en el menú desplegable:
- API de lugares
- API JavaScript de mapas
- Geocodificación AP
Una vez que hayas terminado de seleccionar las API, haz clic en el botón Guardar para guardar la configuración, lo que te redirigirá de nuevo a la página 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.
La configuración de geolocalización ya está configurada. A continuación, creará un formulario con la función de autocompletar direcciones habilitada.
Paso 4: Cree su formulario de direcciones con autocompletado
Una vez configurado el complemento de geolocalización, ya estás listo para crear tu formulario de contacto. Esto te llevará unos 5 minutos. Ve a WPForms » Añadir nuevo en tu panel de control de WordPress para abrir el creador de formularios.
Asigne un nombre a su formulario en el campo «Nombre del formulario ». Algo como «Contáctenos» sería adecuado. Aquí encontrará varias opciones. Si desea ahorrar tiempo, puede elegir cualquiera de nuestras más de 2100 plantillas de formularios para WordPress.
Recomiendo elegir la plantilla «Formulario de contacto simple». De este modo, dispondrás de un formulario de contacto ya preparado con los campos esenciales añadidos.
La plantilla incluye un campo Nombre, un campo Correo electrónico y un campo Comentario o Mensaje. Puede personalizar estos campos, añadir otros nuevos o eliminar los que no necesite.
Ahora bien, probablemente haya algunas cosas más que quieras configurar en el formulario, como las notificaciones y las confirmaciones. Si es así (y te lo recomiendo encarecidamente), echa un vistazo a nuestra guía detallada sobre cómo crear tu primer formulario.
Consejo profesional
Otra opción si no quieres configurar manualmente cada campo pero tienes requisitos personalizados es dejar que el generador de formularios con IA de WPForms lo haga por ti.
Simplemente pasa el cursor sobre el botón morado Generar con IA y haz clic en Generar formulario. Accederás a la pantalla del generador de formularios con IA. Aquí es donde describes qué tipo de formulario deseas.
Puedes escribir tu propio mensaje o elegir entre las sugerencias que aparecen a la izquierda. Una vez que pulses «Generar», la IA tardará unos segundos en crear tu formulario.
¡Prueba el generador de IA de WPForms! 🙂
Paso 5: Añade el campo de dirección a tu formulario
Ahora que tenemos nuestro formulario listo, sólo necesitamos añadir el campo de dirección. A la izquierda, arrastre el campo de dirección de la sección de campos de fantasía y colóquelo en el formulario.
El campo Dirección ya incluye un texto de etiqueta y subetiqueta para facilitarle la tarea. Tiene la flexibilidad de personalizar el texto de la etiqueta, seleccionar el esquema de dirección, personalizar el tamaño del campo y ocultar la etiqueta y las subetiquetas.
Ahora activará la función de autocompletado para el campo Dirección. Se trata de una sencilla opción que conecta el campo con su API de Google Places.
Haga clic en el campo Dirección de su formulario y, a continuación, haga clic en la pestaña Avanzado en la configuración del campo a la izquierda.
Desplácese hacia abajo hasta que vea la opción Habilitar autocompletar dirección. Active esta opción para habilitar la función de autocompletar direcciones en el formulario.
Al permitirlo se abrirá una función más: Mostrar mapa. Si desea mostrar un mapa en su formulario de contacto, active también esta opción.
Utilice el menú desplegable para especificar si desea que el mapa aparezca encima o debajo de los subcampos de Dirección.
Haga clic en el botón Guardar de la parte superior. Ahora que su formulario de autocompletar direcciones está listo, es hora de añadirlo a su sitio web.
Paso 7: Publica tu formulario de direcciones con autocompletado de Google Maps
WPForms le permite añadir su formulario en múltiples ubicaciones, incluyendo páginas, entradas de blog, e incluso widgets de la barra lateral de su 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 Previsualizar de la parte superior.
Si estás satisfecho con tu formulario de autocompletado de direcciones de Google Maps, ya estás listo para añadirlo a tu página. Haz clic en el icono «+» y añade el bloque WPForms desde el editor de bloques.
A continuación, selecciona tu 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, solo tienes que publicar la página y tu formulario estará activo y listo para aceptar envíos. Así es como se ve el campo Dirección con el mapa interactivo en una página publicada. ¿No es increíble?
¡Buen trabajo! Has creado con éxito un formulario de dirección de autocompletar de Google Maps. Consulta esta guía para obtener más información sobre las líneas de dirección 1 y 2.
Preguntas frecuentes sobre cómo crear un formulario de dirección autocompletable de Google Maps
El autocompletado del formulario de direcciones es un tema de interés popular entre nuestros lectores. He aquí las respuestas a algunas preguntas frecuentes al respecto:
¿Qué es autocompletar dirección en un formulario?
La función de autocompletar direcciones sugiere direcciones completas y validadas a medida que los usuarios escriben en un campo del formulario. Tras introducir entre tres y cuatro caracteres, aparece un menú desplegable con las direcciones coincidentes de la base de datos de Google.
Los usuarios seleccionan su dirección en lugar de escribir cada campo manualmente. Esto elimina los errores tipográficos, agiliza la cumplimentación (especialmente en dispositivos móviles) y garantiza que las direcciones sean precisas y válidas.
¿Cómo añado una dirección de autocompletado a mi formulario de WordPress?
Instala WPForms Pro o superior, activa el complemento Geolocalización, genera una clave API gratuita de Google Places desde Google Cloud Console, pega la clave API en WPForms » Ajustes » Geolocalización.
Después, solo tienes que crear un formulario, añadir un campo «Dirección» y activar la opción «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 que tenga un campo de dirección.
¿WPForms es compatible con la función de autocompletar de Google Maps?
Sí, WPForms utiliza la API de Google Places para completar automáticamente las direcciones, que es la misma tecnología que utiliza Google Maps para la búsqueda de direcciones.
Debe habilitar tres API de Google (API de Places, API de JavaScript de Maps y API de geocodificación) para disfrutar de todas las funciones.
WPForms también puede mostrar un mapa interactivo de Google en tu formulario con la ubicación de la dirección seleccionada. Para activar esta función, ve al campo «Dirección» y, en la configuración avanzada, selecciona «Mostrar mapa».
¿El autocompletado de direcciones de Google Maps es gratuito?
Google ofrece 28 000 solicitudes gratuitas de autocompletado de direcciones al mes. A partir de ahí, se pagan 2,83 dólares por cada 1000 solicitudes. La mayoría de los sitios web pequeños y medianos se mantienen dentro del nivel gratuito.
Una «solicitud» se cuenta cada vez que un usuario escribe en el campo de dirección y aparecen sugerencias (no por pulsación de tecla, sino por sesión de búsqueda). Supervise el uso en Google Cloud Console.
Si superas los límites con frecuencia, considera la posibilidad de actualizar tu plan de Google Cloud o restringir el autocompletado solo a los formularios esenciales.
¿Cuál es la diferencia entre Google Places API y Mapbox para el autocompletado?
La API de Google Places ofrece una cobertura de direcciones más completa en todo el mundo (más de 200 países) y una mejor validación de direcciones, pero tiene un límite gratuito de 28 000 al mes.
Mapbox tiene solicitudes de autocompletado gratuitas ilimitadas, pero los datos de direcciones son menos detallados en las zonas rurales y en algunas regiones internacionales.
WPForms es compatible con ambos. Elige Google Places para mayor precisión o Mapbox para un uso ilimitado. Puedes cambiar de proveedor en WPForms » Ajustes » Geolocalización sin necesidad de volver a crear tus formularios.
¿Puedo utilizar la función de autocompletar direcciones en los formularios de pago de WooCommerce?
La función de autocompletar direcciones de WPForms solo funciona en formularios creados con WPForms, no en el proceso de pago nativo de WooCommerce. Sin embargo, puedes crear un formulario de pago personalizado utilizando WPForms con integración de pagos y autocompletar direcciones.
Como alternativa, instala un complemento 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, busca en el directorio de plugins de WooCommerce los plugins «autocompletar dirección» o «Google Places» diseñados para el proceso de 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 con una función de autocompletado de direcciones preintegrada que funciona con Google Maps o Mapbox.
Esta función localiza y sugiere automáticamente las ubicaciones de sus usuarios a medida que rellenan y escriben sus direcciones.
Además, con el complemento de geolocalización, puede añadir un mapa a su formulario de contacto de WordPress y permitir que sus usuarios añadan una ubicación ajustando la chincheta en el mapa.
¿Qué ocurre con 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 ofrecerte sugerencias de autocompletado (si la facturación no está habilitada).
Tu formulario sigue funcionando y el campo Dirección se convierte en un campo de texto normal sin sugerencias. Los usuarios pueden seguir escribiendo las direcciones manualmente.
Controle su uso en Google Cloud Console y configure alertas de facturación para evitar sorpresas. La mayoría de los sitios se mantienen muy por debajo del límite gratuito, a menos que tengan un tráfico muy elevado.
A continuación, mejora tus formularios con mapas interactivos.
¡Excelente trabajo! Ha creado con éxito un formulario de autocompletado de direcciones de Google Maps que mejora la experiencia del usuario y garantiza la precisión de los datos de las direcciones. Ahora que ya tiene el autocompletado de direcciones en funcionamiento, lleve sus formularios al siguiente nivel con el campo de mapa de WPForms.
Esta función le permite incrustar mapas interactivos directamente en sus formularios, donde los usuarios pueden hacer clic para seleccionar ubicaciones, ver múltiples ubicaciones comerciales con marcadores personalizados o elegir su área de servicio preferida desde un mapa visual. El campo Mapa es perfecto para:
- Formularios de reserva para múltiples ubicaciones: permita a los clientes ver todas las ubicaciones en un solo mapa y seleccionar su sucursal preferida.
- Selección del área de servicio: Muestra tus zonas de cobertura de forma visual para que los clientes sepan si prestas servicio en su área.
- Formularios de contacto con ubicaciones de oficinas: Ayuda a los visitantes a encontrar la oficina más cercana antes incluso de enviar el formulario.
- Inscripción al evento: Muestra las ubicaciones de los recintos con indicaciones integradas en el formulario.
Echa un vistazo a estas guías para descubrir todas las posibilidades:
- Cómo mostrar un mapa con tu formulario de contacto de WordPress
- Cómo crear un formulario de reserva de WordPress para múltiples ubicaciones
¿Quieres saber qué formularios convierten mejor? Aprende a rastrear una fuente de clientes potenciales en WordPress para ver qué fuentes de tráfico te aportan más envíos de formularios.
Cree su formulario WordPress ahora
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin más sencillo para crear formularios en WordPress. WPForms Pro incluye un montón de plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha ayudado, síguenos en Facebook y Twitter para más tutoriales y guías gratuitas sobre WordPress.
Esto NO funciona ¡devuelve error en el campo!
¡Hola Nathan! Lamento oír que la función de autocompletar direcciones de tu formulario está dando errores. ¿Podrías ponerte en contacto con nosotros y darnos más detalles sobre el problema para que podamos ayudarte a solucionarlo?
Esperamos sus noticias.
Buenas tardes,
El complemento de Google Maps funciona bien, ¡un gran trabajo!
Pero, ¿hay alguna forma de guardar las coordenadas lat y long dentro de la dirección seleccionada?
Gracias de antemano.
Me he dado cuenta de que captura la dirección en un solo campo, lo que dificulta el análisis sintáctico en los campos estándar de dirección, ciudad, estado y código postal. ¿Hay alguna forma de hacerlo?
Hola Adam,
Para hacer lo que ha descrito, puede crear un campo de dirección personalizado en el formulario utilizando campos de texto de una sola línea y un campo desplegable.
Puedes añadir opciones rápidamente en un campo Desplegable utilizando nuestra opción Añadir en Masa en el constructor de formularios. Para ello, haz clic en el campo desplegable y, en el panel izquierdo de opciones de campo, haz clic en Añadir en bloque. En la nueva sección que aparece, seleccione Mostrar preconfiguraciones. A continuación, puede seleccionar de nuestra lista de opciones preestablecidas. He aquí un breve screencast del proceso que añade Países como ejemplo.
Por si te sirve de ayuda, también tenemos un tutorial detallado al respecto.
Para el subcampo Código postal puede utilizar el campo Números, o exigir que los usuarios sólo puedan añadir números a un campo Texto de una línea utilizando el método de máscara de entrada. Tenemos más detalles en nuestro tutorial aquí.
Si lo desea, también puede formatear su formulario para que tenga varias columnas. Tenemos un gran tutorial sobre cómo hacerlo aquí.
Espero que te sirva de ayuda 🙂 .
He observado que el correo electrónico de notificación no incluye los datos del mapa. ¿Hay alguna forma de incluirlos cuando se envía una consulta a través del formulario de contacto?
Hola Rob,
Para configurar esto, abra el constructor de formularios y vaya a Configuración " Notificaciones. A continuación, desplácese hasta la sección Mensaje de correo electrónico y añada el campo
{entry_geolocation}Etiqueta inteligente.Por si te sirve de ayuda, aquí tienes una guía para incluir los datos de geolocalización en tus correos electrónicos.
Espero que te sirva de ayuda 🙂 .
¿Hay alguna forma de restringir sólo una ciudad o estado/provincia en lugar de mostrar direcciones de todo el mundo? Gracias. Por lo demás el addon funciona genial 🙂 .
Hola Rodney - Actualmente no tenemos la función en Geolocalización addon para restringir la dirección de autorrelleno basado en el país o ubicación. Estoy de acuerdo en que sería una gran función, y la añadiré a nuestro rastreador de solicitudes de funciones para que esté en el radar de nuestros desarrolladores.
Hola, me he dado cuenta de que esto sólo funciona para las direcciones. Necesito una forma de permitir que los aeropuertos, hoteles, etc. se autocompleten. Actualmente cuando el usuario escribe algo como "aeropuerto viena" no hay nada que elegir. ¿Hay alguna forma de activarlo? Pensé que sería genial añadirlo a mi sitio web de taxis, pero ahora sólo confunde a la gente y abandonan durante el envío del formulario.
Hola Matej,
Para habilitar el autocompletado de ubicaciones como aeropuertos y hoteles en WPForms, puede utilizar la función de autocompletado de direcciones proporcionada por el complemento de geolocalización. Esta función aprovecha servicios como Google Places o Mapbox, que pueden autocompletar una amplia gama de tipos de ubicación -incluidas direcciones, aeropuertos, hoteles y otros puntos de interés- en función de los datos disponibles del proveedor de mapas al que se conecte.
Espero que le sirva de ayuda.