¿Alguna vez ha perdido un cliente porque su formulario de WordPress era demasiado largo o frustrante de llenar? Sucede todo el tiempo. Un comprador está listo para comprar, pero luego se atasca escribiendo una dirección larga, especialmente en un dispositivo móvil.
Un pequeño error tipográfico puede significar una entrega fallida y, en muchos casos, el cliente simplemente se rinde antes de terminar.
Es por eso que la autocompletación de direcciones es tan útil. Sugiere la dirección correcta tan pronto como los usuarios comienzan a escribir, haciendo que el proceso sea más rápido, más fácil y menos propenso a errores. El resultado son clientes más felices y menos ventas perdidas.
Además, es fácil de configurar. En esta guía, le mostraré cómo agregar la autocompletación de direcciones a sus formularios de WordPress paso a paso utilizando WPForms y su complemento Geolocation.
¿Por qué agregar campos de dirección con autocompletación en WordPress?
Agregar la autocompletación de direcciones a su sitio de WordPress es una forma fácil de mejorar la experiencia de usuario de su sitio web. En una tienda de comercio electrónico, por ejemplo, ayuda a los clientes a ingresar su dirección más rápido y evitar errores tipográficos.
Así es como funciona: A medida que los compradores escriben, aparecen sugerencias de direcciones, extraídas de Google Places/Maps. Esto les permite simplemente elegir la correcta y el formulario se completa automáticamente.
Eso reduce los errores y acelera el proceso de pago. Y los pagos más rápidos y precisos impulsan las ventas y hacen que los compradores regresen.
Más allá de las tiendas en línea, la autocompletación de direcciones ayuda a reducir errores en formularios de registro y reservaciones. Además, facilita el llenado de cualquier tipo de formulario, especialmente en dispositivos móviles.
Ahora que entiendes los beneficios de agregar campos de dirección con autocompletado en WordPress, te mostraré cómo hacerlo, paso a paso.
Aquí tienes un resumen rápido de todos los pasos que cubriré en este artículo:
- Paso 1: Genera una clave de API de Google Places
- Paso 2: Instala el plugin WPForms y el Addon de Geolocation
- Paso 3: Habilita la autocompletación de direcciones en tus formularios de WordPress
- Paso 4: Crea un formulario con autocompletado de direcciones
- Paso 5: Incrusta tu formulario de WordPress con autocompletado de direcciones
- Consejo extra: Rastrea y reduce el abandono de formularios en WordPress
- Preguntas frecuentes sobre la autocompletación de campos de dirección en formularios de WordPress
- Más guías para usar formularios de WordPress
¿Listo? Empecemos.
Paso 1: Genera una clave de API de Google Places
Para conectar WPForms con Google Maps y habilitar la función de autocompletado de direcciones, necesitarás una clave de API de Google Places. Te guiaremos a través del proceso.
🚨 Atención: Google ahora requiere que configures una cuenta de facturación para usar sus servicios de mapas. La buena noticia es que ofrecen un crédito gratuito generoso cada mes, por lo que la mayoría de los sitios web pequeños no tendrán que pagar nada para usar esta función.
Para obtener tu clave, deberás dirigirte a la Plataforma de Google Maps, que se administra dentro de la Google Cloud Console. La consola puede parecer un poco compleja, pero no te preocupes, te guiaré a través de los pasos exactos que necesitas.
Primero, hagamos clic en 'Crear proyecto'.
En la siguiente pantalla, deberás nombrar tu nuevo proyecto. Te recomiendo usar un nombre que te ayude a identificarlo fácilmente más tarde.
Luego, si tienes una organización a la que quieras conectarte, puedes hacer clic en el enlace ‘Browse’ (Explorar) para ver un menú desplegable de opciones. Alternativamente, puedes seleccionar ‘No organization’ (Sin organización).
Una vez que todo se vea bien, puedes presionar el botón ‘Create’ (Crear).
En la siguiente pantalla, procede a abrir la pestaña ‘Library’ (Biblioteca).
Desde allí, deberás activar tres APIs específicas. Piensa en ellas como un equipo que trabaja en conjunto:
- API de Lugares: Este es el jugador estrella que proporciona las sugerencias de autocompletado de direcciones mientras escribes.
- API de JavaScript de Mapas: Esto te permite mostrar una vista de mapa de la dirección seleccionada directamente en tu formulario (lo cual es una característica genial y opcional).
- API de Geocodificación: Esto funciona detrás de escena para convertir direcciones en coordenadas de mapa.
La forma más fácil de encontrarlas es usando la barra de búsqueda: simplemente busca, selecciona la API y haz clic en ‘Habilitar’. Repite esto hasta que las tres APIs estén activas.
Una vez hecho esto, generarás una clave única que tu sitio usará para comunicarse con las APIs de Google.
Así que, aunque hayas habilitado tres APIs diferentes, no necesitas tres claves separadas. Una sola clave de API puede dar a tu sitio acceso a todas ellas, siempre y cuando configures las restricciones adecuadas.
Para hacer esto, puedes ir a la pestaña ‘Credenciales’. Luego, puedes hacer clic en Crear credenciales » Clave de API.
Esto abrirá un panel para configurar la clave de API.
En ‘Restricciones de aplicación’, selecciona ‘Sitios web’ para que la clave solo funcione en tu sitio web.
Esto abrirá la opción de configuración de ‘Restricciones del sitio web’.
Aquí, simplemente puedes ingresar tu nombre de dominio y hacer clic en ‘Listo’.
Después de eso, puedes continuar a la sección ‘Restricciones de API’.
Primero, habilitemos la opción ‘Restringir clave’.
Luego, en el menú desplegable ‘Seleccionar APIs’, querrás seleccionar las tres APIs que acabas de habilitar y hacer clic en ‘Ok’.
Esto limitará el acceso de la clave solo a esas APIs.
💡 Consejo Pro: Restringir tu clave de API es un paso de seguridad súper importante. Evita que cualquier otra persona encuentre tu clave y la use en su sitio web. Esto podría generar cargos inesperados a tu cuenta.
Después de guardar tus cambios, verás tu clave API única.
Cópiala, la necesitarás en el siguiente paso al conectarla a WPForms.
Paso 2: Instala el plugin WPForms y el Addon de Geolocation
Para este tutorial, usaremos WPForms, que es el mejor creador de formularios de contacto para WordPress. Viene con un potente complemento Geolocation que hace que agregar autocompletado de direcciones sea increíblemente simple.
En WPBeginner, usamos WPForms para mostrar nuestro formulario de contacto y realizar nuestras encuestas anuales a lectores. Consulta nuestra reseña completa de WPForms para obtener más información sobre el complemento.
Lo primero que debes hacer es registrarte para obtener una cuenta de WPForms. En su sitio web, simplemente haz clic en 'Get WPForms Now' para comenzar.
Luego puedes seleccionar un plan y continuar con el proceso de pago.
💡 Nota: Necesitarás el plan WPForms Pro o superior para acceder al complemento Geolocation. Pero hay una versión gratuita de WPForms si quieres probarla primero.
Una vez que te hayas registrado, deberás instalar y activar el complemento WPForms.
Desde tu área de administración de WordPress, simplemente navega a Plugins » Agregar Nuevo Plugin.
Después de eso, puedes usar la función de búsqueda para encontrar el complemento WPForms.
En los resultados de búsqueda, haz clic en 'Instalar ahora' y luego haz clic en el botón 'Activar' cuando aparezca.
Si necesitas ayuda, puedes seguir nuestra guía sobre cómo instalar un plugin de WordPress.
Al activarlo, deberás verificar tu clave de licencia.
Para empezar, ve a WPForms » Ajustes, introduce tu clave de licencia en el campo proporcionado y haz clic en el botón ‘Verificar clave’. Puedes encontrar tu clave de licencia en tu cuenta de WPForms.
Con eso hecho, puedes ir a WPForms » Addons desde el panel de administración de WordPress para instalar el complemento Geolocation.
En la siguiente pantalla, revisa las opciones (o usa la barra de búsqueda) y haz clic en ‘Install Addon’ para el complemento Geolocation.
WPForms instalará y activará automáticamente el complemento en unos momentos.
Paso 3: Habilita la autocompletación de direcciones en tus formularios de WordPress
Ahora que tienes tu clave API única y el complemento Geolocation, es hora de habilitar el autocompletado de direcciones en tu formulario de WordPress.
Dirígete a WPForms » Settings desde tu panel de WordPress. Luego, cambia a la pestaña ‘Geolocation’ en la parte superior.
Aquí encontrarás algunas opciones que puedes ajustar:
- Places Provider – Para esta guía, seleccionaremos ‘Google Places’.
- API Key – Pega la clave API única que generaste en el Paso 1. Esto habilitará el autocompletado de direcciones y mostrará Google Maps dentro de tus formularios.
- Current Location – Activa esto para completar automáticamente la ubicación de los usuarios en tus formularios.
No olvides hacer clic en ‘Save Settings’ en la parte inferior de este panel.
A continuación, solo necesitas habilitar el autocompletado en el formulario donde quieras usarlo. Puedes editar un formulario existente o crear uno nuevo.
Paso 4: Crea un formulario con autocompletado de direcciones
Hasta ahora, has conectado WPForms con Google Maps. En este paso, crearemos un formulario con un campo de Dirección.
Para empezar, ve a WPForms » Add New desde tu área de administración de WordPress.
En la siguiente pantalla, puedes ponerle un nombre a tu formulario.
Querrás usar un nombre claro y descriptivo para que sea más fácil de organizar a medida que creas más formularios.
Después de eso, elegirás cómo quieres construir tu formulario: usando un lienzo en blanco, una plantilla predeterminada o un generador de formularios con IA.
Si deseas usar el creador de formularios impulsado por IA, todo lo que tienes que hacer es ingresar una indicación simple. WPForms AI generará el formulario por ti en unos segundos.
Para este tutorial, sin embargo, usaré una plantilla prehecha.
WPForms viene con más de 2,000 plantillas de formularios, lo que facilita encontrar una que sea casi perfecta para tu objetivo.
Una vez que hayas encontrado una buena plantilla para usar como base, simplemente pasa el cursor sobre ella y haz clic en el botón 'Usar plantilla'. Aquí, usaré la plantilla Formulario de contacto simple.
Esto abrirá el creador de formularios de arrastrar y soltar.
A continuación, arrastra el campo 'Dirección' desde el panel izquierdo y suéltalo en tu formulario (si no está ya ahí).
Una vez que el campo 'Dirección' esté en su lugar, puedes hacer clic en él para abrir el panel 'Opciones del campo'.
Aquí, puedes ajustar la etiqueta del campo, agregar una descripción del campo o elegir un esquema de dirección diferente: EE. UU. o internacional.
Una vez que hayas personalizado la configuración general, puedes cambiar a la pestaña 'Avanzado'.
Luego, desplázate por el panel hasta que encuentres la opción 'Habilitar autocompletado de dirección'. Actívala.
Esto permitirá a los usuarios autocompletar rápidamente su dirección completa, incluyendo ciudad, estado y código postal, directamente en tu formulario de WordPress.
Habilitar esta función abrirá las opciones de 'Mostrar mapa'. Simplemente actívala para agregar el mapa a tu campo 'Dirección'.
Luego, puedes elegir mostrar el mapa encima o debajo del campo en tu formulario.
Una vez que hayas terminado, no olvides presionar el botón 'Guardar' en la parte superior para aplicar tus cambios.
Desde aquí, puedes personalizar tus notificaciones y confirmaciones. Para más detalles, consulta nuestra guía sobre cómo crear un formulario de contacto.
Paso 5: Incrusta tu formulario de WordPress con autocompletado de direcciones
Ahora, estás listo para agregar tu formulario a tu sitio de WordPress.
Para empezar, haz clic en el botón 'Incrustar' en la parte superior del constructor de formularios.
Aparecerá una ventana emergente donde puedes agregar el formulario a una página existente o crear una nueva página.
Para este tutorial, elegiré 'Seleccionar página existente'.
En la siguiente ventana emergente, puedes continuar y elegir una página del menú desplegable.
Luego, haz clic en '¡Vamos!' para continuar.
WPForms te redirigirá al editor de bloques de WordPress.
Aquí, haz clic en el ícono '+' y agrega el bloque WPForms.
Luego, selecciona tu formulario del menú desplegable.
WPForms lo cargará automáticamente en el editor de contenido.
En el panel derecho, puedes ajustar la 'Configuración del formulario'.
Por ejemplo, es posible que desees mostrar el título o la descripción del formulario para proporcionar a los visitantes más contexto.
También puedes dar estilo a tu formulario para que coincida mejor con el tema de tu sitio. Y una vez que estés satisfecho con el diseño, simplemente presiona el botón 'Guardar'.
¡Eso es todo! Ahora puedes visitar la página de tu formulario e intentar escribir una dirección.
El campo de dirección mostrará automáticamente sugerencias de Google Maps, permitiendo a los usuarios completar su dirección con un solo clic.
Has agregado exitosamente la función de autocompletado de direcciones de Google a tus formularios.
Los usuarios podrán autocompletar tu formulario, ya sea al finalizar la compra en tu tienda WooCommerce o al completar un registro de registro de usuario.
Así es como podría verse una vez que los usuarios seleccionen una sugerencia de dirección autocompletada:
Consejo extra: Rastrea y reduce el abandono de formularios en WordPress
El abandono de formularios ocurre cuando las personas abandonan un formulario sin enviarlo, lo cual a menudo se debe a una mala experiencia de usuario.
Reducir el abandono de formularios es importante porque puede afectar el crecimiento de tu lista de correo, tus ventas de comercio electrónico y el éxito general del negocio.
Los estudios muestran que más del 77% de los compradores en línea no completan sus formularios de pago, lo que significa perder mucho dinero por ventas incompletas.
Al rastrear y mejorar los formularios que las personas a menudo abandonan, puedes reducir estas pérdidas de ingresos.
Si bien el autocompletado puede ayudar, todavía hay otros factores que pueden contribuir al abandono de formularios:
- Campos opcionales marcados como obligatorios: Obligar a las personas a completar información no esencial puede ser muy molesto.
- Instrucciones poco claras: Los campos de formulario confusos o vagos pueden hacer que las personas se rindan.
- No amigable para dispositivos móviles: Los formularios que son difíciles de usar en dispositivos móviles pueden ser un gran inconveniente.
- Problemas técnicos: Problemas como que el formulario no funcione bien o tiempos de carga lentos pueden impedir que las personas lo completen.
Para más detalles, puedes leer nuestra guía sobre cómo rastrear y reducir el abandono de formularios en WordPress.
Preguntas frecuentes sobre la autocompletación de campos de dirección en formularios de WordPress
¿Cómo funciona el autocompletado de direcciones?
Tu formulario se conecta a un servicio de ubicación como Google Places o Mapbox. A medida que los usuarios escriben, muestra sugerencias de direcciones coincidentes. Cuando eligen una, los campos (calle, ciudad, código postal, etc.) se completan automáticamente.
¿Funcionará con mi tema de WordPress?
Por lo general, sí. Autocompletar funciona con la mayoría de los temas de WordPress modernos, pero a veces, scripts personalizados o temas muy modificados pueden causar conflictos.
¿Qué plugins de WordPress admiten el autocompletado de direcciones?
Varios plugins de formularios ofrecen esto, generalmente a través de complementos o integraciones. WPForms con el complemento Geolocation es una de las mejores opciones.
¿Qué pasa si las sugerencias no aparecen?
Algunas causas comunes incluyen una clave de API faltante o incorrecta, errores de JavaScript o conflictos de temas, y restricciones de API (como configuraciones de dominio incorrectas).
Más guías para usar formularios de WordPress
Espero que este artículo te haya ayudado a aprender cómo agregar autocompletar para campos de dirección en WordPress.
Si encontraste útil esto, también te pueden interesar nuestras otras guías útiles sobre:
- Cómo crear formularios de WordPress con campos desplegables
- Cómo crear formularios multilingües en WordPress
- Cómo rastrear el recorrido del usuario en formularios de clientes potenciales de WordPress
- Consejos de expertos para crear formularios más interactivos y aumentar las conversiones
- Formas de usar la lógica condicional en formularios de WordPress (casos de uso principales)
- Cómo Crear un Formulario Personalizado de Airtable en WordPress
- Guía definitiva para usar formularios de 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.
M K Soleman Ahmed
No está funcionando ahora.
Soporte de WPBeginner
Gracias por informarnos, nos aseguraremos de revisarlo y encontrar una alternativa.
Administrador
Vinod
el autocompletado aparece en el primer campo pero no en los campos de código postal y estado, por favor, asesórenme.
Soporte de WPBeginner
Hola Vinod,
Lamentablemente, para esa personalización, necesitarías contactar al soporte del plugin para ver si actualmente soportan campos múltiples.
Administrador
Mooki
Funciona, gracias, había buscado en sitios web y plugins y nada funcionó hasta que llegué a este útil sitio
Soporte de WPBeginner
Glad our site could help you
Administrador
Fabiano Hirtz
Tengo un sitio de viajes, tours y traslados, me gustaría instalar esta herramienta, cuando el cliente seleccionaba el lugar de visita y la llegada no se transfería, o el tour, pero no es un formulario de contacto, sino un formulario de búsqueda, ¿funciona? Puse la clase, hice todo correctamente, todavía no funciona. ¿Alguien puede ayudarme?
Jay Kuntal
Hola, intenté mucho con la API. Funciona bien cuando uso código personalizado de Google en CodePen. Pero cuando pongo la misma API en este plugin, no funciona.
He habilitado dos API: Places Web y Maps JS con credenciales en Places Web.
¿Qué me falta aquí?
Gracias
ahmer
Hola Jay,
¿lograste que funcionara? Estoy atascado, no parece que pueda hacerlo funcionar.
Tess
Me interesa saber cómo establecer un país predeterminado para que aparezca primero (en lugar de las direcciones predeterminadas de EE. UU.). ¿Tienes alguna idea si hay un código corto o alguna forma de hacer esto con este plugin?
BTW, I got the plugin working by just adding into the “Name” field. It works fine for me apart from wanting it to show AU addresses first.
asima
¿Cómo poblar la 'ubicación actual' en el menú desplegable de selección 'área/vecindario' como la primera opción de selección (el resto de las opciones provienen de la base de datos)?
steve hajjaj
Hola, gracias por el artículo. He seguido el proceso que describiste, pero todavía no consigo que el autocompletado funcione en absoluto. ¿Hay algo mal con mi cuenta de desarrolladores de Google? Ya que puedo ver que las 2 API están habilitadas, pero no veo ninguna solicitud. Gracias
Soporte de WPBeginner
Hola Steve,
Asegúrate de que estás apuntando a la clase CSS o ID correcta utilizada por el campo de dirección de tu formulario.
Administrador
Luke
Encontré un error. Cuando escribes el nombre del negocio, la dirección autocompletada NO incluye el número de la calle, solo el nombre de la calle (Calle Principal, no Calle Principal 123). ¡¡¡Gran problema!!!
Luke
Además, ¡el código postal siempre falta!
Luke
Además, lo único que se envía en el envío del formulario son las claves que un usuario comenzó a escribir. La dirección que el usuario selecciona es lo que se muestra, pero no lo que se envía con el formulario.
Soporte de WPBeginner
Hola Luke,
Si crees que has encontrado un error, por favor repórtalo a los autores del plugin. Es posible que estén al tanto de una solución o que puedan trabajar en ello.
Administrador
Sarah
Si hay algo que tenemos en cuenta; es la 'expansión de la misión' de Google en sitios web y áreas de aplicaciones relacionadas.
Donde podemos, intentamos no involucrar a Google en nuestros sitios para mantener el 'control' en lo que hacemos.
Pero gracias por la información...
Camilo
¿Es posible que el autocompletado también rellene el código postal, el estado y el país? Seguí todo aquí y la dirección se rellena automáticamente, pero el usuario aún tiene que introducir manualmente su código postal, estado y ciudad.
Soporte de WPBeginner
Hola Camilo:
Actualmente solo es posible si utilizas el campo único para la dirección completa.
Administrador
Zafar Rathore
Excelente artículo para autocompletar. Buscaba un método tan fácil de usar y ustedes lo hicieron.
El autocompletar realmente ahorra mucho tiempo a los usuarios finales, lo que finalmente contribuye a un entorno amigable para el usuario.
Sigan así, chicos.
Gracias
Nicholas Johnson
Planeo crear un formulario de WP con autocompletado, pero no sé cómo hacerlo. Después de leer esta publicación, tengo una idea para crear formularios de autocompletado.